react

How to Create React App – Getting Started with React 2019

React is a client-side most powerful javascript library used to build user interfaces for single-page applications. It Developed by Facebook in 2011....

Written by admin · 2 min read >
Create React App

React is a client-side most powerful javascript library used to build user interfaces for single-page applications. It Developed by Facebook in 2011. In this article, We will create React App by getting started with React 2019 features and Architectural overview. We will also discuss the concepts of Virtual DOM, Reusable components concepts, State, JSX.

What is React.js?

React, A JavaScript library for building user interfaces

React Official

React is dominating the space of building user interfaces. By quickly growing developer adoption rate It becomes the most popular JavaScript library since its release in 2011. It was ranked as the most loved language or technology in the StackOverflow developer survey of 2019.

StackOverflow developer survey of  2019.
StackOverflow developer survey of 2019

React is a Library or a Framework

Technically, It is a library, because it does not include a router, HTTP Client like Angular, however, We can install things very easily like React- router, Axios for HTTP, Redux, etc So It acted as a framework. That is why It is much more comparable with frontend frameworks like Angular rather than a javascript library like jquery.

React Architecture

We can segregate a React app architecture into following features

  • Reusable Components
  • JSX
  • State
  • Virtual DOM

Reusable Components based UI

Every React app has at least one component, which we refer to as the root component. This component represents the entire application and contains other child components. So, every React application is essentially a tree of components. we build a bunch of independent, isolated and reusable components and then combine them to build complex user interfaces.

Reusable Components based UI
  • Consider each element of the app as individual reusable components.
  • Components combines HTML template and JS ( jsx template )
  • A component contains Logic, CSS and some actionable output.
  • The component can have ‘state’ and ‘props’

State – Representation of the UI state

Components are made of two main ingredients, state, and props. The state is the representation of the app at a given point in time. You can also think of the state as a snapshot of the app at a given point in time.
The state is very important, so we should have a careful representation of the UI state.

JSX

In React, instead of using regular JavaScript for templating, JSX is a preprocessor step that adds XML syntax to JavaScript. JSX is not a requirement for using React. You can definitely use React without JSX but JSX makes React a lot more elegant.

//With JSX
class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }}
//Without JSX
class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }}

Fast render with Virtual DOM

In React, for every DOM object, there is a corresponding “virtual DOM object”. A virtual DOM object is a representation of a DOM object, like a lightweight copy. The output of the render method is a React element which is a simple, plain JavaScript object that maps and represents the DOM element in memory.

Updating the DOM is slow. but updating the virtual DOM is much faster. Updating DOM is usually the bottleneck when it comes to web performance. React is trying to solve this problem by using something called virtual DOM.

Any view changes are first reflected virtual DOM, then an efficient diff algorithm compares the previous and current states of the virtual DOM and calculates the best way where, a minimum amount of updates needed, to apply these changes. Finally, ONLY those updates are applied to the DOM to ensure minimum update time. This is the main reason behind React’s high performance.

Let’s Create React App

Before Installing the React, I am assuming you have node.js installed on your machine. It is also possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application.

Using NPX

NPX, which will allow us to just run react without installing it. npx comes with npm 5.2+ and higher. Open up your terminal and run commands then run npm start to start the application.

npx create-react-app my-app
cd my-app
npm start
Create first react app using npx

Using NPM

NPM, which will allow us to install react globally, Open up your terminal and run commands then run npm start to start the application

Npm install -g create-react-app //add sudo for MacOS
create-react-app my-app
cd my-app
npm start
Compiled Successfully

Congratulations! You’re now up and running with React. You can clean up any unnecessary files and begin adding functionality for your application.

Leave a Reply

Your email address will not be published. Required fields are marked *