reactjs

Events and Uni Directional Data Flow Simple Example in React js

In this Article, we learn about Events and uni directional Data Flow in React Js. We can easily do this just follow my step.
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.
Strongly recommended ,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 install npm install.Now we can create React Application.Write this command for creating App

create-react-app myapp //myapp is the 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 in the index.js page.
Note-First import three package

 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';
//Class keyword is used for create new component
//TodoList 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
  changeListStatus(index){
    var course=this.state.course;
    var courses=course[index];
    courses.IsActive=!courses.IsActive;
    this.setState({
      course:course
    })
  }
  
  //  render is a method name and every render method return jsx and each component have to 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>
 );
 }
}
 class TodoItem extends React.Component{
    render(){
        return(
            <li onClick={()=>{
              this.props.clickHandler(this.props.index);
            }} className={this.props.detail.IsActive?'IsActive':''}>
                {this.props.detail.name}
            </li>
        )
    }
}
ReactDom.render(<TodoList/>,document.getElementById('root'))
//root you can find index.html file

Step 6.After that open index.css file write this code on your index.css page

h1 {
  margin: 0;
  padding: 0;
}

.IsActive{
  background-color: green;
}

Step 7. Then finally save and run this you can see when click on list item change the background color green.
Screenshot describe output.

Leave a Reply

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