[23]

Introduction to React

React is a JavaScript library created by Facebook. React is a tool for building UI components. React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications. It is used for handling view layers for web and mobile apps. ReactJS is a simple, feature rich, component based JavaScript UI library. It can be used to develop small applications as well as big, complex applications. React versions The initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on October, 2020.

How does React Work?

React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM. React only changes what needs to be changed! React finds out what changes have been made, and React changes only what needs to be changed.

Babel Compiler

Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all browsers. Babel is used to compile the JSXcode into JavaScript code.

To install Babel and it’s React companion, run the below command:

npm install babel-cli@6 babel-preset-react-app@3 -g

Architecture of the React Application

React library is just UI library and it does not enforce any particular pattern to write a complex application. Developers are free to choose the design pattern of their choice. React community advocates certain design pattern.

React app starts with a single root component. Root component is build using one or more component. Each component can be nested with other component to any level. Composition is one of the core concepts of React library. So, each component is build by composing smaller components instead of inheriting one component from another component. Most of the components are user interface components. React app can include third party component for specific purpose such as routing, animation, state management, etc.

JSX

Stands for JavaScript XML. It is a syntax extension to the JavaScript. It used to write XML-like code for elements and components.

There are a few differences between HTML & JSX:

1. Writing className instead of class because the class is a reserved keyword in JavaScript. Since we use JSX in React, the extension of JavaScript, we have to use 'className' instead of the class attribute.

2. Same as class, there’s also one more reserved keyword of JavaScript that is used in HTML. That is the for attribute used with the < label > element. So, to define attribute in JSX, you do it as for htmlFor.

3. One of the major differences between HTML and JSX is that in JSX, you must return a single parent element, or it won't compile. You can use ‘React fragments’ (<>...</>) instead of divs (< div >...</ div >).

Building your first react app

Setting Up React Project:

1. Install globally create react app hit this command in command line after installing node: npm install -g create-react-app

2. Go to the directory where you want to create the project and hit: create-react-app

3. To run a webserver and serve the new application: yarn start

4. To minify and bundle the JS code for optimization: yarn run build

5. Start the test runner. Unit tests can be written using JEST yarn test

6. Pull out configurations and build dependency files to project directory irreversible step, only if we want to manage configuration on our own: yarn run eject

Components in React

React JS is a component-based front-end library which means that all parts of a web application are divided into small components. Components describe a part of the user interface. A component is a small piece of the User interface. Every React.js application is a tree of components. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. They can also be nested inside other components. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. Root (App) Component: This component contains all the other existing components in our React App. In React, there are two types of components:

Functional Component

These are literal JavaScript functions that return html. They are simple functions receiving props and returning a declaration and are usually used. These are mainly responsible for the UI so they are mostly called stateless/dumb/presentational. A stateless component is a class that extends React.Component and does not use internal state. It is any function you write which accepts props and returns JSX.

Class Component

These are regular ES6 classes that extend Component class from the React library. It is required that they contain a render method which in turn returns html. It uses the 'this' keyword. They are more feature rich and they provide lifecycle hooks also called as stateful/smart/container components. A stateful component is a class component that does maintain its own internal state. You may see stateful components referred to simply as components or React components.

Rendering a Component

We only encountered React elements that represent DOM tags

const element = <div /> ;

Elements can also represent user-defined components:

const element = <Welcome name="Sara" /> ;

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

Example, this code renders “Hello, Sara” on the page:

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

const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

What happens in this example:

1. We call ReactDOM.render() with the element. React calls the Welcome component with {name: 'Sara'} as the props. Our Welcome component returns a Hello, Sara element as the result.

2. React DOM efficiently updates the DOM to match - Hello, Sara.