10 React fundamental things

Random search from Internet

What is React JS?

React is one of the most popular JavaScript libraries for building user interfaces. React Js is the most powerful library build by Facebook. Some people seem to think React Js is a framework. But React Js is not a complete solution you will often need to use more libraries to complete your projects.

1. Virtual DOM

DOM represents Document Object Model. The Virtual DOM is the programming concept where virtually represents a UI stored in memory and renders or synced with Real DOM by a React DOM library. It’s called reconciliation.

2. React Js Tree Reconciliation

When React renders tree elements in the browser it first generates virtual DOM on that tree and stored it around in memory for later. And it will proceed to perform the DOM tree elements to display on the browser. To render an updated tree in the browser, React Js compares 2 virtual versions that are stored in memory and calculate the differences between them, and finds out what’s the updated and only updated trees show up in the browser.

3. React Components

React Js is components-based to build the user interface. You can imagine it’s simple as function (any other programming languages). It’s an input set of “props” and output as a description of a UI. React components are reuseable and any single component can reuse in multiple components. It also contains other components.

4. Function and Class Components

In React Js there are two ways of writing components as Functional Components and Class Components. Currently, Functional components become more and more popular because of the simple JavaScript functions and that returns JSX (I’ll describe it very soon). On the other hand, class-based components little bit confusing, and after released React Hooks class components less used than Functional components.

5. JSX

JSX represents JavaScript XML. It’s valid syntax and allows write similar HTML, CSS code into JavaScript file. The Browser doesn’t understand JSX, but the browser can understand React included library (React.createElement) API calls. JSX Example is given below.

import Reac from 'react';
function App() {
  const text = 'Hello World';
  
  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
} 

6. React Hooks

React Hooks are a new edition in React 16.8. It’s only can be used in Functional components and not used in class components. Exactly a React Hook in a component is a call special function and it’s call at the top level of the function. In general, React hooks begin with the word “use”. React Hooks Example is given below.

import React, {useState} from 'react';
function App() {
  const [count, setCount] = useState(0);
  
  return (
   <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

7. JavaScript Expression anywhere

JavaScript Expression can be used in JSX within pair of curly braces. Any kind of JavaScript expression can be written in JSX within pair of curly braces but can’t be written if-else statement rather ternary expression is fine. JS Expression Example is given below.

import React, {useState} from 'react';
function App() {
  const [count, setCount] = useState(0);
  return (
   <div>
      {count.lenth}
    <div>
  );
}

8. Conditional Rendering

In React, conditional rendering render UI based on certain conditions. It’s often needed one part render by logic (If it’s true) or render second part.

import React,{useState} from "react";
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  return (
   <div>
      {loggedIn ? <li>Sign in</li> : <li>Sign out</li>}
    <div>
  );
}

9. Side Effects

In React, the first time on the browser react render refers to “mounting” and remove it from on the browser “unmounting”. Mounting, updating & unmounting might need have side effects. In general React components, to render before & after must have needed side effects. In class components, side effects refers to “componentDidMount”, “componentDidUpdate” & “componentDidUnmount” class method. In function components, it’s referred to use effect hooks.

10. Performance Optimize

To optimize your performance for web applications build by React, you’ve to follow some effective ways. By default, React includes many helpful warnings. These warnings might help your optimal performance for the web application. On the other hand, you can test your application with minified production build.