reactjs

How to Creating a Stateless Functional Component in ReactJS

In this Article we learn about How to Creating a Stateless Functional Component in ReactJS. In previous article learn about events in reactJS event in ReactJs.
We can easily do this just follow my step.
Important Point:
First Thing We Should know that What Is React Js?
React Js is a javaScript Library and it is a component-based architecture.Component-based means logic is written inside the component.
What is Stateless Functional?
=>It is a plain javascript function.In React 0.14 introduced stateless function.It is one way to define Component as a function.
Strongly request first install node.js and visual studio code link for download visual studio code editor in your machine.
download node.js
Then follow my step.
Step 1.First Install global package open command prompt and write this command and hit enter.

npm install -g create-react-app

Step 2.After installing npm install.Now we can create React Application.Write this command for creating App

create-react-app myapp //myapp is application name

Step 3.After completion download go to the folder and start npm

cd myapp
then 
npm start //automatically open in browser

Step 4.Now open your application visual studio code editor. click on file->”Open Folder”->Go to your project and select application myapp then click ok.
Step 5. Open src folder you can see some auto-generated file in src folder.Some file in src folder we don’t need first delete this file like “App.css”,”App.test.js” and “App.js”.
After that open index.js file from src folder then delete auto-generated code from an index.js file. copy this code on your index.js page.

import React from 'react'; //this package is used for create new component
import ReactDom from 'react-dom';//this package is used for insert in DOM
import './index.css';
import TodoItem from './Component/TodoItem.js';
//Class keyword is used for creating a new component
//HelloWorld is component name
class TodoList extends React.Component{
    constructor(){
        super();
        this.changeListStatus=this.changeListStatus.bind(this);
        this.state={
            course:[{
           name:"MCA",
              IsActive:false
            
           
          },
          {
            name:"MBA",
            IsActive:false
          },
          {
            name:"BCA",
            IsActive:false
          },
          {
            name:"BBA",
            IsActive:false
          }
        ]
    }
  }
//changeListStatus is method name pass index parameter 
  changeListStatus(index){
    var course=this.state.course;
    var courses=course[index];
    courses.IsActive=!courses.IsActive;
//Here set the state whatever get the value 
    this.setState({
      course:course
    })
  }
  
  //  render is a method name and every render method return jsx and each component have render method
    render(){
      debugger;
 return(
     <ul>
         {
             this.state.course.map((course,index)=>{
                 return <TodoItem key={course.name} 
                 index={index}
                 clickHandler={this.changeListStatus}
                  detail={course}/>
             })
         }
    </ul>
 );
 }
}


ReactDom.render(<TodoList/>,document.getElementById('root'))

Step 6.Now create one folder in src my folder name is Component. After that generate one file in Component Folder. File Name like TodoItem.js. Open TodoItem.js file and put this code on the TodoItem.js page.
Note: It is not a class component, It is a stateless component because TodoItem have no State and It renders one component and some jsx.But You can see this TodoList.js page contain one state, so it is a class Component.

import React from 'react';
import ReactDom from 'react-dom';

//const is a keyword. TodoItem is a method name pass parameter as props.
const TodoItem=(props)=>{
    return(
        <li onClick={()=>{
                         props.clickHandler(props.index);
                        }} className={props.detail.IsActive?'IsActive':''}>
                           {props.detail.name}
                       </li>
    )
}

export default TodoItem;
//If you will not export TodoItem Component You can not acess outside.

Important Point:Don’t forget to import TodoItem.js page in index.js page after import you can able to access this page.
Step 7.Open index.css page and copy this code on your index.css.

h1 {
  margin: 0;
  padding: 0;
}

.IsActive{
  background-color: green;
}

Finally Screenshot describe output after run the aaplication.

Any question and suggestion related to this topic please comment.Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *