ReactJs Tutorials
What is React Components?
Components are like functions that return HTML elements. React component is the building block of a React application.
A React component represents a small block of code of user interface in a webpage. The primary job of a React component is to render its user interface and update it whenever its internal state is changed. In addition to rendering the UI, it manages the events belongs to its user interface.
Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code.
File name : test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Hello_sana() {
return <h1>Hello_sana, I Love You!</h1>;
}
const Hello_comp = <Hello_sana />;
export default Hello_comp;
You have created a function called Hello_sana that returned h1 tag as shown above. The name of the function acts as an element, as shown below:
const Hello_comp = <Hello_sana />;
export default Hello_comp;
The Component Hello_sana is used as an Html tag, i.e.,
Let us now use this component in index.js file as shown below:
File name : index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
React Components :-
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
Types of Components. :-
There are Two types of components.
Function components
Class components
How to create components?
When creating a React component, the component's name MUST start with an upper case letter.
Function Component :-
function components are a way to write components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters.
A Function component returns HTML but Function components can be written using much less code.
function MyComponent(msg) {
return <h1>Hi, {msg.name}</h1>;
}
function Ittutorial() {
return <h2>Hi, I am best!</h2>;
}
The functional component is also known as a stateless component because they do not hold or manage state.
File name : test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, I am ItTutorials!" />;
export default Hello_comp;
we have added msg attribute to
The component is used in index.js as follows:
File name : index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Class Component :-
Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function.
A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions. The component also requires a render() method, this method returns HTML.
class Ittutorial extends React.Component {
render() {
return <h2>Hello, I am Sana!</h2>;
}
}
class MyComponent extends React.Component {
render() {
return (
<div>This is main component.</div>
);
}
}
The class component is also known as a stateful component because they can hold or manage local state.
Example
import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[
{
"name":"Sara"
},
{
"name":"Arham"
},
{
"name":"Sana"
}
]
}
}
render() {
return (
<div>
<StudentName/>
<ul>
{this.state.data.map((item) => <List data = {item} />)}
</ul>
</div>
);
}
}
class StudentName extends React.Component {
render() {
return (
<div>
<h1>Student Name Detail</h1>
</div>
);
}
}
class List extends React.Component {
render() {
return (
<ul>
<li>{this.props.data.name}</li>
</ul>
);
}
}
export default App;
Render
React renders HTML to the web page by using a function called render(). The purpose of the function is to display the specified HTML code inside the specified HTML element. In the render() method, we can read props and state and return our JSX code to the root component of our app
Class components uses render function. The ReactDOM.render() function takes two arguments, HTML code and an HTML element.
React renders HTML to the web page by using a function called render().
The purpose of the function is to display the specified HTML code inside the specified HTML element.
In the render() method, we can read props and state and return our JSX code to the root component of our app.
In the render() method, we cannot change the state, and we cannot cause side effects
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React application :: ExpenseEntryItem component</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class ExpenseEntryItem extends React.Component {
render() {
return (
<div>
<div><b>Item:</b> <em>Mango Juice</em></div>
<div><b>Amount:</b> <em>30.00</em></div>
<div><b>Spend Date:</b> <em>2020-10-10</em></div>
<div><b>Category:</b> <em>Food</em></div>
</div>
);
}
}
ReactDOM.render(
<ExpenseEntryItem />,
document.getElementById('react-app') );
</script>
</body>
</html>
Component Constructor
If there is a constructor() function in your component, this function will be called when the component gets initiated.
The constructor function is where you initiate the component's properties.
In React, component properties should be kept in an object called state.
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));
Props
handling component properties is by using props.
import React from 'react';import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Props in the Constructor
If your component has a constructor function, the props should always be passed to the constructor and also to the React.Component via the super() method.
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h2>I am a {this.props.model}!</h2>;
}
}
ReactDOM.render(<Car model="Mustang"/>, document.getElementById('root'));
Components in Components
We can refer to components inside other components:
Example
Use the Car component inside the Garage component:
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Components in Components