React JS 101 - Introduction to React

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is the view layer for web applications. Currently, it is the most popular developer’s choice for creating JavaScript libraries. It’s sometimes also referred to as a framework.

React encourages creating reusable components. It offers a simple model and provides better performance. React was created by Facebook but is widely used by a variety of companies. At the end of September 2017, Facebook announced the release of React v16.0, which included new features, like error boundaries, portals, improved server-side rendering, and reduced file size, and a complete rewrite of the internals. The rewrite will ultimately enable support for asynchronous rendering, which makes it possible to process large component trees without blocking the main execution thread.

Although React is often connected to front-end JavaScript development it can also be used to render views server-side in Node.js or power mobile apps using React Native.

Why React?

Let’s find out the benefits of React and why should you use it for your web application projects:

Easy to learn:

One of the main concerns developers have is choosing a framework (or library) that is easier to learn and implement. React is easy to grasp for developers who are familiar with Javascript. Even if developers don’t know Javascript, React can be the right place to start. Unlike Angular, React holds a smooth learning curve.

Improved performance

React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do.

Easy creation of dynamic applications

React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.

Reusable components

In React, your application comprises components. Ideally, you start with building small components like buttons, checkboxes, dropdowns, menus, etc. and create wrapper components around these smaller components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time

Unidirectional data flow

React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.

Well established with a vibrant ecosystem of Developer tools

React consists of a rich and vibrant ecosystem. Developers can find dozens of ready-made and customizable charts, graphics, documentation tools, and other components that allow them to build a web app in less time without reinventing the wheel.

Features

Let’s take a look at some of the key React features that make it stand out from the others:

JSX

JSX (JavaScript Syntax Extension) is used with React to describe what the user interface should look like.

Inside any basic website, there are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of how the web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript.

JSX is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code.

React Native

React Native is a custom renderer for React, just like React DOM on The Web. React Native uses native components instead of web components like React as building blocks. To begin with React Native, you need to know the basic React concepts, like JSX, components, state, and props. If you know React, you still need to learn stuff specific to React Native, like the native components. React Native also gives access to the features these platforms offer, apart from transforming React code to work on iOS and Android.

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, it creates a virtual copy of the original DOM. It’s a one-way data-binding hence manipulating the virtual DOM is quick rather than updating original DOM because nothing gets drawn on screen.

Performance

React uses VDOM, which makes the web applications run much faster than those developed with alternate front-end frameworks. React breaks a complex user interface into individual components, allowing multiple users to work on each component simultaneously, thereby speeding up the development time.

Components:

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. React splits the UI into independent, reusable parts that can be processed separately.

There are two types of components in React:

Functional Components: These components have no state of their own and only contain a render method, so they are also called stateless components. They may derive data from other components as props (properties).
Class Components: These components can hold and manage their state and have a separate render method for returning JSX on the screen. They are also called stateful components, as they can have a state.

State:

In class-based component, a state is used to store object value. A component can initialize and update the value of its variable. A state is simply a JavaScript object which holds information, which gets rendered as output.

By correctly utilizing state, it is easy to create well-flowing, dynamic, secure, and user-friendly applications.

To help with state and data, developers can seamlessly integrate Redux, which is a predictable data-flow architecture. Redux maintains the state of an entire application in a single immutable state tree, which can’t be changed directly.

Props:

In React props are short for properties of a component. A component gets its properties as props from a calling component or a parent component. A class component may have state variables that belong to itself and its value can be updated. If this component is getting rendered by other components then this component is called child component and the calling component is called a parent. So a child component gets its data from a parent, those data are called props or properties. Along with props, a class component can have its state variable so don’t think that only it can have props. So in simple props are given by a parent to its child, where a child can not change props value directly.

React JS 101 – Introduction to React