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 on multiple pages they are forced to do a lot of code. Developers using other frameworks face the challenges to rework 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.
React is the most popular javascript library for building user interfaces. It is fast, flexible and it also has a strong community sitting online to help you every time. The coolest thing about React is it’s based on components, you break down your complex code into individual pieces i.e components and that helps developers in organizing their code in a better way. A lot of companies are moving to React and that’s the reason most of the beginners and experienced developers also expanding their knowledge learning this library.
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…
Checklist/Prerequisites
- Basic knowledge of HTML, CSS, and JavaScript.
- Some ES6 features of Javascript like
- Let and Const
- Arrow Functions
- Class and ‘this’ keyword
- Fundamentals of NodeJS & Code Editors
1. HTML, CSS, JavaScript
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.,
- JavaScript defines the functionality which is the part of the “Brain” which tells each of the parts to do what.
2. ES6 features of Javascript
ES6 is the version of JavaScript and there are a lot of features of ES6. To get started with React you need to know about Arrow Functions, Let and Const, Class, and ‘this’ keyword.
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…
Javascript
// Old method function greet() { console.log('neveropen'); } greet(); var greet1 = function(){ console.log('neveropen'); } greet1(); //ES6 method var greet2 = () => { console.log('neveropen'); } greet2(); |
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
Understanding NodeJS fundamentals is important to work on ReactJS. In simple language, NodeJS is an execution environment for javascript. A lot of people consider that it’s a programming language which is not true. Every browser has JavaScript Engine which is embedded into browsers, for example, Chrome has a V8 engine and Mozilla Firefox has SpiderMonkey. You cannot perform any operation outside the browser like File operations, OS operations, Network Operations and so here Node came into existence. Node allows you to do all these operations outside the browser. It is embedded with chrome’s V8 engine.
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 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 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.
Learning ReactJS
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.
React is a Javascript library developed by Facebook to build interactive User Interfaces. It follows the Component-based architecture which means you will divide your whole UI part into reusable components, all are made separately and finally fitted into a parent component which is then rendered. Below are some important topics to learn in ReactJS…
- Component Architecture (already 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 | neveropen, 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 an understanding of React Router you can make some projects like A simple CURD application or Hacker News clone
Webpack: Webpack is a module bundler in Javascript that helps you to maintain dependencies as static files for your project so developers don’t have to do it. Webpack also comes with loaders. Loaders help run specific tasks around your project. Watch the video Webpack Tutorial and read about this on Webpack official docs.
Server Rendering: Learning this concept will help you to create components in the server and render that as HTML in your browser and when all the JavaScript modules are downloaded in the browser, React takes the stage. It’s one of the coolest features to React and it can be used with any of the back-end technologies. Understand this concept from the link React server rendering by Tyler McGinnis.
Redux: In a complex application, you will have to manage states across components. Redux which is a javascript library solves this problem and helps you to maintain the application states. In Redux you store all your states in a single source. Understand this concept in a better way from the link Introduction to React-Redux and React Redux Tutorial for Beginners.
This is all about the roadmap to learn React from the beginning. We hope this was helpful !!!
