Jump into React

ReactJs is a JavaScript library. Develop by Facebook in March 2013 currently, it is the most popular JavaScript library. It uses for building fast user interfaces. React can be used to develop single-page applications & with React Native which is a Framework of JavaScript we can build hybrid mobile apps. React make it easy to develop single page application because it is a component-based library. Also, it is an easy library to learn because it works like JavaScript.

Library vs Framework:

The key difference between a library and a framework is “Inversion of Control”. When you call a method from a library, you are in control. But with a framework, the control is inverted: the framework calls you.

A library is just a collection of class definitions. The reason behind is simply code reuse, i.e. get the code that has already been written by other developers. The classes and methods normally define specific operations in a domain-specific area.

In a framework, all the control flow is already there, and there’s a bunch of predefined white spots that you should fill out with your code. A framework is normally more complex. It defines a skeleton where the application defines its own features to fill out the skeleton

Class Components/Functional Components:

React is Components based where we can create different components to create full react app.

There are two types of components:

Class Components

• Class components make use of ES6 class and extend the Component class in React.
• React lifecycle methods can be used inside class components

==> Class Component Code

import React, { Component } from “react”;

class Header extends Component{

render() {

return (

<div className=”header”>

<h1>Class Component</h1>

</div>

)

}

}

export default Header;

Functional Components

• These are mainly responsible for UI and are typically presentational only (For example, a Button component).
• Functional components can accept and use props.

import React from ‘react’;

function Header(){

return(

<div className=”header”>

<h1>Hello Functional Component</h1>

</div>

)

}

export default Header;

Let's Create Our First React App:

First of all, we create a folder on the desktop then create a react app inside the folder.

npx create-react-app firstapp

When Your app is created in a folder then go to that folder and start your first app by using the command “npm start”.

Now Your App is open in a browser.

Our React app running on Localhost:3000

Now open ReactApp with VS code editor…..

Its Looks like that

Open firstapp folderin VS Code

In an src folder, we can create different Components(class/functional) and import them into App.js to make a complete website.

Follow me for more blogs!