Some Basic Concepts of React

1. What is React?

Ans: React is a JavaScript library created by Facebook for building user interfaces to make single page applications. React helps one to create reusable user interface components.

2. How does React Work?

Ans: In memory, React builds a VIRTUAL DOM. Instead of explicitly modifying the browser’s DOM, React builds a simulated DOM in memory and performs all necessary manipulations there before making modifications to the browser DOM.

Virtual DOM:

When we write code in react it creates its own DOM that is called virtual DOM. When we change anything in the component, a new changed DOM is created in the virtual DOM. Then react compares the two DOM and find out the changes by reconciliation algorithm then update the only changes in the browser DOM. For this reason, when we use react, for every changes in the component, the browser DOM doesn’t re-render fully rather renders the specific part in the DOM that has been changed which reduces the repainting process in the browser DOM and increases efficiency.

3. What is JSX ?

Ans: JSX ( JavaScript XML ) is something that has made easier for us to write React applications by using HTML . We can write HTML directly inside the JavaScript code using JSX. JSX is an ES6-based extension of JavaScript that is converted into standard JavaScript at runtime. When we write html in jsx, it is transpiled to react element by a transpier called Babel. React element is nothing but a javascript object.

Rendering: Now we have react element which is nothing but javaScript object. To show the elements in the browser DOM, we have to use another library called ReactDom. In a function of ReactDom called ‘render’, we need to pass the element. When we pass the element to the react-dom by render method first it checks the syntactic error then it generally renders the element to a defined html element(Generally div of index.html in public folder).

Examples:

Without JSX:

const testElement = React.createElement('p', {}, "Let's understand the necessity of JSX...");

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

When We use JSX:

const testElement = <p>Let’s understand the necessity of JSX...</p>;

ReactDOM.render(testElement, document.getElementById(’root’));

4.What is React components?

Ans: Components are self-contained, interchangeable code chunks. They perform the same functions as JavaScript functions, but they operate independently and return HTML via the render() function.

Class and Function components are the two categories of components available.

Class Component:

The component’s name must begin with an upper case letter when making a React component.

The extends React.Component declaration must be used in the component; this statement establishes an inheritance from React.Component and grants your code access to functions of React.Component. The render() process, which returns HTML, is also required by the part.

Example:

class House extends React.Component {
  render() {
    return <h3>I am a beautiful House</h3>;
  }
}

Then the house component is rendered in the “root ” element:

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

Functional Component:

A Function component also returns HTML, and behaves pretty much the same way as a Class component.

Example:

const Car =()=> {
return <h3>I am a beautiful House!</h3>;
}

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

5. What is React Props?

Ans: React props is something by which data is passed to the child components from parent components. When we call a component inside another component then the inside component is called child component. Props are passed to components using HTML attributes. React Props are similar to JavaScript’s method arguments and HTML’s attributes. The same syntax is used as HTML attributes to give props to a component.

Example:

Let’s send a feature attribute to the home component:

const homeWithFeature= <Home color="red" />;

The Home component will receive the argument as a props object:

Example

const home=(props)=> {

    return <h3>The color of mine is {props.color}</h3>;

}

6.What is react state?

Ans: A state object is used with React Components . The state is something where the property or the values of an component in stored . In a word react state is nothing but the data of a component when the data of any component is changed the component re-renders.

7. What is react lifecycle ?

Ans: A react component’s lifecycle is nothing but the combination of three phases like Mounting, Updating, and Unmounting. The term “mounting” refers to the process of inserting elements into the Document Object Model (DOM). When any change in the state happens that time it is called updating phase. Unmounting phase refers to the situation when the component is removed from the DOM.

8. What is React Hook?

Ans: Hooks are a recent feature that was added in React 16.8. It enables us to use React’s “condition” and other features without having to write a class. Hooks are functions that help one manipulate the state of a component by “hooking into” React state and lifecycle functionality from function components. It does not fit in a classroom environment. Hooks don’t take the place of a solid understanding of React terms.

Example:

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue