Components are like pure javascript functions that help make the code easy by splitting the logic into reusable independent code.
Components as functions
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
return <h1>Hello, Elysium </h1>;
const Hello_comp = <Hello />;
export default Hello_comp
We have created a function called Hello that returned h1 tag as shown above. The name of the function acts as an element, as shown below:
const Hello_comp = <Hello />;
export default Hello_comp;
The Component Hello is used as an Html tag, i.e., <Hello /> and assigned to Hello_comp variable and the same is exported using export.
Let us now use this component in index.js file as shown below:
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 as Component
Here is a ReactJS example that uses a class as a component.
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React. Component {
render() {
return <h1>Hello, from Elysium</h1>;
export default Hello;
We can use Hello component in index.js file as follows:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
The Component Hello is used as an Html tag i.e., <Hello />.
What is a State in ReactJS?
A state is a javascript object similar to props that have data to be used with the reactjs render. The state data is a private object and is used within components inside a class. test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
msg: "Hello, from Elysium!"
render() {
return <h1>{this.state.msg}</h1>;
export default Hello;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
What are Props in ReactJS?
Props are properties to be used inside a component. They act as global object or variables which can be used inside the Component.
Props to Function Component
Here is an example of passing props to a function component.
import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
return <h1>{props.msg}</h1>;
const Hello_comp = <Hello msg="Hello, from Elysium!" />;
export default Hello_comp;
The component is used in index.js as follows:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Props to Class Component
To access the props in a class we can do it as follows:
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Hello extends React.Component {
render() {
return <h1>{this.props.msg}</h1>;
} }
export default Hello;
The msg attribute is passed to the component in index.js as follows:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';
ReactDOM.render(
<Hello msg="Hello, from Elysium" />,
document.getElementById('root')
);
Life Cycle of a Component
A component life cycle is divided into Initialization, Mounting, Update, and UnMounting stages.
Here is a detail explanation about each Component.
A component in reactjs has the following stages :
Initialization: This is the first stage of the component life cycle.
Here it will have the default props and the state at the initial level.
Mounting: In this phase, the Component is rendered inside the dom. We having exposure to following methods in the mounting state.
• componentDidMount(): This is also called when the Component is just added to the dom.
• render(): You have this method for all the components created. It returns the Html node.
Update: In this state, the dom is interacted by a user and updated. For example, you enter something in the textbox, so the state properties are updated.
Following are the methods available in update state:
• shouldComponentUpdate() : called when the component is updated.
• componentDidUpdate() : after the component is updated.
UnMounting: this state comes into the picture when the Component is not required or removed.
Following are the methods available in unmount state:
Component willUnmount(): called when the Component is removed or destroyed.
Here is a working example:
Example: complife.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''};
this.UpdateName = this.UpdateName.bind(this);
this.testclick = this.testclick.bind(this);
UpdateName(event) {
this.setState({name: event.target.value});
testclick(event) {
alert("The name entered is: "+ this.state.name);
componentDidMount() {
console.log('Mounting State : calling method componentDidMount');
shouldComponentUpdate() {
console.log('Update State : calling method shouldComponentUpdate');
return true;
} componentDidUpdate() {
console.log('Update State : calling method componentDidUpdate')
componentWillUnmount() {
console.log('UnMounting State : calling method componentWillUnmount');
render() {
return (
<div>
Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName}
In reactjs Html input elements like <input />, <textarea /> and <select /> has their own state and needs to be updated when user interacts using the setState() method.
In this chapter, we will see how to work with forms in reactjs.
form.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''};
this.UpdateName = this.UpdateName.bind(this);
this.formSubmit = this.formSubmit.bind(this);
UpdateName(event) {
this.setState({name: event.target.value});
formSubmit(event) {
alert("The name entered is: "+ this.state.name);
render() { return (
<form>
Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName}
For the input fields, we need to maintain the state, so for that react provides a special method called setState, which helps to maintain the state whenever there is a change.
We have used events onChange and onClick on the textbox and submit button. When the user enters inside the textbox the onChange event is called, and the name field inside state object state is updated as shown below:
UpdateName(event) {
this.setState({name: event.target.value});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';
ReactDOM.render(
<Form />,
document.getElementById('root')
); Working with Events in ReactJS
Working with events in reactjs is same as how you would have done in javascript. You can use all the event handlers that are used in javascript. The setState() method is used to update the state when the user interacts with any Html element.
Here is a working example of how to use events in reactjs.
events.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
constructor(props) {
super(props);
this.state = {name: ''};
this.UpdateName = this.UpdateName.bind(this);
this.testclick = this.testclick.bind(this);
UpdateName(event) {
this.setState({name: event.target.value});
testclick(event) {
alert("The name entered is: "+ this.state.name);
render() {
return (
<div>
Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName}
For the input fields, we need to maintain the state, so for that react provides a special method called setState, which helps to maintain the state whenever there is a change.
We have used events onChange and onClick on the textbox and button. When the user enters inside the textbox the onChange event is called, and the name field inside state object state is updated as shown below:
UpdateName(event) {
this.setState({name: event.target.value});
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';
ReactDOM.render(
<EventTest />,
document.getElementById('root')
);
Working with Inline CSS in ReactJS
Will take a look at a working example to understand the working of inline css in reactjs.
addstyle.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const h1Style = {
color: 'red'
};
function Hello(props) {
return <h1 style={h1Style}>{props.msg}</h1>;
const Hello_comp = <Hello msg="Hello, from Elysium!" />;
export default Hello_comp;
I have added color: ‘red’ style to the h1 tag.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';
ReactDOM.render(
Hello_comp,
document.getElementById('root')
);
Working with External CSS in ReactJS
Let us create a external css , for that create a folder css/ and add style.css in it.
