1.

What are Components in React?

Answer»

EVERYTHING in React are referred as Components. We can have ONE giant component containing all our code, but React’s best practices are to divide our logic into smaller components and reuse them. Like we have a header component, footer component, Service Page Component, Home Page component and so on. There are actually two ways to create Components - Functional Components and Class Based components.

We have already seen examples of both types of Components. Below is an EXAMPLE of the functional component. As the name suggests, it is created using functions.

import React from ‘react’; const DemoPage =() => { return( <div>   <h1>{1+1}</h1> </div> ) }; export default DemoPage; Now we have seen Class-Based components also earlier. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component {  render() {    var i =1;    return (      <div className="App">        <header className="App-header">        { i === 1 ?          <img src={logo} className="App-logo" alt="logo" /> :          <a href="https://reactjs.org" target="_blank">            Learn React          </a>        }        </header>      </div>    );  } } export default App;

This is a simple class-based component. But most class-based components have the concept of STATE(which we will SEE later), which is not possible in Function based Components.



Discussion

No Comment Found