yzfdjzwl / react-spa-template

A SPA React template.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A React Template

Inspiration And Source

When I use Vue, webpack is a good template for develop Vue. So this project is a template for React. There are too much templates in open source community, why I try new one? I just want to how to build a project from nothing.

reference

Usage

Do this command:

# install dependences
$ npm install

# dev run
$ npm run dev

# production run
$ npm run build

Devolopement Process

Create Base Files

New some base files, so your directory will like this:

├── build
│   ├── build.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── index.html
├── package.json
└── src
    ├── common
    ├── components
    ├── containers
    │   └── Demo
    │       ├── actionTypes.js
    │       ├── actions.js
    │       ├── index.css
    │       ├── index.js
    │       └── reducer.js
    ├── index.js
    ├── reducers.js
    ├── routes.js
    └── utils

Install webpack

$ npm install --save-dev webpack webpack-dev-server

Install babel

$ npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

$ vim .babelrc

Write the following into .babelrc

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ],
  "plugins": []
}

Install React

$ npm install --save react react-dom

At this point, we can test our project.

About

A SPA React template.


Languages

Language:JavaScript 59.0%Language:HTML 41.0%