• This repository has been archived on 26/May/2019
  • Stars
    star
    1,154
  • Rank 40,425 (Top 0.8 %)
  • Language
    JavaScript
  • Created almost 9 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

a boilerplate for React-Babel-Webpack project

This repo is a boilerplate for React-Babel-Webpack project. You could use it as a base to build your own web app.

Features

  • Equip with React, ES6 & Babel 6
  • Lint with ESlint and Airbnb's style sheet.
  • Build with Webpack(support Webpack 1 & Webpack 2)
  • 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
  • Use conventional-changelog to generate CHANGELOG.md

How to use

First, clone the repo.

$ git clone https://github.com/ruanyf/react-babel-webpack-boilerplate.git <yourAppName>
$ cd <yourAppName>

Important: master branch only supports Webpack 1. If you want to use Webpack 2, please switch to webpack2 branch which will be the default branch in the near future.

# only run the command when you want to use Webpack 2
$ git checkout webpack2

Second, delete the old .git history and initialize new history.

$ rm -rf .git
$ git init

Third, install the dependencies.

$ npm install

Then, launch the boilerplate app.

$ npm start

Now you should see a new browser window/tab opening and a title of "Hello World" in http://127.0.0.1:8080.

Last, You need update package.json and modify fields like name, version, description, keywords, author, license and so on to fit your project.

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.

Attention, 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.

License

MIT

More Repositories

1

weekly

科技爱好者周刊,每周五发布
33,058
star
2

es6tutorial

《ECMAScript 6入门》是一本开源的 JavaScript 语言教程,全面介绍 ECMAScript 6 新增的语法特性。
JavaScript
20,881
star
3

jstraining

全栈工程师培训材料
18,959
star
4

react-demos

a collection of simple demos of React.js
JavaScript
16,171
star
5

free-books

互联网上的免费书籍
13,692
star
6

document-style-guide

中文技术文档的写作规范
10,968
star
7

webpack-demos

a collection of simple demos of Webpack
JavaScript
9,588
star
8

jstutorial

Javascript tutorial book
CSS
5,421
star
9

simple-bash-scripts

A collection of simple Bash scripts
Shell
1,415
star
10

reading-list

Some books I read
1,309
star
11

articles

personal articles
921
star
12

loppo

an extremely easy static site generator of markdown documents
JavaScript
707
star
13

wechat-miniprogram-demos

微信小程序教程库
599
star
14

book-computer-networks

Free E-Book: Computer Networks - A Systems Approach
596
star
15

koa-demos

A collection of simple demos of Koa
485
star
16

extremely-simple-flux-demo

Learn Flux from an extremely simple demo
JavaScript
442
star
17

css-modules-demos

a collection of simple demos of CSS Modules
JavaScript
395
star
18

fortunes

A collection of fortune database files for Chinese users.
335
star
19

survivor

博客文集《未来世界的幸存者》
CSS
325
star
20

chrome-extension-demo

how to create a Chrome extension
JavaScript
302
star
21

node-oauth-demo

A very simple demo of OAuth2.0 using node.js
JavaScript
301
star
22

mocha-demos

a collection of simple demos of Mocha
JavaScript
254
star
23

tiny-browser-require

A tiny, simple CommonJS require() implemetation in browser-side
JavaScript
237
star
24

react-testing-demo

A tutorial of testing React components
JavaScript
214
star
25

road

博客文集《前方的路》
CSS
150
star
26

sina-news

新浪全球实时新闻
JavaScript
133
star
27

github-actions-demo

a demo of GitHub actions for a simple React App
JavaScript
132
star
28

weather-action

An example of GitHub Actions
Shell
107
star
29

user-tracking-demos

demos of tracking users with JavaScript
JavaScript
90
star
30

travis-ci-demo

A beginner tutorial of Travis CI for Node projects
75
star
31

openrecord-demos

an ORM tutorial for nodejs
73
star
32

website

HTML
63
star
33

markdown-it-image-lazy-loading

a markdown-it plugin supporting Chrome 75's native image lazy-loading
JavaScript
54
star
34

flux-todomvc-demo

A simplified version of Flux's official TodoMVC demo
CSS
49
star
35

Google-Calendar-Lite

A single-page webapp of Google Calendar, based on its API.
CSS
41
star
36

nilka

a command-line utility to resize images in batches
JavaScript
39
star
37

webpack-static-site-demo

a demo of generating a static site with React, React-Router, and Webpack
JavaScript
32
star
38

turpan

a wrapped markdown renderer based on markdown-it
JavaScript
27
star
39

hn

A personalized Hacker News
JavaScript
26
star
40

rpio-led-demo

controlling an LED with Raspberry Pi's GPIO
JavaScript
25
star
41

koa-simple-server

A simple koa server demo of logging HTTP request Headers and body
JavaScript
25
star
42

jekyll_demo

A very simple demo of Jekyll
22
star
43

node-systemd-demo

run a Node app as a daemon with Systemd
JavaScript
20
star
44

lvv2-feed

Lvv2.com's RSS feed
JavaScript
16
star
45

blog-stylesheet

my blog's stylesheet
CSS
14
star
46

loppo-theme-oceandeep

the default theme of Loppo
JavaScript
13
star
47

tarim

a template engine, using Lodash's template syntax and supporting including other templates
JavaScript
13
star
48

loppo-theme-ryf

个人网站的 Loppo 主题
CSS
11
star
49

Formula-Online-Generator

using Google Chart api to generate mathematical formulas in a webpage
10
star
50

turpan-remove-space

remove the space between English word and Chinese characters in markdown files
JavaScript
9
star
51

eslint-plugin-ignoreuglify

exclude uglified files from ESLint's linting
JavaScript
3
star
52

slides

JavaScript
3
star