react-component

A simple development process for reuseable react components written in ES6.

Assumptions

This repository gives you a starting point if you want to:

• develop reusable components independently
• use browserify
• write in ES6 using babelify
• use JSX
• write tests with tape
• maintain no separate css file, but use inline styles with react
• use simple npm scripts as a build process
• adhere to AngularJS Commit Message Conventions (no pun intended)
• be able to understand the system and code in this boilerplate in 5 minutes

Get started

Clone this repo, change the git origin to your repository, change package name (and version) in package.json and install:

git clone https://github.com/excellenteasy/react-component.git
cd TK
git remote set-url origin [email protected]:USERNAME/OTHERREPOSITORY.git
vim package.json
npm install

You might also want to remove this README and write your own.

Usage

You will most likely only need these one task: npm run serve: sets up watchify and a livereload server; opens in your favorite browser

If you develop multiple components and run into EADDRINUSE issue, you can change the port for the livereload server with these two commands:

npm config set component:lrport 35730
npm config set component:port 8081

These settings will persist in the repo, so you can change ports this way to avoid reusing the same port.

How does this work under the hood?

Important files

• index.jsx: This is your component, exported as an ES6 module. You can use ES6 and JSX syntax.
• test.js: Tests for your component go here. You can use ES6 here as well.

Remember: The only two files you should ever need to work on are index.jsx and test.js.

Inside the code

If you look in the source files, you will notice the ES6 module syntax. This is how you should export and consume your component. For an example on how a component is consumed, see example/app.jsx.

Build process

How is this wired up under the hood? We use npm as a build system. The serve task creates a browserify bundle of example/app.jsx, which consumes the component. If then sets up watchers and livereload and opens the "app" in your favorite browsers. All of these jobs are completed by different node executables, which you can find in the devDependenceis in package.json.

Using simple node executables instead of complex Grunt or Gulp tasks makes it easy to reason about what is happening. If you know how to make the process more transparent or comprehendable, please open an issue/PR.

Contributing

While I'd call this approach to component development "opinionated", that is no excuse to not take advice from others or keep improving. Please open an issue to discuss improvements/fixes or even better send a Pull Request. Thank you :)

License

MIT License 2015 © David Pfahler and contributors