win10环境下使用npm安装react步骤总结：

1、检查环境：

首先，确保node.js和npm已经安装在你的电脑上，并确保node版本>=6，npm版本>=5.2。

查看方式，打开命令行工具，执行如下命令，可以查询出node和npm是否已安装，版本是多少：

2、create-react-app：

管理员身份运行命令行工具（右键选择run as administrator），如果有代理，请设置一下，这里不做详述。

执行npm install -g create-react-app或者npx install -g create-react-app。那么，npm和npx是什么关系？简述一下：

npx是一个工具，是npm v5.2.0引入的一条命令（npx），一个npm包执行器，旨在提高从npm注册表使用软件包的体验 ，就像npm极大地提升了我们安装和管理包依赖的体验，在npm的基础之上，npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。它极大地简化了我们之前使用纯粹的npm时所需要的大量步骤。

执行结果如下：

+create-react-app @2.1.8

updated 1 package in 71.635s

3、新建app:

执行npx create-react-app my-app或者npm init react-app my-app，此步骤很慢很慢，需要耐心地等一下，我自己装了将近20分钟吧，供参考。

4、删除掉新项目中 src/ 文件夹下的所有文件（切记：不要删除整个 src 文件夹，删除里面的所有源文件即可。）

删除方式：

（1）手动删除

（2）使用命令删除：

打开命令行工具：

cd src #进入到src文件夹

del * #删除文件夹内所有文件

cd… #返回到项目文件夹（即从src文件夹返回到my-app文件夹）

5、使用IDE打开src文件夹，这里用visual studio code为例。创建两个文件，文件名分别为index.css和index.js。

拷贝如下代码到index.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;
}
接下来，拷贝如下代码到index.js文件里面，并保存：

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
class Square extends React.Component {
render() {
return (

{/* TODO */}

);
}
}

class Board extends React.Component {
renderSquare(i) {
return ;
}

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 Game extends React.Component {
render() {
return (

{/* status /}

1. {/ TODO */}

);
}
}

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

ReactDOM.render(
,
document.getElementById(‘root’)
);
6、在项目文件夹（my-app）下执行npm start，然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了，到此，安装结束。