Intro To React

https://reactjs.org/tutorial/tutorial.html

Set up a project on your computer.

1. Make sure you have a recent version of Node.js installed.
2. Follow the installation instructions to create a new project.

   npm install -g create-react-app
   create-react-app my-app
   

3. Delete all files in the src/ folder of the new project (don’t delete the folder, just its contents).

   cd my-app
   rm -f src/*
   

4. Add a file named index.css in the src/ folder with this CSS code.
5. Add a file named index.js in the src/ folder with this JS code.
6. Add these three lines to the top of index.js in the src/ folder:

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

Now if you run npm start in the project folder and open http://localhost:3000 in the browser, you should see an empty tic-tac-toe field.

npm start

To get started, edit src/App.js and save to reload.

Set up a project on your computer.

class Board extends Component {
  renderSquare(i) {
    return <Square />;
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}
class Square extends Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

Passing Data Through Props

Square value={i} =>this.props.value

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

An Interactive Component

onClick={() => alert('click')}

First, add a constructor to the class to initialize the state:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }
  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

Lifting State Up

handleClick()傳給小孩後變成pros Board ->onClick={() => this.handleClick(i) Square->onClick={() => this.props.onClick()}

//Square
render() {
    /*return (<---------------------
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );*/
    return (
      <button className="square" onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
//Board
renderSquare(i) {
    //return <Square value={i}  />;<-----
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }
handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

// This also gets linted

// This also gets linted

/* eslint quotes: [2, "double"] */

function hello() {
    console.log("Hello, world!");
}
hello();

// This gets linted too
var div = <div className="jsx"></div>;

// And this
console.log(process.version);

This is plain text and doesn't get linted.