shanshanfei / react-todos Goto Github PK

说明：该项目是使用webpack+ES6进行React开发，最终输出todo list，并做一些简单的操作，另附简单的样式。

查看演示：https://shanshanfei.github.io/react-todos/

开发流程大致如下：

1、git clone https://github.com/shanshanfei/react-todos.git 到本地；

2、cd react-todos 执行npm install安装项目相关依赖，主要有：

	npm install react react-dom --save-dev
	npm install webpack webpack-dev-server --save-dev
	npm install babel-loader babel-core babel-preset-react babel-preset-es2015 --save-dev

	项目最终目录结构：

	--init-react
		|--app
		  	|--components（组件目录）
	      		       |--Todos（组件1）
 			 		|--app.js
  			 		|--app.less
  			 		|--header.js
                                        |--main.js
  			 		|--footer.js
		      		        |--item.js
                               |--index.js 入口主文件
  		|--build（输出目录）
    		        |--index.html
    		        |--bundle.js（输出文件，由 webpack 打包后生成的）
  		|--package.json
  		|--webpack.config.js

3、package.json中scripts写好了构建任务dev，利用前面安装好的webpack-dev-server，进行免刷新页面实时看页面效果，执行命令npm run dev；

	webpack.config.js中做相应配置：
		entry: [
			'webpack/hot/dev-server',
			'webpack-dev-server/client?http://localhost:8080',
			APP_PATH
 		]

4、安装其他的相关loader:

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

5、最终运行步骤：

	git clone https://github.com/shanshanfei/init-react.git
	cd react-todos
	npm install
	npm run dev
        浏览器访问 http://localhost:8080即可看到效果