Simple Starter Template for React, ES6, SCSS, Webpack and Live Reloading (React Hot Loader 3)
Switch branches/tags
Nothing to show
Clone or download

Readme.md

Simple Starter Template for React, ES6, SASS, Webpack 2 and Live Reloading (React Hot Loader 3)

The reason for doing other React starter template for single page applications (SPA) is because when I started to look into templates it took to me hours and hours of googling and testing different templates to have some starting point for my SPA application.
There are templates with hundreds of dependencies. Why not reduce to the minimal needed to start playing with React?
Let's try!

Features


Features NOT INCLUDED (TODOs)



Getting Started

Install pre-requisites

Clone Repo

  1. Get the url of your forked project.
  2. Click on "Clone or download" and Copy to clipboard the url ending on .git.
  3. Open your command line and go to your directoy
    You don't need to create a specific folder for the project, it will be created by git
  4. Clone your forked repo on your machine:
$ git clone https://github.com/username/react-es6-webpack-minimal-starter-template

Note: That will create a new folder called react-es6-webpack-minimal-starter-template with all the files in.

Install yarn

We will use yarn as a client for NPM registry, because that will avoid some conflicts on dependencies between environments.
Download and Install yarn (I have version 0.16.1 installed):

$ npm i -g yarn

Install Project dependencies

As we have yarn, instead of using npm i to install all our dependencies in our node_modules folder, we will use just yarn. Note: you need to be sure your are inside the project folder because yarn will look for package.json file.

$ cd react-es6-webpack-minimal-starter-template  
$ yarn

Open the project with your Development IDE

I use VS Code https://code.visualstudio.com Open the project using this command:

$ code .

Start development server with Hot Reloading

$ npm run start

Done!

Now you can edit the files .jsx and .scss and see how the browser automatically reflects the changes.

React Hot Loader 3 Image



Application Structure

Coming soon...



Contributing

Please feel free to add your own improvement. I am waiting your Pull Request (PR).

License

MIT License Copyright (c) 2016 Jose Quinto Zamora