React.js Webpack Starter

A React.js starter kit featuring React.js (JSX, ES6, Babeljs, PostCSS, ReactHotLoader, and Webpack) by Grégory D'Angelo for EloquentWebApp.

If you're looking to learn React.js in depth see The Complete ReactJS Developer Course : Build Modern UI

This seed repo serves as a React.js starter for anyone looking to get up and running with React.js fast. Using a Webpack for building our files and assisting with boilerplate.

• Best practices in file and application organization for React.js.
• Ready to go build system using Webpack and Babel for working with JSX and ES6.
• A great React.js seed repo for anyone who wants to start their project.
• Style with PostCSS
• Tweak React components in real time with React Hot Loader

Quick start

Clone/Download the repo then edit React components inside /src/components

# clone the repo
git clone https://github.com/gdangelo/react-starter.git

# change directory
cd react-starter

# install the dependencies with npm and bower
npm install && bower install

# start the server
npm start

go to http://0.0.0.0:3000 or http://localhost:3000 in your browser

Table of Contents

• File Structure
• Getting Started
  • Dependencies
  • Installing
  • Running the app
• Support, Questions, or Feedback

File Structure

We use the component approach in our starter. Each component lives in a single folder with each concern as a file: style and component class. Here's how it looks:

react-starter/
 ├──build/                     * Folder for compiled output
 │
 ├──src/                       * Source files that will be compiled to javascript
 |	 ├──components/            * React components
 │   │  └──variables.scss      * Global variables for styles
 │   │
 │   └──index.js               * Entry file for the application
 │
 ├──tools/                     * Build automation scripts and utilities
 │	 ├──build.js               * Builds the project from source to output (build) folder
 │	 ├──bundle.js              * Bundles the web resources into package(s) through Webpack
 │	 ├──clean.js               * Cleans up the output (build) folder
 │	 ├──run.js                 * Helper function for running build automation tasks
 │	 ├──start.js               * Launches the development web server with hot reload
 │	 └──webpack.config.js      * Configurations for bundles
 │
 ├──index.html                 * The index HTML page that includes the bundle
 ├──.babelrc                   * Babel options file use to specify presets and plugins
 ├──package.json               * What npm uses to manage it's dependencies
 └──bower.json                 * What bower uses to manage it's dependencies

Getting Started

Dependencies

What you need to run this app:

• Node.js v5.0 or newer
• npm v3.3 or newer (new to npm?)

Installing

• clone the repo
• npm install to install all npm dependencies
• bower install to install all bower dependencies

Running the app

After you have installed all dependencies you can now run the app. Run npm start to start a local server using webpack-dev-server. The app will be server at http://0.0.0.0:3000.

Other commands

build files

npm run build

clean build folder

npm run clean

Support, Questions, or Feedback

Contact me anytime for anything about this repo or React.js

• Twitter: @gdangel0
• Email: [email protected]
• Codementor: @gdangelo

---

enjoy — Grégory D'Angelo for EloquentWebApp