React js

What is react js?

React js

React js is a free, open source, frontend JavaScript library that is used to build user is owned by Meta organization. React React-js can be used to develop single page applications, mobile applications .

When I first learned about JavaScript, I only knew that we can use JavaScript only for doing some transactions and rendering things based on the id and class names of html elements. But with the help of react, we can develop the entire frontend part only by using react-js. React-js offers a simpler programming model and better performance.

React features

Features of React js

When we develop the frontend using react js there is only has a one single html page, according to the URI that we visit it renders the related components to that single html page.


JSX is JavaScript syntax extension. When we are developing web pages using react js it is not mandatory to use JSX as the extensions. But it is the recommended way. We can also use .js extension as usual.

React component based architecture

A Component is one of the core building blocks of React.

In react-js all are component based. That means everything that we are going to develop is a component in react.

As an example, if we get a navigation bar, footer, side bar, they are three separate components. Because of the react component-based architecture, performance and reusability are very high.
When we discuss components in react, there are two types of components,

Functional components are only simple JavaScript functions. We can create a functional component in React by writing a JavaScript function. Functional components are independent and they are not aware about other components in the application.

sample functional component

Class components are more complex that functional components .Class components are not independent and they ca pass data between components. But because of the high complexity of class components most of developers nowadays use functional components over class components.

sample class component

I also stared developing react components using class components but then I moved to functional components because it is very understandable than class components.

In React we can also render user-defined components. In order to render a component in React we need to initialize an element with a user-defined component and pass this element as the first parameter to ReactDOM.render() or we can directly pass the component as the first argument to the ReactDOM.render() method.

sample render component

Let’s build a simple React App

Creating a simple react app is very simple. We need only provide one single command, then we can have a simple react application within no time. It comes with full packaging of inbuild server, Webpack, Babel, ESLint, Testing configuration and lot more.

The command is,

npx create-react-app <application name>

npm is a tool that use to install packages. npx is a tool that use to execute packages.

npx = node package executer

After the npx create-react-app <application name> your react application will created with the name that you given.

Now we need to go to that project folder using command,

cd <application name>

After that type npm start and hit enter.

Your my-app application will get open in the browser. It should be hosted at http://localhost:3000/ URL.

I hope you found this useful. I would like to hear from you so feel free to drop a comment or connect with me via LinkedIn.




Love podcasts or audiobooks? Learn on the go with our new app.

Evolution of forms — voice enabled way!

DOM — The Driving Force Behind A WebPage

Implementing Nodemailer < 5 min

The War On Christmas Is Real…. (cats inside)

Fetch Pokemon

What is Redux?

First problem building a React web-app

Happiness with Coffee☕️

Coffee logo in github page

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store