🚀 Yet another React Starter DevKit 🌔
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
previews
src
.babelrc
.gitignore
.travis.yml
README.md
TODO
package.json
webpack.config.js

README.md

###⚠️ Deprecated - With the creation of an "official" boilerplate + cli, I do not intend to maintain this repo anymore ⚠️

React Starter DevKit

Build Status Dependencies Code Climate js-standard-style

A small boilerplate for lightning-fast prototyping 🚀 🌔

Preview

Featuring:

  • NPM
  • Webpack
  • React
  • Scss (-> PostCss)
  • Bootstrap (don't like bootstrap? Try the alternatives)
  • Babel
  • Standard.js

Extras:

  • React-HMR
  • React-router & History
  • Font-awesome

Getting Started

Check 🔮 Gitano-CLI for an even faster setup. 🚀

Install

1. Clone the react-starter project.

git clone https://github.com/juanmnl/react-starter.git

2. Change the folder (react-starter) name with your project name.

mv react-starter/ [yourProjectName]/

cd [yourProjectName]/

FROM YOUR PROJECT (ROOT) FOLDER

3. Remove the template .git file and add a fresh one.

rm -rf .git previews && git init

From this point this is your own project.
You can commit and push from 0 to your own repo.

Follow the instructions when creating a new repo or check How to create a repo.

4. Install dependencies

npm install

5. Run dev server http://localhost:8080/webpack-dev-server/

npm start

6. Check js style

npm run check-js

7. Build project

npm run build

–––– That's all folks! 😄 ––––

–––– Start building awesome things! 🚀 ––––

Alternative installs

No Css Framework

git clone -b no-css-framework https://github.com/juanmnl/react-starter.git

no-css-framework


Bulma flexbox-based Css Framework

git clone -b bulma https://github.com/juanmnl/react-starter.git

no-css-framework


Webpack Config File - Quick Tips

You can add an array of files to the entry (files that are not required anywhere else) :

entry: [ "./otherFile", "./app/app.js"]

If you need some kind of preloading like jshint, you can add a .jshintrc to your root folder (for configuration), the jshint-loader to package.json and 'preloaders' into the modules:

preloaders: [
  {
    test: /\.js/,
    exclude: /node_modules/,
    loader: "jshint-loader"
  }
]

Webpack resolves every .js file but if you want to use different extensions, you can set this after the modules:

resolve: {
  extensions: ['', '.js', '.es6', '.ejs', .. ]
}