Basic Concept About React.js

5 min readNov 4, 2020

Before we begin we have to know the definition of React. So, what is React? React is a JavaScript library that is used for building a user interface (UI). We have confusion here between framework & library. Some of them are saying React is a JavaScript framework it’s not true actually.

The technical difference between a framework and library lies in a term called inversion of control. When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library. When you use a framework, the framework is in charge of the flow.

When you will work with React you can change the flow of your application but if you’re using a framework you have no control to change the flow of the application. React allows you to change the flow. We just tell it what we want! React will then build the actual UI, on our behalf, in the Web browser.

When React released in 2013 there was a lot of buzz about the performance because React introduces the virtual DOM.

What is the virtual DOM?

DOM stands for ‘Document Object Model’. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Create a New React App

To learn and test React, you should set up a React Environment on your computer. We will use create-react-app to create react app. The create-react-app is an officially supported way to create React applications. If you NPM and Node.js installed in your device you can run this ‘install create-react-app’ command in your terminal.

C:\Users\Your Name>npm install -g create-react-app

Now you are ready to create your first react app. use this command below-

C:\Users\Your Name>npm create-react-app myreactapp

“myreactapp” is the name of your react application. you can choose the name whatever you want. create-react-app will create everything you need to run a React application. Once you done “npm install -g create-react-app” no need to do this everytime. you just use “npx create-react-app myreactapp” to create your react application

Change the directory to myreactapp by using this command-

C:\Users\Your Name>cd myreactapp

Now run the command to execute your React application

C:\Users\Your Name>myreactapp>npm start

Your React application will run directly to your default browser if not run type localhost:3000 in the address bar then you will able to see this-

Hello World

ES6 In React

ES6 stands for ECMAScript 6. ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was published in 2015, and is also known as ECMAScript 2015. You have to be familer on ES6 because in React we have to use new features like-

Classes
Arrow Functions

Classes

ES6 introduced class. A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

Example:

class product{
constructor(name) {
this.brand = name;
  }
}
myProduct = new product("iphone");

Arrow Function

Arrow Function you give you shorter version of function

hello = () => "Hello World!";

React Components

Conceptually, components are like JavaScript functions. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function. Components come in two types, Class components and Functional components

Class Component

A class component is a more featured way to define a React component. It also acts like a function that receives props, but that function also considers a private internal state as additional input that controls the returned JSX.

‘MyclassCom’ is the component name.

class MyClassCom extends React.Component {
  render() {
    return(
      <div>
        <h1>Class Component</h1>
        <p>This is my class component</p>
      </div>
    );
  }
}

Functional Component

A Functional component is a function that takes props and returns JSX. They do not have state or lifecycle methods. Functional components are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability.

‘Admin’ is the component name.

import React from ‘react’;
const Admin = () => {
    return(
      <div>
        <h1>Class Component</h1>
        <p>This is my class component</p>
      </div>
    );
};
export default Admin;

After creation of react component we have to display in root file so after that it will be visible on UI.

Go to src> app.js then import the component that you want to display.

import React from ‘react’;
import Admin from './components/Admin/Admin'; 
// make sure your component path is correctconst App = () => {
    return(
      <div>
        <Admin/>
      </div>
    );
};
export default App;

React Props

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. ( one way from parent to child). Props are passed to components via HTML attributes.

Sending props from parent component to child component.

//This is parent component
import React from ‘react’;const product= () => {const ProductName = "Mobile";
   return(
      <div>
        <ProductDetail Pd = {ProductName}></ProductDetail>
      </div>
    );
};
export default Product;

Receiveing props from parent component to child component.

//This is child component
import React from ‘react’;const productDetail= (props) => {
   return(
      <div>
        <h1>{props.pd}</h1>  // Mobile shown on UI
      </div>
    );
};
export default ProductDetail;