What is React JS

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).

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:

<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 {...}

<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:

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

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

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

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

Class Component

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

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

Class Component

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.

Moazam AliFollow

Frontend Developer who is always passionate in discovering new stuff and building networks.