Build few websites using HTML/CSS

Yes! That’s right. You will suffer from React if you do not learn HTML and CSS. I have seen a few of my friends who jumped on learning React directly without giving enough time to HTML and CSS, and they struggled a lot later. React is a front-end framework and how would you use it if you don’t know anything about HTML and CSS? I won’t say you have to spend months learning these but give them at least a week. Create at least 1 portfolio website and make a copy of any website you like. You can even make a copy of the medium’s home page with HTML and CSS. You don’t need to attach any click events yet.

Create a few projects using JavaScript

Before you move to learn React give some time in learning JavaScript. After all, React is a JavaScript library and it makes no sense to jump to learn the library without knowing the base. At least understand these from JavaScript.

• Functions and different types of functions.
• Objects and Arrays. How to modify them. Especially objects inside arrays.
• Loops
• Spread operator
• Destructuring
• Array methods ( Array.map, Array.foreach, Array.sort, Array.filter)
• JavaScript template literals
• JavaScript type modules and import
• Ternary operator

Once you are comfortable with these I would recommend you to create a few projects. Even a simple to-do application will work. 

Now it’s the time for React.

These are the topics you need to know and practice. None of these topics require more than 1 hour of understanding and practice.

• Know what is React and what problem it is trying to solve. Again, you don’t need to dig too deep but have a basic understanding.
• Create your first react project using create-react-app. Sure you need to have a node installed before that. 
• JSX — All you need to know about JSX, for now, is that it is a file where you can write both JavaScript and HTML.
• How to use CSS in React. You can import .css file just like any module in your .js or .jsx file. Additionally, you can also use inline CSS. You can use it the same way you do in HTML except for the naming. Instead of using a “class” attribute, you need to give a className attribute. If you are using inline CSS, you need to remove a hyphon(-) and use the capital letter.
• {margin-top:’22px’} with change to {marginTop:’22px’}
• Understand passing props. Technically, props are the same as arguments in any JavaScript function.
• Understand states in React. Technically, states are variables.
• useState and useEffect. I am mainly focusing on a function component. A useState is a hook to define the variable state. useState gives you an option to set the variable and then a setter function to update that variable. useEffect on the other hand is what gives you the advantage to use different life-cycle in React.
• Life cycle in React. Not everything is created or mounted when you load your React application. Life-cycle is all about when your components are created, mounted, re-rendered, and destroyed.
• Conditional rendering. This gives you a possibility to render components/elements as per the condition you give.
• Create as many components as you want. Pass props to children.
• API calls. Make API calls, you can use Json place holder for fake datas.
• Input and Forms. Know the react way of handling forms and input.
• React Router. The router gives you options to dynamically navigate to different pages without refreshing any pages.

There are other important terms such as state management. But you don’t need to know those to start creating projects in React. You should learn those only when you need them in your project. It makes no sense to learn something like Redux for state management when you don’t even encounter the problem of states and props in the first place. I have lots of those topics covered on my YouTube channel, you can find detailed topics such as React Router, Redux, Form and multi-step forms, production level API calls, and many more.

That’s all! In my calculation, you don’t need more than 20 hours in all those. If you are serious about learning, this should be completed in less than 3 days. After that start making something using this knowledge.