How To Learn ReactJS in 2021

 

Hey! guys welcome back.

With the drastic changes in web development, building user interfaces with just Html, Css & Javascript only is a pain in the bot.

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, wanted a framework or library which would break down every components of a site i.e (Navigation Bar, Header, Section, Footer, Buttons, Images.....etc) into reusable codes which would enable developers write less code and powerful functionalities in their applications.

An this is when REACTJS was born.

What is Reactjs

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

Learn Once, Write Anywhere

We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.

This guide is for people who are starting with React. I have carefully curated the best videos and articles in each section to make it easier for learning.

Prerequisites

If you want to work with ReactJS, you need to have solid knowledge of:

• HTML
• CSS
• JAVASCRIPT
• ES6 (ECMASCRIPT 2015)
• To get started you should at least know the following features:
  1. Let
  2. Const
  3. Arrow functions
  4. Imports and Exports
  5. Classes
• Basic understanding of Nodejs and Npm (Node Package Manager).

Getting Started

1. HTML, CSS, JavaScript

Every Web Developer must have a basic understanding of HTML, CSS, and JavaScript.

• HTML: HTML stands for Hyper Text Markup Language. HTML is the standard markup language for Web pages. In a lay man standard, consider html has the skeleton of a human being.
• CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed. 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: JavaScript is the Programming Language for the Web. JavaScript can update and change both HTML and CSS. Just take javascript to be the "brain" of the human body which controls every activity done by a human.

2. ES6 Feautures Of Javascript

ES6 is the version of javascript also known for short as ECMAScript 2015. And this version of javascript comes with a lot of feautures of javascript. To learn & master React, you must have a firm understanding of this feautures like: Arrow function, let, const, classes & this "keyword" in javascript. 

Arrow Function: Arrow functions allows a short syntax for writing function expressions. You don't need the function keyword, the return keyword, and the curly brackets.

example: 

 // ES5

var x = function(x, y) {

   return x * y;

}

function functionName(x, y){

  return x + y;

}

// ES6

const x = (x, y) => x * y;

Let and Const: You will be using ‘let’ and ‘const’ instead of ‘var’ keyword. Both are different than var, in simple words…
 

• Let The let keyword allows you to declare a variable with block scope.
• Const The const keyword allows you to declare a constant (a JavaScript variable with a constant value). Constants are similar to let variables, except that the value cannot be changed.

Class and ‘this’ Keyword: JavaScript Classes are templates for JavaScript Objects. The JavaScript this keyword refers to the object it belongs to. It has different values depending on where it is used: In a method, this refers to the owner object. Alone, this refers to the global object. In a function, this refers to the global object. In a function, in strict mode, this is undefined. In an event, this refers to the element that received the event. Methods like call(), and apply() can refer this to any object.

3. Nodejs Fundamentals & NPM

Understanding of NodeJS fundamentals will lead you in becomming a better Reactjs Developer. So what is Nodejs: Node.js is an open source server environment which allows you to run JavaScript on the server. Note: Nodejs is not a programming language, whereas it a server-side-language which makes it possible to run javascript codes on the server.

Now that you have a quite familiarity of what NodeJs is,now let’s discuss 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.npm is the world's largest Software Library (Registry). npm is also a software Package Manager and Installer

• 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. but what is module, A module is just a file. One script is one module. ... Modules can load each other and use special directives export and import to interchange functionality, call functions of one module from another one: export keyword labels variables and functions that should be accessible from outside the current 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.

3. Learning React

Fundamentals: All the things we have discussed above 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. 

For you to grab the full sense of reactjs, think of everything as a components.

According to React official documentation, following is the definition −

React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.

Below are some important topics to learn in ReactJS…

• Component: Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.
• State: The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders.
• Props: Props are arguments passed into React components. React Props are like function arguments in JavaScript and attributes in HTML.
• Functional Components, Class Components.
• Styling(CSS) in React.
• learn how to connect to APIs with React apps.

Once you will have a basic understanding of React, you can start building some basic projects such as…

• Simple todo-app.
• Landing Page Website
• Simple calculator app
• Build a shopping cart
• Github Finder App using github api.

React Router: React routing will help you to understand how routing works in an application of React.React Router helps you create routes to your single page applications. It’s very powerful and easy to use with your React application.

To get started:

React Router tutorial by Paul Sherman

React Router and intro to SPA by Learn Code Academy

Routing React apps by Scotch.io

These articles are more than enough for you to get started with React routing.

Projects

1. A simple CURD application
2. Hacker News clone

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 it 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.

After completing this requirement mention above, you should now become a frontend boss using reactjs.

Materials Needed In Learning Reactjs

Documentation / Blogs: 

1. Reactjs Docs
   
2. Reactjs For beginners.
   
3. Reactjs Tutorial For Beginners
   

Youtube Videos Tutorials:

This resources and indepth guide is enough to get your hands dirty with reactjs. also dont forget that learning and relearning wont give you a firm hold on reactjs it only by building real world applications out there.

Thanks for reading through💗💗

If you like the article, don’t forget to share it :)