This week: component development tools!
One of the great things about our community is how committed everyone is to building a great development experience. There are a proliferation of great developer tools right now and in this issue I'll talk about a handful of them.
I think one of the reasons we see so many development tools for React is because the community has a leaning toward functional components and data architectures. For example, it makes it easier to write an inspector for your data architecture if all of your data is in a single state tree vs. if every component in your app hold their own state.
Below I'll show you some tools that will help you in your component development, wireframing, debugging, and testing.
Enjoy! 🐬
-- Nate
Code

enclave
enclave is an npm module which handles compiling your JSX and ES2015 code into browser-ready JavaScript. The idea is that you can use enclave instead of spending a week configuring webpack.

fil
fil is a playground for live-coding in your browser. It supports not only Javascript, but also Python and Ruby.
react-cornea
react-cornea is a testing utility for generating visual diffs of your React components. The idea is that you can visually identify regressions in your styles. It uses Phantom to take the screenshots and Imagemagick to do the processing.
react-asap
react-asap is a CLI tool to compile React environment for testing and learning purposes. React can be a bit tricky to get up and running for folks who are just learning and so react-asap
is an easy way to remove the barriers. Here's how you use it:
Create a sample app file:
/* app.js */
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('app')
);
Run the application
react-asap app.js
Open your browser at http://localhost:3000

redux-test-recorder
Redux test recorder is a redux middleware + component for automagically generating tests for your reducers based on the actions in your app.

react-a11y
My experience is that many developers don't give enough thought to accessibility in their apps. This is where react-a11y can really help: react-a11y identifies accessibility issues in your React elements.

remote-redux-devtools-on-debugger
If you're using redux and React Native this project can really help you: it lets you inject remote-redux-devtools / remotedev into the React Native debugger.

component-playground
component-playground is a tool for rendering React components with editable source and live preview.

OverReact
OverReact is a component GUI editor where you wireframe React components and then you can download the starter project.
html-to-react
html-to-react is a library that converts raw HTML to a React DOM structure. Usually we want to go the other way: React -> HTML, so why is this library needed? You might use this in the case where you have another team generating an HTML template which you'll be using. Not something you'll use everyday, but handy when you need it.
About
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.