10 Most Demanding Facts About the Most Popular Javascript Library ReactJS

10 Most Demanding ReactJS Facts

Javascript Library ReactJS

What is React??? Library or Framework???

React is a Javascript Library. It is not a framework. It is used in building user interfaces for different web applications. It is not a complete solution. Rather it is adaptive with the other libraries. Here I would like to mention the Unix philosophy:

Write programs that do one thing and do it well. Write programs to work together.

— Doug McIlroy

React follows this Unix philosophy. It is a small library. It is focused on just one thing and does that thing in the best way.

Virtual Dom ???

ReactJS does not update the real DOM in a direct way. Rather it updates the Virtual DOM. Because real DOM updating process is a bit slow. DOM means “Document Object Model”. It’s the browsers’ programming interface for HTML and XML. DOM defines the logical structure of documents. It is done in the way a document is accessed and manipulated.

Virtual DOM vs Real DOM

JSX in ReactJS ???

At first, we should see a variable declaration below —

const intro = <h1>Hello, world!!</h1>;

What happened ?? Isn’t it a funny syntax? It is neither a string nor HTML. Guess what!!! This funny syntax is called JSX. It is a syntax extension to JavaScript. It is recommended to describe the UI through react. It is implemented with the full power of JavaScript.

Why JSX ???

• It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
• It makes it easier for us to create templates.
• Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

Example:

import React from 'react';
import ReactDOM from 'react-dom';
var name = "Guyz";
var element = <h1>Hello, { name }.Welcome to Faizur Medium Blogs.< /h1>;
ReactDOM.render(
element,
document.getElementById("root")
);  // Hello, Guyz. Welcome to Faizur Medium Blogs.

Components and Props in ReactJS ???

We use components to split the UI into independent and reusable pieces. We can think the pieces in the isolated forms. Components are like the functions we use in javascript. The accepted inputs are called props. They return react elements that are appeared on the screen.

Functional Component Example:

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

Class Component Example:

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

Rendering Components Example:

import React from 'react'; 
import ReactDOM from 'react-dom';
 
function Intro() { 
  return <h1>Hello World!</h1> 
}
ReactDOM.render( 
 <Intro/>, 
 document.getElementById("root") 
);

Fragments in ReactJS ???

Fragment is a common pattern in ReactJS. It is for a component to return multiple elements. It enables us to group a list of children. It is done without adding extra nodes to the DOM.

Example:

class Columns extends React.Component {
  render() {
    return (
      <React.Fragment>
         <h2>Hello</h2>
         <p>How are you doing today?</p>
      </React.Fragment>
   );
}
}

Hooks in ReactJS ???

Hooks are the thing that enables us to use state. It also enables other React features without writing any class. It is the new feature of React. The new version is 16.8.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); // First Hook
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Optimizing Application Performance:

React application performance can be optimized by following some simple steps given below:

• Use the production build.
• Utilization of single-file builds.
• Install the terser-brunch plugin for the most efficient Brunch production build

npm install --save-dev terser-brunch

• Browserify
• Rollup
• WebPack
• Profiling Components with the DevTools profiler
• Virtualize Ling Lists
• Avoid Reconciliation

Proptypes in ReactJS ???

propType is used to validate any data. It is received from props. First we will have to import it at the top of the index.js file.

import PropTypes from 'prop-types';

Example:

import PropTypes from 'prop-types'; 
import React from 'react'; 
import ReactDOM from 'react-dom';
// Component 
class ComponentExample extends React.Component{ 
 render(){ 
  return( 
    <div> 
     {/* printing all props */} 
     <h1> 
      {this.props.arrayProp} 
      <br />
{this.props.stringProp} 
      <br />
{this.props.numberProp} 
      <br />
{this.props.boolProp} 
      <br /> 
     </h1> 
    </div> 
   ); 
 } 
}
// validating prop types 
ComponentExample.propTypes = { 
 arrayProp: PropTypes.array, 
 stringProp: PropTypes.string, 
 numberProp: PropTypes.number, 
 boolProp: PropTypes.bool, 
}
// creating default props 
ComponentExample.defaultProps = {
arrayProp: ['Tamim', 'Shuvo', 'Rayhan'], 
 stringProp: "FaizurmediumBlogs", 
 numberProp: "10", 
 boolProp: true, 
}
ReactDOM.render( 
 <ComponentExample />, 
 document.getElementById("root") 
);
// TamimShuvoRayhan
   FaizurmediumBlogs
   10