Yet Another ReactJS Component Playground <3
- Live browser reloading with Browser-Sync.
- CSS-preprocessing and minifying with Sass and Minify-CSS.
- Grid Layout with Susy-Sass and Breakpoint Handling with Breakpoint-Sass.
- ES6 & JSX compatibility with Babelify.
- Bundling with Browserify.
- Linting with EsLint and Babel-EsLint (If you're using Atom Text Editor).
- Clone repo into directory.
bower install and
- Open up your text editor.
cd ~/Documents/DevWorkspace/ && git clone email@example.com:gerardmrk/react-test-field.git ReactTestField && cd ReactTestField && npm install && atom . && gulp
- Main Parent Component is
- Child components can be placed in
- 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!
- Main SCSS file is in
- 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.
- The .eslintrc and .eslintignore is redundant if you're not using Atom.
Things to fix:
- 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.
- 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.