npm install -g create-react-app
create-react-app  reactlab1
cd reactlab1
ls
README.md        package-lock.json    public
node_modules        package.json        src

npm start
npm run build

Start Development server localhost:3000

Entry point src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

reactdom จะทำหน้าที่ render component <App /> กับ div

component คือ app.js ภายในมี class extent component จาก react library และ มี function render() ที่ return html - jsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

create header Header.js

import React, {Component}  from 'react';

class Header extends Component {
    render(){
        return (
            <h1> Header component </h1>
        );
    }
}

export default Header

include in App.js, Export <-> import

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Header from './Header';

class App extends Component {
  render() {
    return (
      <div>      # single root node
          <Header />
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          </div>
      </div>
    );
  }
}

export default App;export default App;

React state props

ส่งค่าผ่านทาง prop เป็นเหมือน Attribute this.props. ชื่อ

<Header currentUser="sawangpong" />


# ส่งไปยัง component
render() {
    <div>
       Header  {this.props.currentUser}
    </div>
}

# ส่งไปยัง component
render() {

    let {currentUser} = this.props   # แยกตัวแปรออกมาจาก this.props
                                     # กำหนดตัวแปร currentUser = this.props.currentUser
    return (
    <div>
       Header  {this.props.currentUser}
    </div>
    )
}

ข้อดีเมื่อมีการ assign หลายๆๆ ตัวแปร

destructoring systax

let {currentUser } = this.props
let currentUser = this.props.currentUser

let {currentUser , isLoggedIn }  = this.props

ส่งให้ Header จาก App

class App extends Component {
  render() {
    return (
      <div>
          <Header currentUser="sawangpong" />
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          </div>
          <Footer />
      </div>
    );
  }
}

รับค่า

import React, {Component}  from 'react';

class Header extends Component {
    render(){
        let {currentUser} = this.props;
        currentUser = "login as "  + currentUser;
        return (

            <h1> Header {currentUser} </h1>
        );
    }
}

export default Header

Logic หากมีการ login จึงค่อยโชว์ชื่อออกมา

class Header extends Component {
    render(){
        let {currentUser, isLoggedIn} = this.props;
        currentUser = "login as "  + currentUser;
        return (

            <h1> Header {isLoggedIn && currentUser} </h1>  # logic
        );
    }
}


{isLoggedIn && currentUser}
if  isLoggedIn  display currentUser

True  &&  True



class App extends Component {
  render() {
    return (
      <div>
          <Header currentUser="sawangpong" isLoggedIn/>
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
          </div>
          <Footer />
      </div>
    );
  }
}


<Header currentUser="sawangpong" isLoggedIn/>
แค่การกำหนด ก็มีค่าเป็น True  ไม่ต้อง isLoggedIn={true}

props พ่อส่งให้ลูก

State ลูกถือไว้เอง

ใช้งานที่ footer มาแล้วกี่วินาที การกำหนดค่าให้กับ state กำหนดค่าให้แก่ contructor function เพื่อส่งค่าให้แก่ parent

constructor(props){
    super(props)
    this.state =  {
        time: 0
    }
    setInterval(()=>{
        this.setState({
            time: this.state.time+1
        })
    }, 1000);
}

let {time} = this.state
return (
    <div> Footer {time} </div>
)

setInterval() ทำงาน บางอย่างในช่วงเวลาที่กำหนด

new Footer.js

import React, {Component} from "react"

class Footer extends Component {

    constructor(props){
        super(props)
        this.state = {
            time: 0
        }
        setInterval(()=>{
            this.setState({
                time: this.state.time+1
            })
        },1000)
    }
    render(){
        let {time} = this.state 
        return(
            <h1> Footer  {time} </h1>
        );
    }
}


export default Footer