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 (
<button className="square">
{/* TODO */}
</button>
);
}
}
class Board extends React.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 Game extends React.Component {
render() {
return (
<div className="game">
<div className="game-board">
<Board />
</div>
<div className="game-info">
<div>{/* status */}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
}
// ========================================
ReactDOM.render(
<Game />,
document.getElementById('root')
);
6、在项目文件夹（my-app）下执行npm start，然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了，到此，安装结束。
以上是 win10环境下使用npm安装react步骤总结： 的全部内容， 来源链接： utcz.com/z/381417.html
