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:

3. What is JSX ?

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?

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?

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?

7. What is react lifecycle ?

8. What is React Hook?

Example:

Basic Hooks

  • useState
  • useEffect
  • useContext

Additional Hooks

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