React JS

What is react

React is a open source library for building user interfaces.

React is not a JavaScript framework it’s a JavaScript library.

React is responsible only for building rich user interface not focus on other aspects of your application like routing and http request.

React is a Components based architecture. we can break down our application into small encapsulated parts and we can overcome the problems of more complex UI through dividing UI into small components.

Why learn React

· Created and maintained by Facebook.

· More than 100k starts on GitHub.

· Huge community behind react.

· React is increasingly popular among developers and it is a one of the most sort out skill set by companies right now.

Prerequisites to get start with React

· HTML, CSS and JavaScript fundamentals.

· ES6.

· JavaScript — ‘this’ keyword, filter, map and reduce.

· Es6 — let & const ,arrow function ,template literals , default parameters , object literals ,rest and spread operators and destructuring assignment.

Lets create our first react application

Setting up the development environment. For react we need two things to installed node and texteditor of your choice( vsCode or webStorm). For node go to ‘nodejs.org’ and install the latest version release.

We are using vsCode . first create a folder for the workplace of the project inside vsCode . to create a new react application we will be making use of ‘npx create-react-app’.

Open the terminal of the vsCode and run the command’ npx create-react-app hello-world’ . hello-world is our react application name.

To run this application first navigate inside the project folder .by running the command ‘ cd hello-world’ and next run the command ‘npm start’.

The command will open the browser on localhost 3000 with your hello world application up and running.

You can see the instruction to get started ‘Edit src /App.js ’.To edit the page go to hello-world/src/App.js file and edit.

Components in React

Components describe a part of the user interface

They are re-usable and can be nested inside other components

Two types

· Stateless functional components

· Stateful class components

Functional Components

Functional components are just JavaScript function .they can optionally receive an object of properties which is refer as props And return HTML(JSX) which describes the UI

Lets go to the vsCode and create our first functional component which outputs the message Hello john

First create a new folder called components inside the src folder . and within the folder create a file called Greet.js

Inside the file first step import the react next create a function inside the file which return the message Hello john. In this example we have used arrow function which is the features of ES6.

To connect the Greet component with our application we want to export the Greet component in Greet.js and import it in App.js Component. Next we want to include the Greet component inside the App component we simply specify component as the custom HTML tag

App.js

Greet.js

Browser

Class Component

Class components are basically ES6 class. Similar to a functional component a class component also can optionally receive props as input and return HTML. Apart from the props a class component can also maintain a private internal state. In simpler words it can maintain some information which is private to that component an use that information to describe the user Interface

Example

Create a class component called welcome.js inside the component folder. When ever you create a class component we want to include two imports React and Component class. Next lets define a class called Welcome.

For this class to become a react component there are two simple steps. The first step is it should extends the Component class from react and the second step is the class have to implement a render method which will return null or some html.

To connect the Welcome component with our application we want to export the Welcome component in Welcome.js and import it in App.js Component. Next we want to include the Welcome component inside the App component .

App.js

Welcome.js

Browser

Functional vs Class components