Example React-Babel-Webpack

• No bullshit, just simple!
• If you have any questions, cantact my qq 424073859（前端交流群）

Other SPA(其他单页)

• vue2.x 小项目这个就够了！
• vue2.x 语法检测单元测试！ 🔥 🔥 🔥
• angularjs 2.x

Features

• 自主配置的开发环境

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

• 前端控制路由

• Scss代替css

• 自动打开、刷新浏览器

• Equip with React, ES6 & Babel 6

• Lint with JSHint.

• 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

• Use conventional-changelog to generate CHANGELOG.md

How to use

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

$ git clone https://github.com/allan2coder/React-SPA-Tutorial.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.

Formatted commit message

When committing your code, you can use AngularJS's commit message convention. If you use npm run commit or git cz instead of git commit, the command will help you to produce a formatted commit message.

JSHint

$ jshint myfile.js
myfile.js: line 10, col 39, Octal literals are not allowed in strict mode.

1 error

FAQ

Checking the node version, when you have a problem with running npm start. And updata your node to high version.

有没有人捐助让我感受下世界的美好 (；′⌒`)

向已经捐过钱大佬表示感谢,已累计获得610元、谢谢！

Reference Articles

• 你可能不需要redux-看你的项目是否需要Redux
• 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