1.react 简介
保存刚写的代码,就会马上在页面上看到结果,非常省时的关键步骤!非常炫酷!
2. 创建一个新目录并用npm初始化它
mkdir react-playground cd react-playground npm init
3.安装和配置webpack
webpack 是一个bundler module, 它可以根据配置把项目中各种复杂的依赖关系组织起来,生成对应的js png等静态assets,使用起来也非常简单,我们只是需要 按照官网的指示走一次就知道了。
3.1 安装webpack,webpack-dev-server 及必要的依赖
先在package.json中增加需要安装的依赖(它是npm用来管理package的配置文件)
{
"name": "react-playground",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src/public --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
再运行npm安装
npm install