Create React App

react.png

参考链接：https://doc.react-china.org/tutorial/tutorial.html

Demo https://github.com/tikeyc/HTML-Study/tree/master/my-app-creat-react-app

Mac更新npm和node版

npm:

1.查看当前版本：

npm --version

2.更新到最新版：

sudo npm install npm@latest -g

node:

1.查看当前版本：

node -v

2.清除npm当前缓存信息:

sudo npm cache clean -f

3.执行下载node:

sudo npm install -g n

4.下载成功后执行安装:

sudo n stable

5.查看当前版本

node -v

Create React App

• 确保你电脑上安装了最新版本的 Node.js.

• 打开终端根据以下命令创建一个新的 React 项目

 1. npm install -g create-react-app
 2. create-react-app my-app
 3. cd my-app
 4. npm start

• 删除掉生成项目中 src/ 文件夹下的所有文件。

• 在 src/ 文件夹下新建一个名为 index.css 的文件并拷贝以下CSS 代码到文件中

body {
 font: 14px "Century Gothic", Futura, sans-serif;
 margin: 20px;
}

ol, ul {
 padding-left: 30px;
}

.board-row:after {
 clear: both;
 content: "";
 display: table;
}

.status {
 margin-bottom: 10px;
}

.square {
 background: #fff;
 border: 1px solid #999;
 float: left;
 font-size: 24px;
 font-weight: bold;
 line-height: 34px;
 height: 34px;
 margin-right: -1px;
 margin-top: -1px;
 padding: 0;
 text-align: center;
 width: 34px;
}

.square:focus {
 outline: none;
}

.kbd-navigation .square:focus {
 background: #ddd;
}

.game {
 display: flex;
 flex-direction: row;
}

.game-info {
 margin-left: 20px;
}

• 在 src/ 文件夹下新建一个名为 index.js 的文件并拷贝以下JS 代码 到文件中

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

function Square(props) {
  return (
    
      {props.value}
    
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
       this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      

        

          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        
        

          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        
        

          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        
      
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        

           this.jumpTo(move)}>{desc}
        
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      

        

           this.handleClick(i)}
          />
        
        

          
{status}
          
{moves}
        
      
    );
  }
}

// ========================================

ReactDOM.render(, document.getElementById("root"));

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

• 接下来通过命令行在你的项目目录下运行 npm start 命令并在浏览器中打开 http://localhost:3000 你就能够看到空的井字棋棋盘了

npm start 

参考链接：https://doc.react-china.org/tutorial/tutorial.html

react.png

暴露配置文件

create-react-app生成的项目文，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：

npm run eject

如果报如下错，请在桌面创建一个文件夹，把项目放入放文件夹中，将项目提交，再执行npm run eject命令。

PC-194-iMac:react-app public1$ npm run eject

> [email protected] eject /Users/public1/Desktop/HTML-Study/react-app
> react-scripts eject

? Are you sure you want to eject? This action is permanent. Yes
This git repository has untracked files or uncommitted changes:

react-app/

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/public1/.npm/_logs/2018-06-08T02_26_29_749Z-debug.log

再执行npm run eject命令，成功可以看到：

PC-194-iMac:react-app public1$ npm run eject

> [email protected] eject /Users/public1/Desktop/HTML-Study/react-app
> react-scripts eject

? Are you sure you want to eject? This action is permanent. Yes
Ejecting...

Copying files into /Users/public1/Desktop/HTML-Study/react-app
  Adding /config/env.js to the project
  Adding /config/paths.js to the project
  Adding /config/polyfills.js to the project
  Adding /config/webpack.config.dev.js to the project
  Adding /config/webpack.config.prod.js to the project
  Adding /config/webpackDevServer.config.js to the project
  Adding /config/jest/cssTransform.js to the project
  Adding /config/jest/fileTransform.js to the project
  Adding /scripts/build.js to the project
  Adding /scripts/start.js to the project
  Adding /scripts/test.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding autoprefixer to dependencies
  Adding babel-core to dependencies
  Adding babel-eslint to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-preset-react-app to dependencies
  Adding babel-runtime to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding chalk to dependencies
  Adding css-loader to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-loader to dependencies
  Adding eslint-plugin-flowtype to dependencies
  Adding eslint-plugin-import to dependencies
  Adding eslint-plugin-jsx-a11y to dependencies
  Adding eslint-plugin-react to dependencies
  Adding extract-text-webpack-plugin to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding jest to dependencies
  Adding object-assign to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding promise to dependencies
  Adding raf to dependencies
  Adding react-dev-utils to dependencies
  Adding resolve to dependencies
  Adding style-loader to dependencies
  Adding sw-precache-webpack-plugin to dependencies
  Adding url-loader to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding whatwg-fetch to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset
  Adding ESLint configuration

Ejected successfully!

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1