关于react记录

1、控制面板执行命令

1、npm install -g cnpm --registry=https://registry.npm.taobao.org

 

2、npm config set registry https://registry.npm.taobao.org

 

3、cnpm install -g create-react-app

4、create-react-app my_app //要建项目名称

5、cd my_app/ //找到当前路径

6、npm start //启动

7、npm install -S react-router //router路由路径的安装

react-router的引用

 

注意：创建的项目名不能大写。

在浏览器中打开 http://localhost:3000

 

 

2、webpack打包

 

文档参考地址http://blog.csdn.net/lidysun/article/details/55049386

 

1、新建文件夹，cmd找到目录、npm init生成package.json 文件

2、webpack安装

npm install webpack -g //全局安装 npm install webpack --save-dev //本地安装，并写入到config.json

本地安装成功后将package.json的main项改为 result.js(打包后文件的名字)

 

 

3、新建index.html页面引入打包后的文件

 

 

 

• 命令窗口webpack编译：webpack entry.js result.js
• 浏览器打开index.html，刷新可看到结果。 

4、webpack加载css模块

 

npm install css-loader style-loader --save-dev

 

 

5、webpack配置

 

 

entry 输入文件，相当于设置webpack entry.js result.js 中的entry.js ，现有js文件

 

output 输出文件，相当于设置webpack entry.js result.js 中的result.js ，编译后js文件

 

path 输出文件的位置，__dirname 表示当前目录，可根据实际项目更改，如 ./js 

 

loader 设置不同模块的编译方式。 

 

当webpack.config.js中没有设置loaders {test:/.css$/,loader:'style-loader!css-loader'} 时，并且entry.js引入css的格式为简单的 require('./style.css'); 时，我们编译命令必须加上参数webpack entry.js result.js --module-bind "css=style-loader!css-loader"，但当我们设置了loaders后，引入css文件也可以像js一样简单，编译时就可以不用传参，简直爽爆了。

 

因为设置好了webpack.config.js文件，所以编译时入口文件entry.js、结果文件result.js、css模块参数都统统省略，直接 webpack 编译即可。编译后刷新index.html可见效果 

 

6、打包成功

 

7、package.json文件注解：

 

执行打开页面：npm run start、

 

执行打包：npm run build、

 

npm run test、npm run eject

"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }