Summary:

• ReactJS is an open-source front-end JavaScript library to build the user interface. It is maintained by Facebook and used by many companies today for UI development.
• The core features of ReactJS includes JSX, components(functional components and class-based components), the life cycle of a component, props, and state support for a component, working with javascript expressions.
• Project setup of ReactJS is explained using CDN files and also using npm packages to build the project.
• JSX is an extension to javascript. It is a template script where you will have the power of using Html and javascript together.
• Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code.
• A state is a javascript object similar to props that have data to be used with the reactjs render. The state data is a private object and is used within components inside a class.

What is ReactJS?

ReactJS is an open-source front-end JavaScript library for building user interfaces. ReactJS is maintained by Facebook and a community of individual developers and companies. It is widely used as a base in building single-page websites and mobile applications. It is very easy to use, and it allows users to create reusable UI components.

In this ReactJS for beginners, you will learn ReactJS step by step:

• What is ReactJS?
• Features of ReactJS
• Advantages of ReactJS
• Disadvantages of ReactJS
• Using ReactJS from CDN
• Using NPM Packages
• What is JSX?
• What are Components in ReactJS?
• What is a State in ReactJS?
• What are Props in ReactJS?
• Life Cycle of a Component
• Working Example
• Working with Forms
• Working with Events in ReactJS
• Working with Inline CSS in ReactJS
• Working with External CSS in ReactJS

Features of ReactJS

JSX : JSX is an extension to javascript. Though it is not mandatory to use JSX in react, it is one of the good features and easy to use.

Components: Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code. We can use components as functions and components as classes. Components also have a state, props which makes life easy. Inside a class, the state of each of the props is maintained.

Virtual DOM: React creates a virtual dom, i.e., in-memory data -structure cache. Only the final changes of DOM has later updated in the browsers DOM.

Javascript Expressions: JS expressions can be used in the jsx files using curly brackets, for example {}.

Advantages of ReactJS

Here, are important pros/benefits of using ReactJS:

• ReactJS uses virtual dom that makes use of in-memory data-structure cache, and only the final changes are updated in browsers dom. This makes the app faster.
• You can create components of your choice by using the react component feature. The components can be reused and also helpful in code maintenance.
• Reactjs is an open-source javascript library, so it is easy to start with.
• ReactJS has become very popular in a short span and maintained by Facebook and Instagram. It is used by many famous companies like Apple, Netflix, etc
• Facebook maintains ReactJS, the library, so it is well maintained and kept updated.
• ReactJS can be used to develop rich UI for both desktop and mobile apps
• Easy to debug and test as most of the coding is done in rather than on Html.

What is JSX?

JSX is an extension to javascript. It is a template script where you will have the power of using HTML and Javascript together

Why we need JSX in React?

For a UI, we need Html, and each element in the dom will have events to be handled, state changes, etc. In case of React, it allows us to make use of Html and javascript in the same file and take care of the state changes in the dom in an efficient manner.

Expressions in JSX

Here is a simple example of how to use expressions in JSX.
In earlier ReactJS examples, we had written something like :
index.js

What are Components in ReactJS?

Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code.