Giter VIP home page Giter VIP 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

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.

react-static-boilerplate's People

Contributors

koistya avatar b2whats avatar frenzzy avatar ilvsx avatar alerosa avatar cobbweb avatar creeperyang avatar dax70 avatar handtrix avatar lacour avatar i8ramin avatar james4388 avatar xdamman avatar jacobhamblin avatar

Watchers

James Cloos avatar Max avatar

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.