Component Creation (Function and Class)
npx create-react-app component-name
A React component is a reusable piece of code that represents part of a user
interface (UI) in a React application. It can be as simple as a button or as complex
as an entire web page. Components are the building blocks of React applications.
Shortcuts to Create Component
import './App.css'
rafce -React Arrow Function Component Export Most common functional comp.
rfce- React Function Component Export Traditional function comp.
rafc- React Arrow Function Component Without export
rfc- React Function Component Without export
rcc- React Class Component Class-based component
rce- React Class Component with Export With default export
rconst Constructor in class constructor snippet*/
Example of Arrow Function Component using Shortcut
rafce
const App = () => {
return (
<h1>This is Arrow Function component with export</h1>
)
}
export default App
Example of Function Component using Shortcut
//rfce
import React from 'react'
function App() {
return (
<div>
<h1>This is Function component with export</h1>
</div>
)
}
export default App
Functional Component
A Functional Component in React is a JavaScript function that returns JSX
(HTML-like syntax). It’s the most modern, simple, and recommended way to
create components in React.
Purpose:
Function components are used to:
• Build reusable UI pieces
• Accept props (input)
• Return JSX (output)
• Use hooks to manage state, side-effects, etc.
Within Index.js-Create One More Function Component and Call
import React from "react";
import ReactDOM from 'react-dom/client'
import reportWebVitals from './reportWebVitals'
import "./index.css"
import Cssstyle from "./components/Cssstyle";
function Car()
{
return <h2>This is Car component</h2>
}
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Car/>
)
reportWebVitals()
Within Index.js-Create Nested Component and Call
import React from "react";
import ReactDOM from 'react-dom/client'
import reportWebVitals from './reportWebVitals'
import "./index.css"
function Car()
{
return <h2>This is Car component</h2>
}
function Garage()
{
return(
<>
<h1>This is Garage Component</h1>
<Car/>
</>
)
}
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Garage/>
)
reportWebVitals()
Create a New Components Folder inside src folder-And Create New File component
using .js or .jsx syntax
import React from 'react'
function Car() {
return (
<div>
<h1>This is Car Component</h1>
</div>
)
}
export default Car
index.js-Use above created component
import ReactDOM from 'react-dom/client'
import Car from './components/Car'
import reportWebVitals from './reportWebVitals'
import "./index.css"
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Car/>
)
reportWebVitals()
Composing Components using File-Garage component using Existing Car
Component
import React from 'react'
import Car from '../components/Car'
function Garage() {
return (
<div>
<h1>This is Garage Component</h1>
<Car/>
</div>
)
}
export default Garage
index.js
import ReactDOM from 'react-dom/client'
import Garage from './components/Garage'
import reportWebVitals from './reportWebVitals'
import "./index.css"
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Garage/>
)
reportWebVitals()
Class Component
Without function we can able to create component using Class (before 16 version
only used class react component). Now a days react using function component.
A Class Component in React is a JavaScript ES6 class that extends React.Component and
includes a render() method to return JSX.
Class components were the standard way to manage state and lifecycle methods before React
Hooks were introduced in version 16.8.
Create Apple class component
import React from "react";
class Apple extends React.Component
{
render(){
return(
<h1>This is Apple -Class Component</h1>
)
}
}
export default Apple
use index.js
import ReactDOM from 'react-dom/client'
import Apple from './components/Apple'
import reportWebVitals from './reportWebVitals'
import "./index.css"
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Apple/>
)
reportWebVitals()
Function component using Class Component
import React from 'react'
import Apple from '../components/Apple'
function Garage() {
return (
<div>
<h1>This is Garage Component</h1>
<Apple/>
</div>
)
}
export default Garage
import ReactDOM from 'react-dom/client'
import reportWebVitals from './reportWebVitals'
import "./index.css"
import Garage from './components/Garage'
const root=ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Garage/>
)
reportWebVitals()
Class component with Constructor
import React, { Component } from 'react'
import ReactDOM from 'react-dom/client';
export class Props1 extends Component {
constructor(){
super();
this.state={first_name:'Ram'}
}
render() {
return (
<>
<h1>This is Class Component with Constructor Example</h1>
<h1>First Name:{this.state.first_name}</h1>
</>
)
}
}
export default Props1
Class component with Constructor(More state)
import React, { Component } from 'react'
import ReactDOM from 'react-dom/client';
export class Props1 extends Component
{
constructor()
{
super();
this.state={first_name:'Ram',
last_Name:'kumar'
}
}
render()
{
return (
<>
<h1>This is Class Component with Constructor Example</h1>
<h1>First Name:{this.state.first_name}{this.state.last_Name}</h1>
</>
)
}
}
export default Props1
Composing Class Components
import React from "react";
class Classcomp2 extends React.Component{
render(){
return(
<h1>Child Class Component</h1>
)
}
}
class Classcomp1 extends React.Component{
constructor()
{
super()
this.Name="Dr.Saravanan"
}
render(){
return(
<>
<Classcomp2/>
<h1>Professor Name:{this.Name}</h1>
</>
)
}
}
export default Classcomp1
index.js Call
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Classcomp1/>
</React.StrictMode>
);
