Skip to content
Testing stage for React components
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Yet Another ReactJS Component Playground <3


  1. Live browser reloading with Browser-Sync.
  2. CSS-preprocessing and minifying with Sass and Minify-CSS.
  3. Grid Layout with Susy-Sass and Breakpoint Handling with Breakpoint-Sass.
  4. ES6 & JSX compatibility with Babelify.
  5. Bundling with Browserify.
  6. Linting with EsLint and Babel-EsLint (If you're using Atom Text Editor).


  1. Clone repo into directory.
  2. Run npm install, bower install and gulp.
  3. Open up your text editor.
  4. Play!


cd ~/Documents/DevWorkspace/ && git clone ReactTestField && cd ReactTestField && npm install && atom . && gulp


  1. Main Parent Component is TESTFIELD/main.jsx.
  2. Child components can be placed in TESTFIELD/components.
  • The main React.render method is in app/assets/scripts/app.jsx, in case you need to modify it directly.
  • Reminder: Don't forget to import/require React at the start of each component's JS file!
  1. Main SCSS file is in app/assets/styles/butter.scss.
  • Feel free to add CSS styles inside the components itself.
  • Uncomment the RESET section in the main SCSS file if you'd like to implement reset.css.
  • Default layout is 12 grids (Initialised in the main file). Use the span keyword to indicate how many columns your component should take up (refer to susy-sass docs).
  • You probably don't actually need Breakpoint-sass. I just added it in for completeness-sake. I'm weird.
  1. The .eslintrc and .eslintignore is redundant if you're not using Atom.
  • If you're using Sublime, you could probably use that .eslintrc file to lint with ES6 rules. But it's up to you to configure it accordingly.
  • Caution: If you're planning on using the .eslintrc rules to lint your file, note that it is very ES6-centric (if that's the word I'm supposed to use). Feel free to disable the ES6 rules or tone down the rules' warnings.

Things to fix:

  1. Currently, while the browser-reload for scss file modification happens almost instantaneously, it takes a few seconds for the browser to automatically reload after every saved changes to your JSX files. It's probably to do with the fact that it has to uglify every time it's changed. You can remove that part in the Gulpfile if you like.
You can’t perform that action at this time.