React is a popular javaScript library. Which made easier for developer to build user interfaces for web, mobile and desktop. Today, thousands of company are building applications using it, including big companies like Netflix, facebook and AirBnb. It has become immensely popular that number of apps has been ported to react – WhatsApp, Instagram and Dropbox.

What is React ?

ReactJS is open-source, component based library which is maintained by facebook. It is responsible for view layer of the applications.

React is the view in MVC Model View Architecture. It only uses for view hence we will need additional libraries to handle data flow, authentication, routing etc.

Virtual DOM
It uses Virtual DOM. Virtual DOM is faster than the real DOM. It has same properties as real DOM and Manipulating the DOM is slow. In real DOM when we make changes it reload the whole page but in Virtual DOM it only mounts that component. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.
If we remember facebook in its early stage we need to refresh the whole page every time for new news feed , after some years for latest news feed button will pop up. So we don’t need to refresh the whole page only that news feed component. That’s how virtual DOM works.

JSX :

It stands for JavaScript XML. We will write JSX code in react. Now you may be thinking why JSX and also now we need to learn new language ?

Actually it adds support for writing HTML tags in JavaScript. On top of ReactJS, it creates a very powerful way to express a web application. So basically we are writing javaScript and XML together.

It looks like this:

In react class and for are reserved keyword. Instead of them we can use ClassName an htmlFor.

Getting Started

We can start coding in two ways.

First we can use script tag of react, react dom and bable. Bable is transpiler which convert JSX syntax into javaScript which is understandable to the browser.  We are gonna use second method which i feel easy.

now we will write in

Second just install node js and run these commands in your bash or cmd. To create a default app.

we will use npm which is node package manager to install our react modules.

After these commands. Default app will be open in your browser.

Our React app folder Structure will look this:-

where we have several folders and files.

package.json

codeParadox React Dependencies

In this file all libraries or packages is listed.

Index.js

This is the file where main DOM Manipulation is happening and as you can see, we have only one root element which we are accessing by id from index.html which is present in public folder.

Render method will render on the screen whatever you put in it.

In render function we can only pass one element. So in most cases we only pass div. But we can add elements in that div.

Component:

Component let us divide the UI in to independent pieces, reusable pieces and think about each piece is isolated. Conceptually they are like JavaScript functions.

For an example in our app.js :-

by Default we have simple component in which we call the render function and there are some importing of logo below it we will write the HELLO WORLD which is mandatory or tradition to begin to learn new language or frame work.

output:

react hello world codeparadox

Props:

we can use props to pass data from one component to other component. They are immutable and we can pass them as the attribute of the component and from the component. Props are available in our component as this.props

Now we will make new folder in src folder and named it component where we will make our another component and named it MsgHandler.js and import it in our app.js we will make a tag of its name and replace where we write HELLO WORLD and pass an attribute.

we make a greet attribute and passed Hey There now we will access it in our MsgHandler with the help of this.props and put dynamic in our render function.

That’s how we can pass data from one component to another with help of props.

codeParadox React hey there

State:

Every component has state and props object. we can set by setState. By calling setState UI render will be triggered and UI will be updated.
Now we will make constructor in our app.js and make our state.

it will show same output as above because we have not change anything in this code. just make our state object and passing the state as attributes.

Lifecycle Methods:

Here are some lifecycle methods in React you should know:

  • componentWillMount – Invoked once, on both client & server before rendering occurs.
  • componentDidMount – Invoked once, only on the client, after rendering occurs.
  • shouldComponentUpdate – Return value determines whether component should update.
  • componentWillUnmount – Invoked prior to unmounting component.

Event Handling:

React also handles the event. we can add event as onEeventName. The events are attached as the properties of the components and make methods to handle that event.

Let’s make a button in our MsgHandler and add a click as onClick

we add our button and add onCIickHandle where we are binding the event to the function. In function we are calling the setState to set the state so new msg is showing.

React event codeparadox.

Conclusion:

Now we understand the what is react and some basic concept of it. In our next post we will make Todo application in React js.
thanks for reading this. if you find useful please share it those who need this too.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: