So keep yourself excited while learning and don’t hang around too long with the fundamentals where you cannot see the purpose without ever applying them in a real world scenario.
Now, let’s go through the road-map step by step and find out how you can learn the skills to become a successful React developer. I have divided this into three categories and they are:
- Advanced topics
This section is for you if you are a complete beginner to React. So the fundamentals of React to learn are as follows:
- Create React App
- Functional component
- Class component
setStateand component life cycle methods
- Conditional rendering
- Lists and keys
- Building simple forms
Create React App:
You need to start with the create-react-app, it is an officially supported way to create single page React applications with no configuration.
That means, you can create a React application and mess around the code by executing a few lines in a matter of minutes.
Functional & class components:
Once you have installed create-react-app on your system then get started with some technical concepts in React.
React application is made up of reusable bits of code called components and in React you can create a function component or a class component.
Then you should learn the concept of
props. Props which stands for properties are just arbitrary inputs for a component which play a major part in making the component reusable.
props are read-only that means, the component can never modify its own
props. This is the point in time where you start learning about
State allows React components to change their output over time which in turn we renders the user interface (UI).
Once you have a good grasp on
state, you need to understand how to modify state along with, it is also important to understand what causes a component to re-render.
Also, how to hook into those methods so you will learn about two basic hooks namely
useEffect hooks for a function component.
setState and component life cycle methods:
After this you should learn about
setState and the component life cycle methods for a class.
After learning to use state you will be comfortable to change values within the component. You can leverage that value and conditionally render the UI. So your next step is to understand the different ways to conditionally render elements in the JSX.
Lists and keys:
After that you should focus to learn how to render a list of items and the
prop which is required for lists.
Building simple forms:
Finally you should jump to learn how to build simple forms like login and registration forms.