React Components

 

React Components

*      Every application you will develop in React will be made up of pieces called component.

*      Components make the task of building UI’s much easier.

*      We have lot of individual components like a single web page contain (Search bar,Menu bar,nav bar,content,article etc).

Merge all of these individual components to make a parent component which will be the final UI.

Two types of components

1.Functional Component

2.Class Component

 

Component Use:

Reusability of code & Reduce function time.

Functional Components

Change in index.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

const element =<Header/>; root.render(element);

function Header(){

  return<h1>ReactJs </h1>

 

  }

 

Output

 

Creating Multiple Tag

 

Changes in inde.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

const element =<Header/>; root.render(element);

function Header(){

  return<div><h1>ReactJs </h1>

  <h2>Sample page</h2>

 

 

  </div>

 

  }

 

Output

Creating Multiple Function

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Mywebsite/></div>;

 root.render(element);

function Mywebsite(){

  return<div><Header/>

  <Sidebar/>

  <Navbar/>

 

  </div>

 

  }

  function Header(){

return<div>

<h1>ReactJs </h1>

<h2>Sample page</h2>

</div>

  }

function Sidebar(){

  return<h1>Sidebar</h1>

}

function Navbar(){

  return<h2>Navbar</h2>

}

 

Changes in indes.css

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

 

code {

  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

    monospace;

}

 

h1{

background-color: aqua;

color: orangered;

border-style: dotted;

 

}

h2{

background-color: yellow;

color: purple;

border-style: outset;

}

 

Output

 

Class Components

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Mywebsite extends React.Component{

  render()

  {

return<h1>ReactJs </h1>

 

  }

}

class Mynewwebsite extends React.Component{

render()

{

return <div>

<Mywebsite/>

<h1>Sample Page</h1>

 

</div>

}

 

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Mynewwebsite/></div>;

 root.render(element);

 

 

Output