what is react component?

• component are independent and reusable pieces of code.

• Components come in two types, Class components and Function components, in this article we will concentrate on Function components.

  Function Component

  • components are like function that return HTML elements.

  • In older react code bases you may find class component primarily used.

  • Function component, which added in react 16.8 .

    Basic structure of Function component:

      function App() {
        return (
              <h2>Hi, Hello eveyone</h2>;
              <p>this is para</p>
          );
      }
      default export App;
    

    Note: Always write ()after return.if user return more than one element.

    start () after with return .if user start brackets next line of return the code was not properlly work.

Class Component

• These component are simple classes.

• All class based components are child classes for the component class of reactJS (React.component).

• The class must implement a render() member function which return a react component to be rendered, similar to a return value of a functional component.

    import React from "react";
    class App extends React.Component
     {
         render(){
             return(
                 <>
                     <h1>this h1</h1>
                     <h1>this is h2</h1>
                 </>
             )
         }
     }
    export default App;
  

Or second way

import React, {component} from "react";
 class User extends Component {
     render() {
         return (
             <>
                 <h1>this h1</h1>
                 <h2>this is h2</h2>
             </>
         )
     }
 }

Shortcuts

For class component:

1. rcc:- react class component with export default.

2. rccp:- react class component proptypes.

For function component:

1. rfc:- react function component with export default.

2. rfce:- react function component export default write in last line.

3. rfcp:- react function componenet proptypes.

4. rafc:- react arrow function component

5. rafce:- react arrow function component with export default write in last line.

6. rafcp:- react arrow function component proptypes.

Happy Learning....