配置环境以及运行一个小小的React的demo

1、检查是否安装了node和npm:
node -v
npm -v

node和npm的版本

2、切换进刚刚新建的文件夹05-09里面,进行npm项目的初始化:
npm init

3、安装项目的依赖包:
为了加快下载速度,可以设置淘宝镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
下面开始安装依赖包:
cnpm install --save react react-dom babelify babel-preset-react babel-preset-es2015 babel-loader
使用了--save就可以在配置文件package.json中看到相关信息了:

4、安装webpack:
全局安装:
cnpm install -g webpack
cnpm install -g webpack-dev-server
在05-09根目录下安装:
cnpm install --save webpack
cnpm install --save webpack-dev-server
配置文件webpack.config.js如下:

配置环境以及运行一个小小的React的demo_第1张图片
webpack.config.js

5、在05-09文件夹下面新建index.html和index.js:
目录如下:(注意bundle.js是后来生成的)

配置环境以及运行一个小小的React的demo_第2张图片
content

index.html如下:

index.html

index.js如下:

配置环境以及运行一个小小的React的demo_第3张图片
index.js

6、可以看到webpack生成的是bundle.js文件,下面实现webpack的热加载:
打开一个cmd,在根目录下输入webpack --watch
打开另一个cmd,在根目录下输入webpack-dev-server
在浏览器中输入http://localhost:8080/webpack-dev-server/
此时在index.js中修改保存,浏览器页面可以自动刷新页面。

你可能感兴趣的:(配置环境以及运行一个小小的React的demo)