What is React JS
Tags: javascript, react, programming, tutorial
Published: 2022-09-15 11:52:44

## React

React is a JavaScript library created by Facebook in 2013 for building User Interfaces (UI).
It is a free and open-source front-end JavaScript library for creating UI components. 

React was created with a single focus to create components for web applications. These React components can be anything in your application like buttons, text, input, sections.

### JSX

JavaScript XML (JSX) has a HTML like syntax having tag names, attributes and children. It comes with full power of ES6 (ECMAScript 2015).

```react
const  link = <span className="nav-link">About</span>
```

Here `className` is a tag in JSX for assigning a class to the element.

### React DOM Render

The `ReactDom.render()` method is used to render (display)  HTML elements:

```react
<div id="section">Here comes HTML</div>

<script type="text/babel"> 
ReactDOM.render( 
<h1>Here comes React</h1>, 
document.getElementById('section')); 
</script>
```

Here the **first parameter** is the code or JSX that we want to render and the **second parameter** is the place where we want our code or JSX to be rendered (display).

### JSX Expressions

In JSX we can use expressions by wrapping them in curly braces `{...}`

```react
<div id="section">Here comes HTML</div>

<script type="text/babel"> 
	const language = "React";
        ReactDOM.render( 
            <h1>Here comes {language}</h1>, 
            document.getElementById('section')); 
</script>
```

### React Elements

React applications are usually built around a single HTML element often called as `root` node, looks like this: 

```react
<div id="root"></div>
```

React elements looks like this and are rendered with `ReactDOM.render()` method:

```react
const  link = <span className="nav-link">About</span>

ReactDOM.render(link, document.getElementById('root'));
```

### React Components

React components are bits of code that are reusable. These components are Javascript functions or classes.

#### Functional Component

```react
function Intro()
{ 
   return <h1>Here comes React!</h1>; 
} 
ReactDOM.render(<Intro />, document.getElementById('root'));
```

#### Class Component

```react
class Intro extends React.Component
{ 
    render () 
    {
	return <h1>Here comes React!</h1>; 
    }
} 
ReactDOM.render(<Intro />, document.getElementById('root'));
```

### React Components Properties

Creating a React component named `Intro` with property arguments

#### Functional Component

```react
function Intro(props)
{ 
return <h1>Here comes {props.name}</h1>; 
} 
ReactDOM.render(<Intro name=”React” />, document.getElementById('root'));
```

#### Class Component

```react
class Intro extends React.Component
{ 
    render () 
    {
	return <h1>Here comes {this.props.name}</h1>; 
    }
} 
ReactDOM.render(<Intro name=”React” />, document.getElementById('root'));
```



## Major Features

1. **Virtual DOM** : Whenever the app is modified or updated, the entire UI is rendered again by the virtual DOM, by updating the only components that are modified instead of updating the whole application. This reduces the time and cost taken for development.

2. **Javascript XML or JSX**: JSX is one of the best features of React JS because it makes it super easy for developers to write building blocks. It has syntax just like HTML for creating React components.

3. **React Native**: This feature transforms react code to render it compatible with iOS and Android platforms and also provide their native features.

4. **One-Way Data Binding**: This means react uses unidirectional data flow, forcing developers to use callback features to edit components, and preventing them to edit components directly.

5. **Declarative UI**: This feature helps react to build declarative UIs that are more readable and easier to fix bugs.

6. **Component Based Architecture**: This is one of the most popular features of React, Where the User Interface (UI) of the app is divided into several components, each of them having its particular logic, written in JavaScript


## Creating a New React App


> **Note**: If you’re learning React or creating a new single-page app, use Create React App.

You’ll need to have **Node >= 14.0.0** and **npm >= 5.6**. To create a project, run:

```
npx create-react-app my-app
```

Here `npx` is a node package runner tool that comes with npm 5.2+. `my-app` is the name of the project, you can name it whatever you want.
To move to the project directory, run:

```
cd my-app
```

And to run your app on localhost, run:

```
npm start
```

**Create React App** sets up your development environment so that you can use the latest development features and provides a nice developer experience, it also optimizes your app for production.

**Create React App** just sets up a front-end build pipeline, so that you can work with any backend you want. It doesn't handle backend logic or databases. Under the hood it uses **babel** and `webpack`.

**Babel** is used because JSX is not implemented directly by all browsers, but instead requires a compiler to transform it into ECMAScript, that's where babel comes in use. **Webpack** is used to build your React application and places it in your dist folder, basically it is used as a bundler.

---

{% user moazamdev %}