得益于前端技术和开源的发展，前端生态日益丰富，有非常多的框架工具包，React 就是其中之一。React 本身也用到了其他的工具包。为了能高效的管理这些工具包之间的依赖关系，必须有个强有力的包管理工具。在前端社区中，Npm 是最主要的包管理工具，Npm 是 NodeJS 提供的。在开始 React 学习之前，我们需要先安装 NodeJS。不需要害怕，我们并不需要学习 NodeJS，只需要掌握 Npm 几个命令就够了。
安装 NodeJS 很简单，到 NodeJS 官网找到你需要平台和版本下载安装即可。笔者使用的是 ubuntu，使用的是协作的时候最新的 LTS 版本 v10.15.3。Windows 平台可以直接通过链接 https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi 下载安装。以下是几个平台的安装命令参考。没有提到的平台，请打开 https://nodejs.org/en/download/ 下载。我们只需要用到最基本的 Npm 功能，对于 Npm 的版本没有特殊的要求，选择最新的 LTS 版本就好。
# Ubuntu
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
# Debian, as root
curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt-get install -y nodejs
# macOS
brew install node
安装完成后，可以用 node -v 命令和 npm -v命令验证下是否安装成功。
root@43910056a2ce:/data# node -v
v10.15.3
root@43910056a2ce:/data# npm -v
6.4.1
因为 npm 安装依赖是从国外服务器下载，受网络影响大，可能出现异常，淘宝团队做了一个 npm 镜像 cnpm。cnpm 就是中国版的 npm，安装命令如下。
#安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
React 提供了一个快速创建 React 工程的命令工具 create-react-app。下面我们通过 cnpm 工具来安装 create-react-app。
cnpm install --global create-react-app
#cnpm install 是安装命令，--global 参数告诉安装命令将工具安装到系统全局，安装到系统全局的工具，可以直接在命令使用。
后续在使用 create-react-app工具的时候，工具中还是有直接使用 npm 命令的地方，如果遇到命令执行慢的情况，可以考虑直接配置 npm 镜像指向 https://registry.npm.taobao.org。方法如下：
npm config set registry https://registry.npm.taobao.org
现在需要安装的依赖都完成了，可以开始 React 之旅了。我们先从一个示例工程开始，创建一个 helloworld 工程，命令如下：
#在当前目录下创建 helloworld 工程
create-react-app helloworld
#进入工程目录
cd helloworld
#启动工程。create-react-app 创建的工程已经包含了基础示例页面，是可以立即执行的
npm start
启动命令会自动打开浏览器显示工程的主页。如果没有自动打开，可以在浏览器中打开，默认的地址是 http://localhost:3000。如果默认的端口 3000 被占用，命令行会提示换一个端口。这个缺省创建的实例运行如图：
react-demo.png
浏览器不要关闭，npm start 命令会一直检测工程内容，当工程内容修改的时候，会立即编译运行，浏览器也会自动刷新页面，显示最新的变更。
项目的目录结构如下：
root@6ae880e801ea:/data/workspace/helloworld# tree -I node_modules
.
|-- README.md
|-- package.json
|-- public
| |-- favicon.ico
| |-- index.html
| `-- manifest.json
`-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
`-- serviceWorker.js
其中README.md 是通用的指导我们如何运行、测试、构建工程的简要说明。package.json 是 NodeJS 管理项目依赖的配置文件，我们基本不用自己配置，所以可以暂时不用管这个文件。
public 目录
favicon.ico 是网站 logo 缩略图。index.html 是网站的入口主页，可以根据自己的需要调整。manifest.json 文件是w3c的webapp规范，用来配置应用的信息（比如应用名称、作者、icon 和描述），当用户将应用添加到桌面的时候，
会以这个文件中的内容作为图标和文字的显示内容。
src 目录
App.js 是示例组件，App.css 是示例组件的样式，App.test.js 则是示例组件的测试代码。工程全部内容就是这个示例组件，也就是上图工程截图显示的内容，我们暂时不用深入探究这个示例组件。
index.css 和 index.js 是主页的样式和代码。代码中除了引入依赖，只有两行代码，第一行是将组件 App 渲染到一个 id 为 root 的 DOM 元素。这是后面会讲到的JSX 语法。第二行是和性能有关的，在性能章节再深入探讨，这里可以不管，可以直接注释掉。
logo.svg
网站 logo 矢量图
serviceWorker.js
主要逻辑是用于在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度，具体可以参考代码文件中的注释，等性能章节再深入探讨。
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
按照惯例，我们先来个 helloworld 试试。需要做的很简单，只需要修改 src/index.js，用<H1>Hello World!</h1> 替换<App />，修改后的内容如下：
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
//serviceWorker.unregister();
回到刚刚打开的页面，会发现内容自动刷新了（如果页面已经关闭，可以重新打开）。
helloworld.png
网友评论