How to define a state
Ex.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
importReactfrom'react'; importReactDOMfrom'react-dom'; import'./index.css'; classHelloextendsReact.Component{ constructor(){ super(); this.state={ name:”HelloWorld" } } render(){ return(<h1>{this.state.name}</h1>) } } ReactDOM.render(<Hello/>,document.getElementById('root’)) |
How to use props
Ex.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class TodoList extends React.Component { constructor(){ super(); this.state={ names:['wow1','wow2','wow4'] } } render() { return ( <ul > { this.state.names.map(function(name){ return (<TodoItem key={name} detail={name} />) }) } </ul> ) } } class TodoItem extends React.Component{ render(){ return ( <li>{this.props.detail}</li> ) } } ReactDOM.render( <TodoList / > , document.getElementById('root')) |
More Stories
Installation of ReactJS
Deep Dive in JSX – ReactJS
Events and Uni Directional Data Flow in ReactJS