BinLiang1990/React-SPA

React+Webpack 微信端单页应用

Example React-Babel-Webpack

• No bullshit, just simple!
• If you have any questions, you can cantact by QQ：416175716
• 其他单页应用： vue.js：https://github.com/allan2coder/Vue-SPA angularjs: https://github.com/allan2coder/AngularJs-SPA

Features

• 自主配置的开发环境

• 采用ES6语法，组件化、模块化开发

• 前端控制路由

• Scss代替css

• 自动打开、刷新浏览器

• Equip with React, ES6 & Babel 6

• Lint with ESlint and Airbnb's style sheet.

• Build with Webpack

• Support hot module replacement

• Auto Open a new browser tab when Webpack loads, and reload the page when you modified the code

• Use Commitizen to produce commit message according to AngularJS convention

• Support git hook pre-commit used to lint and test your code

• Support git hook commit-msg used to lint your commit message

How to use

First, you should clone the repo and install the dependencies.

$ git clone git@github.com:allan2coder/react-spa.git <yourAppName>
$ cd <yourAppName>
$ npm install

Then, launch the project app.

$ npm start

You should see a new browser tap opening and a page of "index.html" in http://127.0.0.1:8080.

From there, you start to develop your own code in the app directory. When you finish coding, use npm run build or npm run deploy to build the static files.

When committing your code, you should use AngularJS's commit message convention. Otherwise, the repo will throw an error. If you use npm run commit instead of git commit, the command will help you to produce a formatted commit message.

Reference Articles

• ECMAScript 6入门
• React/React Native 的ES5 ES6写法对照表
• React 组件之间如何交流
• Webpack 入门指迷
• webpack使用优化
• webpack 的 demos
• webpack 教科书式入门教程
• Webpack傻瓜指南（二）开发和部署技巧
• 传统 Ajax 已死，Fetch 永生
• Fetch API
• JavaScript教程
• JS中的call、apply、bind方法
• ECMAScript 5(ES5)中bind方法、自定义及小拓展
• 使用Mock.js进行独立于后端的前端开发

License

MIT

React-SPA-weixin