1. 安装 Node,到node官网下载
2. 安装 create react app:
npm install -g create-react-app
create react app是开始构建新的 React 单页面应用的最佳途径。 它可以帮你配置开发环境,以便你可以使用最新的 JavaScript 特性,还能提供很棒的开发体验,并为生产环境优化你的应用。
3. 创建 react 项目:
create-react-app my-app
4. 运行项目:
cd my-app
npm start
5. 安装 React,我这里使用 npm 安装 React:
npm init
npm install --save react react-dom
6. 安装 babel 使用 ES6 和 JSX 。ES6 拥有一系列 JavaScript 新特性的标准,能使你的开发更简单。JSX 是与 React 搭配使用的 JavaScript 语言的扩展。
npm install --save-dev babel-cli
安装之后,在 Webstorm 的 settings 中搜索 File Watcher,点击右边 “+”,把 babel 添加上去,截图如下:
Program :如果是全局安装 babel-cli 的,这里默认就好了。如果是项目安装的,就要右边的...到项目的node_modules文件夹中,找到.bin文件夹下面的babel文件,点ok就可以了
Arguments :默认为:$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env
Output paths to refresh :默认为dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:dist\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js.map
7. 安装 Babel 其他库:npm install babel-preset-env --save-dev
8. 在项目根目录创建一个 .babelrc 文件,里面的内容根据自己的需要设置,官网上默认填写:{ "presets":["env"] },有的网上教程推荐{"presets":["es2015"]}
9. 安装 Webpack:
npm install webpack --save-dev
10. 安装并启用webpack-dev-server
webpack-dev-server 允许我们可以把本地项目跑在像 nginx 那样的web服务器上,更重要的是我们可以在 package.json 文件内定义 scripts,同时修改 webpack 的配置文件来达到类似 BrowserSync(即文件修改能被监听,并自动刷新浏览器)的效果!