React | Becoming a proficient react dev.

            Topics to learn React JS

I am sharing my learning experience in learning React js starting from zeroth level to being an experienced react js developer.

When I first started studying react js, there were just a few blogs that explained how to get started with react js. So I'm just giving some pointers and topics on how to learn react js and get hired by top MNCs or become a cool "react js freelancer."

As Usual, as a front-end developer, we need to know HTML, Bootstrap, and javascript basics.
So before going into react just brush up some basics as mentioned below,

Javascript:-

• Javascript

• ECMAScript (ec5, ec6, …. So On),

Work out from the basics:-

1. Components 

2. JSX

3. Rendering elements

4. State and life cycle. 

5. Props

6. Route changes

7. API hit using AXIOS Module(GET, POST, PUT, DELETE) 

8. Import and use third party modules

Get into deeper:-

1. Class and Function components

=> Functional components are preferable and commonly used worldwide

2. Hooks (Available in Function components)

1. Basic Hooks

1. useState

2. useEffect

3. useRef

Reference link: https://reactjs.org/docs/hooks-intro.html

3. Use react-dom 

Reference link: https://reactjs.org/docs/react-dom.html

4. Create some custom reusable components to reuse in your project
     Example:- Create a custom drawer with different custom props  and use the whole project bypassing different customized props

5. Lazy Loading Concepts

6. Try to use some libraries like

• Lodash

• Moment

• D3 Charts

7. Redux:-

Redux is a pattern and library for managing and updating application state, using events called "actions".

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

Most commonly used react js are

• Redux saga
  Reference URL: https://redux-saga.js.org/

• Redux Thunk

Reference URL: https://github.com/reduxjs/redux-thunk

8. Forms:-

Reference link: https://reactjs.org/docs/forms.html

9. Material UI for React:-

Material-UI components work in isolation. They are self-supporting, and will only inject the styles they need to display. 

React support all third party packages because it is a library (not a framework like angular)

So you can easily import and use material UI component in your applications

“Success is nothing more than a few simple disciplines, practised every day.” So once you learn the above topics better create your own tasks and try to achieve the same with the react js implementation.

Example Tasks to practice:-

1. Develop a Tic Tac Toe game using react js

2. TODO List application with some API integration, page navigation and CRUD operations

3. Try to implement basic authentication flow like login, register, dashboard page with proper navigation.

Conclusion:-

      Hope I have given some knowledge on “How to become a good react developer”. If you need some personal advice you can connect me via LinkedIn (https://www.linkedin.com/in/ravichandharpb/)