Want to be a React Developer? Know this basic.

What is React |Why React is a library, not a framework|Why learn to React |React Virtual Dom | Diffing Algorithm | What is JSX |What is babel | React Performance | Proptypes in React | Default Props |

What is React and why we call it a library, not a framework?

One crucial distinction between libraries like React and frameworks like Ember.js and AngularJS is that React is concerned only with rendering the UI and leaves many things up to each project to put together. This means you have the ability to implement your other favourites libraries like Redux, MobX for state management and Axios for fetching data from API and other tools for testing. React only cares about the user interface not the whole production. That is React is so popular today.

Why we should learn React ?

Better User Experience: Unlike other JavaScript frameworks, React uses the Virtual DOM — the abstract form of Real DOM. This makes it easier for the React app developers to update changes performed by the users in the application without affecting the other parts of the interface.

This results in building a highly dynamic UI with the exquisite user experience.

Time-Saving:

In the case of React, the app development companies can reuse the code components at distinct levels at any point of time. Besides, the components are isolated to each other and changes in one does not affect the other, which makes it easier to manage the updates.

This makes the React app development easier, time-saving, and efficient for developers.

Quick Development:

React allows the developers to reuse the existing code and apply hot reloading into the process. This approach not only improves app performance but also accelerates the development speed.

Faster Testing:

React extensively uses Redux which cut down the hassle of storing and managing component states in large-sized and complex applications with enormous dynamic elements.

It helps the developers to add application state in a single object and empower every component of the app to access the application state without involving child components or using callback. This makes it easier to test the application and log data changes, along with the use of hot reloading and other such tools.

Code Stability with One-directional data-binding:

ReactJS let the developers work directly with the components and employ downward data binding to ensure that the parent entities do not get affected by the changes of child entities. This approach makes the code stable and supports the idea of development in the future.

Mobile App Development:

Learning React comes with a bonus: React Native. React is not a ‘write once run anywhere library’, as the creators say, it’s a ‘learn once write anywhere’ library. Yes, you can write native apps for Android and iOS using React Native. Although you will not be able to use the exact same code you wrote for web, you will be able to use the same methodology and the same architecture.

I think these are enough appreciation for React. Now let us know what React uses in behind.

What is JSX and Why React uses it?

JSX stands for JavaScript XML.

JSX allows us to write HTML in React.

JSX makes it easier to write and add HTML in React.

JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications.

Let us demonstrate with two examples, the first use JSX and the second does not:

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I am not using JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

//Output: I am not  using JSX.

Let us write the same example with JSX :

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1> I am using JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
//output: I am using JSX!

So, Which one is easier to read? Of course the second one. Writing jsx makes the writing code easier and increases the readability of code.

What is Babel in React?

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.

You would be wondering how React works with babel as it is used to transpile the es6 version of javascript to the old es5 version so that every browser can understand the code. To know how React code compiles with babel you will need to know what is preset in babel.

Presets in Babel:

Babel presets are config details to the babel-transpiler telling it to transpile it in the specified mode. We need to use presets that have the environment in which we want the code to be converted. For example, the es2015 preset will convert the code to es5. Preset with value env will also convert to es5. It also has additional features/options. In case you want the feature to be supported on recent versions of browsers, babel will convert the code only if there is no support of features on those browsers.

Like this, babel use React presets to transpile it. To know more Click here

What is virtual dom in React?

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

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.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house. When you render a JSX element, every single virtual DOM object gets updated.

This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.

Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.

By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”

Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. That is why Virtual Dom React application so much robust and faster.

Virtual Dom and Real Dom

What is prop types in React?

React components receive their props from a parent component. We can define the props type default so that we can check the type of props we are getting from parent components that are right or wrong. It’s is very useful in large applications where we have to deal with millions of data.

How to use it?

React.PropTypes has moved into a different package since React v15.5. Please use the prop-types library instead. To install it, click here.

import PropTypes from 'prop-types';

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

Greeting.propTypes = {      
  name: PropTypes.string
};

In the above example, we are checking the type of props, here we are passing string value and we set our default type string, if somehow other than a string is passed into the props it will give us warning, you can check it on your console.

What is the default prop in React?

Default props can be defined as a property on the component class itself, to set the default props for the class. This is used for handling the undefined props, but not for null props. For example:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'                   
};

Here, we see that the CustomButton element has a property that is set to blue by default. If we do not pass any value of that “color” property it will be “blue” by default.

render() {
    return <CustomButton /> ; // props.color will be set to blue
  }

but if we pass “null” as the value it will remain null.

render() {
    return <CustomButton color={null} /> ; // props.color will           remain null
  }

ow to Increase the performance of a React app?

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. The main reason for this is the powerful virtual dom. But there are several ways we can increase the performance to a higher extend.

Using the Production Build :

if you’re benchmarking or experiencing performance problems in your React apps, probably you are not using the minified production build.

By default, React shows us many helpful warnings in our console which helps us to debug and removes unused things. These warnings are very useful in development. However, they make React larger and slower. So we should make sure to use the production version when deploying the app.

If you aren’t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background and in development mood, it will have a red background.

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

How to make a production build. Just type

npm run build

This will create a production build of your app in the build/ folder of your project. Do this only when you are ready to deploy otherwise just run “ npm start”

Single-File Builds: React offer production-ready versions of React and React DOM as single files :

<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Caution: React files ending with .production.min.js are suitable for production not for development.

Brunch:

For the most efficient Brunch production build, we can install the terser-brunch plugin:

npm install --save-dev terser-brunch

Then, to create a production build, add the -p flag to the build command:

brunch build -p

Caution: We only need to do this for production builds. We shouldn’t pass the -p flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.

Want to know more? Check