Learning this library is a daunting task. You watch a lot of tutorials and you try to get the best material to learn this library but it can become overwhelming if you dont know the right path or step-by-step process to learn it. We are going to discuss a roadmap to get started with React and the fundamental prerequisites (checklist) to jump into React. Lets get started…
- Let and Const
- Arrow Functions
- Class and this keyword
- Fundamentals of NodeJS & Code Editors
If you are an experienced developer then skip this section, for beginners here is a quick introduction..
- Every front-end developer starts their journey with these three things. These are the basic foundation of foundations of frontend web development and they all work together to create a fully functional web app/website.
- Consider a Human body as a website or web app.
- HTML can be considered as the structure or “Skeleton”, of the body which tells what has to come where.
- CSS defines the style which is the “Skin, Flesh”, tells how a particular segment should look like what should be its Color, Height, Width, etc.,
Arrow Function: Arrow function allows you to write the shorter syntax for function. It makes your code clean and more watchable. Check the code snippet below…
Let and Const: You will be using "let" and "const" instead of "var" keyword. Both are different than var, in simple words…
- Let defines a local variable limiting their scope to the block in which they are declared.
- Const defines a constant variable whose values cannot be changed.
Class and "this" Keyword: You will have to learn the Object-Oriented Programming concepts like Class, Method, Objects in ES6. You might have learned about these concepts in other languages such as C++ or Java. Read about this from ES6 | Classes and follow this video tutorial to understand this.
If we talk about the "this" keyword so it represents the current object in execution. Make sure that you clear the concept of the "this" keyword which is quite confusing for a lot of developers. Along with that learn what is Call, Apply and Bind methods (used to bind/connect the "this" keyword to an object).
3. NodeJS Fundamentals & Code Editors
Now you might have quite familiar with NodeJs so lets discuss are all the features of Node you must know to learn React.
- NPM (Node Package Manager): NPM is a package manager to install node modules and packages to your project just like PIP for python.
- IMPORT and EXPORT keywords.
- Import: Once you will install the Node module using NPM in your project you will have to use the "import" keyword to use that module.
- Export: Use this keyword when you are creating a module/component and you have to return only a part, not all the methods and variables.
Read the Video ReactJS | Importing and Exporting to get more help on this topic. You can use any code editor to work on React. A lot of web developers mostly prefer Visual Studio Code — VS CODE — (Highly recommended), Sublime Text, or Atom.
Fundamentals: All the above things we have discussed were the prerequisite of ReactJS. Now once you learn all the above things its time to jump into React. Understand the basic concept of React first. We are going to give you an overview here.
- Component Architecture (alwatchy discussed).
- State: Basically "state" holds synchronous variables. If you change the value of a state variable then the change is reflected immediately in all the places that particular variable is used.
- Props: are just like arguments passed in a function or method. In React props (arguments) are passed into an HTML tag as input arguments.
- Functional Components, Class Components.
- Styling(CSS) in React.
- learn how to connect to APIs with React apps.
Read the tutorial ReactJS , React Official Tutorial, and watch the video ReactJS Tutorial. Once you will have a basic understanding of React, you can start building some basic projects such as…
- Simple todo-app
- Simple calculator app
- Build a shopping cart
- Display GitHubs user stats using GitHub API
React Router: React routing will help you to understand how routing works in an application of React. How to load the content of a specific page or how to redirect to a specific page using React Router. For example, to redirect from the "home" page to the "blog" page you will have to set routing so that it can only display the content of the "blog" page. Understand this from the video React Router for Beginners and React Router. Once you have an understanding of React Router you can make some projects like A simple CURD application or Hacker News clone
This is all about the roadmap to learn React from the beginning. We hope this was helpful !!!
A very good video content Click for download attachement