Code Monkey home page Code Monkey logo

react-static-boilerplate's Introduction

React Static Boilerplate

Static website starter kit powered by React.js and Webpack

Features

    ✓ Modern JavaScript syntax (ES2015+) via Babel
    ✓ Modern CSS/SCSS syntax (CSS3+) via PostCSS
    ✓ Application state management via Redux
    ✓ Routing and navigation via React Router, React Router Redux, History
    ✓ Modular styles via CSS Modules
    ✓ Code-splitting and async chunk loading
    ✓ Hot Module Replacement (HMR) /w React Hot Loader
    ✓ Bundling and optimization with Webpack
    ✓ Cross-device testing with Browsersync
    ✓ IE8 Support (Need to build after)

Directory Layout

.
├── /build/                     # The folder for compiled output
├── /node_modules/              # 3rd-party libraries and utilities
├── /src/
    ├── /components/            # Shared/generic UI components
    │   ├── /Layout/            # Layout component
    │   ├── /Button/            # Button component
    │   └── /...                # etc.
    ├── /containers/            # containers
    ├── /routes/                # View/screen UI components + routing information
    │   ├── /About/             # About page
    │   ├── /NotFound/          # Error page
    │   ├── /Home/              # Home page
    │   └── /...                # etc.
    ├── /static/                # Static files such as favicon.ico etc.
    ├── /store/                 # redux store
├── /test/                      # Unit and integration tests
├── /tools/                     # Build automation scripts and utilities
│── LICENSE.txt                 # Licensing information
│── package.json                # The list of project dependencies and NPM scripts
└── README.md                   # Project overview / getting started guide

Getting Started

Just clone the repo, install Node.js modules and run npm start:

$ git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/jun0205/react-static-boilerplate.git MyApp
$ cd MyApp
$ npm install           # Install project dependencies listed in package.json
$ npm start             # Build and launch the app, same as "node tools/start.js"

NODE: Make sure that you have Node.js v6 installed on your local machine.

IE8 Support Version

    react <= 0.14.9
    react-dom <= 0.14.9
    react-router <= 2.3.0
    webpack = 1.15.0

How to Test

The unit tests are powered by chai and mocha.

$ npm test

Histories

React Router history guides.

production web applications should use browserHistory for the cleaner URLs.

How to Build

$ npm run build         # Build production release 

How to Update

You can always fetch and merge the recent changes from this repo back into your own project:

$ git checkout master
$ git fetch react-static-boilerplate
$ git merge react-static-boilerplate/master
$ npm install

Related Projects

  • React Starter Kit — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
  • Babel Starter Kit — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
  • React Redux Starter Kit — Get started with React, Redux, and React-Router!
  • Redux — Redux is a predictable state container for JavaScript apps.
  • React Router — Declarative routing for React
  • React Router Redux — Ruthlessly simple bindings to keep react-router and redux in sync
  • History — HTML5 History API wrapper library

Learn More

License

This source code is licensed under the MIT license found in the LICENSE.txt file.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.