React Boilerplate

Introduction

This project is first to train with tools like babeljs.io, React, ES6... And then I used it as Boilerplate for my react projects.

Requirements

• nodejs
• Gulp
• sass

Optional

• Mongodb
• Install on Ubuntu
• Install on OS X

Installation

• $ git clone git@github.com:kiki-le-singe/react-boilerplate.git
• $ cd react-boilerplate
• $ npm install

Gulp tasks

• $ gulp serve

Then serve the app on localhost:3000 with Browsersync and opens your default browser

• $ gulp serve --stub

Makes the same thing that the above command, except that the 'stub' option allows to enabled or not the retrieving of fake datas.

• $ gulp test

Runs tests located in /__tests__.

For now $ gulp test doesn't exist (Coming soon). You can to use the karma start command. It is useful for debug mode.

• $ gulp dist

Coming soon...

• $ gulp build

Coming soon...

• $ gulp docs

Coming soon...

• $ gulp plato

Coming soon...

• $ gulp changelog

Coming soon...

Included JavaScript libraries

• React
• REACT/ROUTER
• browserify
• jQuery
• Lo-Dash
• material-ui

Build Tools

• ESlint
• Babel

Included SASS libraries/framework

• Bourbon

A simple and lightweight mixin library for Sass.

• Bourbon NEAT

A lightweight semantic grid framework for Sass and Bourbon.

API

By default the root access for the API is http://localhost:3000/api. Available example: http://localhost:3000/api/tools

Sources

• Getting Started
• React tutorial
• material-ui

Tips and tricks

• mongo-express

If you use MongoDB, look at this node modules. It's an convenient admin interface for MongoDB.

• React Developer Tools

Allows you to inspect the React component hierarchy.

• Show me the React!

Highlight React components on the page.

Contexts

• Contexts in React
• Introduction to contexts in reactjs

Contexts allow to pass values through a tree without having to use props.

ES6 Classes

• React's Blog
• React's Docs
• Example of components in ES6
• React on ES6+

Autobinding/No Autobinding

• Autobinding
• No Autobinding

In React's class model you'll have to explicitly use .bind(this) or arrow functions =>. See also Can't get this.prop when use ES6 classes in React and Why this.setState is undefined in React ES6 class?

Experimental ES7 features

• Babel - What are the various transformers?
• Babel - How to use experimental ES7 features
• babelify

babelify - Set stage option to 0 for to have all ES7 experimental features

Encountered problems

• Fast browserify builds with watchify

Use foundation with browserify

• foundation with browserify

• browserify-shim

I no longer use the Foundation css framework but in case it can help you.