Fullstack React Issue 11 March 15th 2016

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.

Try out the live demo here

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.

Try out the live demo here

OverReact

OverReact is a component GUI editor where you wireframe React components and then you can download the starter project.

react-render-visualizer

React Render Visualizer is a tool to see what is (re)rendering and why.

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.

Subscribe with Email