What is React?

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.

Beyond just UI, React offers a variety of extensions for complete application architecture support, such as Flux and React Native

Why React?

1. simplicity

ReactJS is simply easier to understand right away. React is incredibly easy to understand, construct a quality online (and mobile) application, and support because of its component-based architecture, well-defined lifecycle, and usage of simply plain JavaScript. React makes use of JSX, a unique syntax that allows you to blend HTML and JavaScript. This isn’t a required; developers may still write in plain JavaScript, although JSX is far more convenient.

2. Easy to learn

React is simple to understand for anyone with a basic understanding of programming, but Angular and Ember are described as ‘Domain-specific Languages,’ meaning that they are harder to master. You only need a basic understanding of CSS and HTML to react.

3. Native Approach

Mobile apps can be built with React (React Native). And because React is a firm believer in reusability, it allows for substantial code reuse. As a result, we can develop apps for iOS, Android, and the web at the same time.

4. Data Binding

React uses one-way data binding and an application architecture called Flux controls the flow of data to components through one control point — the dispatcher. It’s easier to debug self-contained components of large ReactJS apps.

5. Performance

There is no built-in dependency container in React. To inject dependencies automatically, you may use Browserify, Require JS, and EcmaScript 6 modules that we can utilize via Babel, and ReactJS-di.

6. Testability

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

The above reasons more than justify the popularity of the React library and why it is being adopted by a large number of organizations and businesses

Features of React

JSX

JSX is a JavaScript syntactic extension. It’s a term used in React to describe how the user interface should seem. You can write HTML structures in the same file as JavaScript code by utilizing JS

we use it to create elements

const element = <l>My element</l> 

React Native

React has native libraries that were announced by Facebook in 2015, which provide the react architecture to native applications like IOS, Android, and UPD.

React-native is a mobile apps building framework using only Javascript. It uses the same design as React, letting you utilize/include a rich mobile UI library/ declarative components. It uses the same fundamental UI building blocks as regular iOS and Android apps. The best part of using react-native is to allow/adopt components written in Objective-C, Java, or Swift.

Virtual Document Object Model (DOM)

React builds an in-memory data structure cache that calculates the changes and then refreshes the browser. This allows the programmer to code as though the entire page is rendered on each update, but the react library simply renders the components that really change.

DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.

Main components

ReactJS is a component-based library where components make our code reusable and split our UI into different pieces. Components are divided into two types: Class components and Function components.

Function component

React components work similarly to JavaScript functions. A component takes random inputs, which we call props, and must always return a React element that defines what is intended to be displayed to the user. The React component must always return a React element, or it will throw an error.

function Employee(props){
return(
<h1>Hello world,{props.name}</h1>;
)
}

Class components

The Class component must have the extends `React. Component` statement. This statement sets up a `React. Component` subclass that allows your component to access `React. Component` functions.

The component must also have a `render()` method, which returns HTML.

export default class PostsHolder extends React.Component {
      constructor(props) {
         super(props);
  } 
       render() {
         return <div>
          <h1>Hello world</h1>
</div>;
  } 
}

How to build your first application in react

1. First, install the framework package

npx create-react-app my-app

now my-app is the name of your application

2. next navigate to your new application. to do that in your IDE terminal type this

cd my-app

3. the last step is to start your application

npm start

In the end, you will have only a frontend application without any database and backend, which takes a lot of work to get a full-fledged application.