Say hello to ReactJS - Introduction

In this “Say hello to ReactJS – Introduction” article, I am going to discuss what is reactJS and what are the features what if we use this. After that let’s create a simple application using ReactJS. So say hello to ReactJS first.

01. What is React ? – #Step01 after Say hello to ReactJS

React is an open source JavaScript library designed by Facebook for creating web apps. And this is not a Framework. ReactJS is actually a front-end library.

The main perspective of ReactJs is providing the best rendering performance and this is for building user interfaces and managing the rest of the project is up to our preference. This can be done as its main focus is on individual components.

Instead of working on a one large web app, this allows the developer to breakdown the complexity as of the web app into much simpler components and It serves as the view of MVC (Model, View, Controller) architecture. Node JS is the running environment of ReactJS.

Lets learn what are the components in ReactJS.

Compressible
reusable
testable

lets take one step back and try to look at these all things from the different points of view. we figured what react is. So lets take an example,

In here, in a section we have simple label, a checkbox and a textbox. then we have mainly use these two components to create one specific components. So this is what we call component’s composition.So in here, we are seen two different arguments to create one specific argument which react understand. So this is what we called component’s composition.

02. You now in onboard with ReactJS – #Step02 after Say hello to ReactJS

ReactJS is an abstracts the Document Object Model(DOM) away from us giving out an easy and better performance. React implements a one-way data flow.

Now we know reactJS is a tool for building User Interface(UI) components. It means ReactJS allows us to create reusable UI components. So in order to learn and test reactjs, we must set up our PC to react environment.

ReactJS is a very popular framework today. So, once you are comfortable with it, the experience of developing a web application becomes easy and enjoyable. The pace of change in the framework is fast, but well supported by Facebook and the open source community as most importantly, it allows you to focus on simple pieces of functionality that can easily be composed and reused throughout your application.

Uses of ReactJS

Before the introduction of ReactJs, most of the developers are looking for a framework to do quite a lot of coding that allows them to reuse the codes to complete their work faster. So that, ReactJs provided the answer what they were looking for as it uses JSX. This is very important in promoting construction of machine readable codes.

We can use same component in ReactJS. That is the meaning of the above paragraph. All we have to do is create a one component that related to same code for different code files. So we can reduce developer working time and final result will be grate without any useless codes.

Developers call ReactJs is the future of web application development due to its extra simplicity and flexibility. The top companies that use ReactJs are Facebook, Instagram, PayPal, Uber, Airbnb. This credibility also has drawn many people to use ReactJs framework.

Features in ReactJS

Let’s see what are the features in ReactJS.

JSX is the language used by the reactJS to define its user interfaces.
Prevent cross-site scripting attacks and use HTML like syntax.
Use component.
Data flow is from parent component to child component while the action flow is vice verse.
Uses a virtual DOM which is a JS object that helps to maintain the performance of the application.

ReactJS Render

The way that react uses to return a description of what we should see on the screen is the render method. Because elements are the smallest building block of React apps. That because this renders the components.

Each time the props and states are changed, render is called. The term “render props” for sharing code between react components using a prop whose value is a function. A component with a render prop takes a function that returns a reactjs element and calls it instead of implementing its own render logic.

<DataProvider render={data => (
      <h1>Hello {data.target}</h1>
)}/>

This never uses the setState function although it can define variables and do some operations inside.

ReactJS Props and States

The main difference between props and states is that props are unchangeable over time. Data and behaviors from container components to child components are passed through props and props are read-only material.

State is the place that hosts data. If there are multiple components which need data from state, it should maintain a single container which in turn keeps the state for all of them. State is read-write enabled.

03. Create React Application – #Step03 Say hello to ReactJS – Introduction

Remember : If you have already installed Node.js, you can create your react application without installing. If you are not, please install node.js first using command prompt or power shell. Then you have to install create-react-app tool. in the below have the code.

npm install -g create-react-app

Now you can create your first react application. To do that run the below command to create a react application. I am going to use “myprogram” as react application name.

npx create-react-app myprogram

Run you first react application

To run your application type this command in your command prompt. First of all, please check you are in the correct directory.

npm start

you can see, it will automatically open with your browser. So in the next article let’s learn react more and more. If you want to create a simple we application using ReactJS, make sure to click here to start develop it. You can visit w3school to more details

04. React Component Life Cycle | Say hello to ReactJS – Introduction

There are 3 methods in Life Cycle.

Mounting
Updating
Unmounting

Lets see what are the different between those phases.

In Mounting, there are some type in here.

Props and state – Constructors are OOP’s basics. It is the first function that will be called whenever a new object is generated even before mounting the device. One thing to note is that you should call super(props) before any statement lines to use this.props.
ComponentWillMount() – This function is invoked immediately prior to mounting. It is called right before the first version is performed. It is called before render(), so calling setState() will not activate an extra rendering synchronously in this step. But the use of constructor for the same is suggested.
Render() – We build and return Elements (usually. JSX) Via this.props we access the object, and this.state and these values tells how content should be produced
componentDidMount() – This method is called right after mounting the react object on DOM, or you might say it is called for the first time right after the rendering method has been executed.

In Updating, this also has many types.

componentWillupdate() – This is only executed after the return of true shouldComponentUpdate(). This method is called before component is re-rendered after status or props have been changed.
componentWillRecieveProps() – This function is named when a part receives new props that are useful for setting the state with new props. In this process you can compare the recent props with the current one and you can adjust the state and other changes based on that.
componentDidUpdate() – This method is invoked immediately after update. For the initial rendering this method is not required. Here should be kept statements that require the DOM needed after UI is changed.
shouldComponentUpdate() – This could be used to allow React know if the current change in state or props affects performance of a component Speaking of this function’s default actions, it will re-render on every change in state.

In Unmounting,

componentWillUnmount() – This method is called immediately before DOM Unmounted and Destroyed the component. In this approach we will handle some cleanup activities, such as canceling any access to the network, deleting event handlers

Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well. Make sure to leave a comment.