Some React Concepts for Beginner

01. React framework or library:

React is just a library. It builds user interfaces using components. It doesn’t help us with server communications, translations, routing, and so on. It's thin and extremely easy to mix with other 3rd party libraries.

02. JSX:

Javascripts XML is sort form is JSX. JSX is a synthetic sugar for the React.createElement(component, props ….children) function.

Const RootElement =(
<div>
  <h2 style={{color:green}}>This is Javascripts XML</h2>
  <p> synthetic sugar for the React.createElement() function</p>
</div>
)
ReactDOM.render(RootElement, document.getElementById(‘app’))

In this process, Babel will transpile the markup to plain JS.

03. JSX with Babel

JSX is a JavaScript extension that allows us to write HTML in a JavaScript file using a special syntax. Normally when we write HTML in JavaScript which is supposed to return by function component is ideally not HTML we use JSX to return function calls that create the react element. But the browser doesn’t understand JSX and for that react uses a transpiler to translate the JSX into React.createElement calls

Now the question is what is transpiler? Well, A compiler that translates a form of syntax to another is called a transpiler. There are two transpiler people use in react

Babel and TypeScript. Normally react use babel as a transpiler for rendering the react element.

So when we create an app using create-react-app the by default app internally uses babel transpiler. Let see the image below

04. React Hooks

React hooks are the feature of the newly released version of react 16.8. Hooks are normally a special type of function. React hooks allows us to create a state without using a class component. Every hook’s name starts with the ‘use’ word. Ideally, some hooks are used to provide stateful elements with function components like ‘useState’, and some are used to manage side effects in react. Let’s see some hooks in react version 16.8. React hooks can only be used in functional components. It can not be used in-class components. There are three basic hooks in react.

1. useState()
2. 2.useEffect()
3. 3.useContext()

05. React Components

Components are simple JavaScript functions in React. Where it returns values like regular functions. As a return value React components returns react elements. But there is a simple difference between regular functions and react components that is regular function can return undefined as a value. But React component can not return undefined. Its react components do not return any value. The react DOM will return a null value.

Basically, components make react applications more readable and faster and it might be the one reason to be a fan of react library.

There are two types of components in React

• Class Component
• Function Component

06. Class Component

In react we can create a component using class the class is similar to the JavaScript class with few differences.

import React, { Component } from 'react';
import MyComponent from './MyComponent';

class MyOtherComponent extends Component {
  render() {
    return (
      <div>
        <div>This is my other component.</div>
        <MyComponent />
      </div>
    );
  }
}

export default MyOtherComponent;

As we can see the class component must be extended from React. Component and this is one of the main classes of the component. As a syntax, the class component has to define the render() method which actually renders the tree of objects which is returned by React. Component . the render() function does not receive any arguments. In the class component, we must use this instance to access properties or objects. As we can see in the picture.

07. Function Component

Another way to create a component in react is using function. To make the component stateful in react we had to use class syntax and that was the only way. And it was so complex, but in react version 16.8 which is released in 2019. We can create a component using function and we can also make the component stateful in a convenient way using react hooks. And I think for that the usage of class components falling nowadays.

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" /> 
     <Welcome name="Edite" /> 
   </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Here we can see we don’t need to use the render () method to render the react element and we can access the value of states without using this keyword. Like that there are a lot of facilities react provides in their version 16.8.

08. React props

Props in react is simply an object that is passed by the parent component. The props can be received by the child component. If we want we can directly destructure the props value or we can manually destructure the values and use them in react element.

09. React Lifecycle Methods

React lifecycle method is a process of how actions will be taken in a react application based on every state in the app if we simplify the answer we can say that React lifecycle method is a series of events that happen in a react app from starting to ending state. There are so many lifecycle methods in React some of them are.

• Render()
• componentDidMount()
• componentDidUpdate()
• componentWillUnmount()
• shouldComponentUpdate()

10. React Virtual DOM

We know that Browser DOM parses an HTML document in a tree structure and when we update any content in the document, it renders the whole DOM and runs to the browser. Which is a slow and lengthy process. Where A react virtual DOM firstly re-rendered the DOM when any changes occur then it compares the real DOM and updates only those nodes which is need to be updated. So the benefit of virtual DOM is it does not re-render the whole DOM. Which makes our application faster.