React Component and Props

In last blog we have learned about Getting started with React. If you have not gone through it check it out-

1. https://letslearnwithmahesh.blogspot.com/2020/09/getting-started-with-react-js.html
2. https://letslearnwithmahesh.blogspot.com/2020/09/project-structure-of-react-js.html

React Component are independent bit of code which are planned to reuse with different component. Component resembles to JavaScript function which return some Html in the response. React Component can be classified into two category class component and function component. In this tutorial we will be discussing both of them.

Create Class Component

 The Name of the Class Component must be start with Upper case latter. The class type of component needs to inherit from React.Component. Due to Extending React.Component class component has access to many build in function. The class component needs to have a method which return HTML with naming Render().

Lets add a class component with name "Welcome" to our "my-app" created in tutorial.

For the sack of separation of concerns lets add a new folder in our app.

Add a file in this folder naming "Welcome.js".

We would need to import react in this file which is library responsible for most of the functionality.

Now we would be creating a class with Name Welcome which extends react.component.

When React observe a custom component in our application it passes a object names as "props" to custom component.

We can pass any custom property to this component as normal attribute i.e id in <div id="parent"></div>.

We will pass name from our parent component to welcome component.

Add below code to this js file-

import React from "react";

class Welcome extends React.Component {

    render(props) {

    return <h1>Welcome {this.props.name}!!</h1>;

    }

  }

export default Welcome;

Now as our component is ready we would need to reference this component in our App component.

Import our Welcome component in App component and reference this body.

import React from 'react';

import Welcome from './Welcome/Welcome'

import './App.css';

function App() {

  return (

    <div>

   <div>Hello World!!!</div>

     <Welcome name='John'></Welcome>

   </div>

  );

}

export default App;

Now run the app to see the result

Create function Component

The function component are the simple JavaScript function which returns some html as output. We need to name the component starting with Capital letter as  React treats components starting with lowercase letters as DOM tags i.e <div>. The function type of JavaScript function must return some HTML which can be rendered on browser.

Now lets add a function component in out application named Greeting.

import React from 'react'

function Greeting() {

    return <h1>Good Morning John</h1>;

  }

  export default Greeting

Lets call it just below the Welcome greeting in app component.

     <Greeting></Greeting>

Run the code to see the response in browser.

We will be learning passing parameters in react component in our next blog.

Happy Coding!!!