Starting your React journey

Things you should know before getting into the React world.

All of us know of ReactJS as a powerful JavaScript library, that aims to get our front-end on the roll.

But what is it that makes it worth the chase?

We already have had much of the front-end technologies to us. Angular5, Vue.js, then why React? Why has it been trending as the most commonly used technologies of 2018 ?

The answer to this question lies within the very structure how React is formulated. Here in this article, we will discuss the few things which makes React one of a kind.

React divides all what we want on our webpage into parts known as “Components”. In regard to React, components are the simple building blocks of a webpage. These components enable our code to be modular and specific in approach, and helps us provide re-usability .These are like the parts of a jigsaw puzzle which when all combined form our page.This component structure can be used to maintain our codebase, and develop our apps much easier. A React component can be formed by extending the React.Component class.

class Hello extends React.Component
{
render()
{
return <h1> Hello All</h1>;
}
}

React acts as the V in MVC, unlike Angular which actually deals with the MVC part (moreover Angular is an entire framework). React acts as our View part only, being the UI framework. React has two types of components namely:

1. Class Components
2. Functional Components

Class components are the components with a state. State basically refers to the data that is related to the given component. While on the other hand, the functional components refer to the components which have any action or any functionality related to it.These are normal JavaScript functions.

For example, in a general web-form, the attributes like name, email ,address will be considered as a class component since there will be always data entries related to it, whenever each time a form is filled by any user. On the same time, the submit button will be a functional component because each time the submit button is clicked, it needs to provide the same saving facility to the user. For this reason, class components are also known as Components with state, while functional components are known as stateless ones.

With every component, is associated a set of properties, known as props in the React lingo. These props are just a way to pass dynamic data through the components. Props help us communicate data from component to component, by rendering it in the render method. Props are passed in a similar fashion as we used to pass arguments to a function/method in any programming language.

These props are immutable in nature, since they are completely dependent upon the data received by the user end ,and thus, cannot be modified inside the component. These props are then passed from the parent to the child component. For example: This code snippet would receive the name property and would result in getting the customize Hello for a specific name.

class Hello extends React.Component
{
render()
{
return <h1> Hello,{this.props.name}!</h1>;
}
}

Apart from these key features, React uses JSX, a syntax extension, which is like a hybrid of HTML and XML, the two most common ones in a developers’ directory. JSX is an add-on extension to the ES6 version of ECMAScript .(ECMAScript is the official standardized name for JavaScript.) This makes it easy to learn and faster to grasp by most of them, leading to an exponential learning graph.

Here occurs a question. General browsers are capable of interpreting JavaScript, which is the language of the web, then how come the browsers interpret the JSX syntax?

The answer to this lies in the process popularly known as transpiling, which stands for transformation + compilation of code. This transpilation is done by Babel, a javascript compiler, which provides JSX support for browsers, by first converting the JSX code to javascript, then compiling it for further processing. Moreover, Babel does more than just this. The latest version of ECMAScript, ES6(most React applications nowadays use ES6 version) is converted to ES5 by it for use by older browser versions. Thus making Babel an important tool for React development(preferrably when using ES6).

Apart from the ones mentioned above, React provides flexibility to the developers by enabling easy DOM( Document Object Manipulation).This could be understood by the following:

React is used to render the various components on the webpage. Now suppose at a point we need to manipulate any particular component, then we will bring changes in our code and then rendering the component again will be required. In the case of the real DOM API, it is required to re-render all the components even if just any one of them is updated.This led to the problem of performance bottleneck, which made manipulation of components difficult, expending resources and time.

React solves this problem by using the VirtualDOM . This VirtualDOM acts as an agent between the developer and the real DOM. This facilitates the entire structure of components as a tree, with each component arranged as a node(logically). Now, whenever any component is updated, React requires to re-render only that particular component,as it updates only the needed node. Thus, saving us all time and resources, and increasing the performance.

These are the few key features and advantages that make React what it is. To start this journey of creating interactive web applications, by this powerful UI library takes a lot more learning and practice!

Happy Learning!

This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.