Every front-end developer and web developer knows how frustrating and painful it is to write the same code at multiple places. If they need to add a button at multiple pages they are forced to do a lot of code. Developers using other frameworks face the challenges to rework on most codes even when crafting components that changed frequently. Developers wanted a framework or library which allow them to break down complex components and reuse the codes to complete their projects faster. Here React comes in and solved this problem.
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 don’t 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. Let’s 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 the quick introduction..
- Every frontend 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 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 readable. Check the code snippet below…
- Let defines a local variable limiting their scope to the block in which they are declared.
- Const define 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 ‘this’ keyword so it represents the current object in execution. Make sure that you clear the concept of ‘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 let’s 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 ‘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 article 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 it’s time to jump into React. Understand the basic concept of React first. We are going to give you an overview here.
- Component Architecture (already discussed).
- State: Basically ‘state’ holds synchronous variable. 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 argument.
- Functional Components, Class Components.
- Styling(CSS) in React.
- learn how to connect to APIs with React apps.
Read the tutorial ReactJS | GeeksforGeeks, 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 GitHub’s 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 the 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 !!!