For me, this fatigue is two folds. First, you need to keep up to date with the frantic pace of redux, react-router and friends and make sure you will be able to migrate your code to the new major versions.
Second, Webpack configuration is not always straight-forward. I know a lot of people that really want to see what React is like and play with it without having to cope with a lot of configuration up-front.
I have no solution for the first problem. To me, innovation in this community feels like a fantastic thing. Watching the github repos and following people on Twitter is my way to keep up-to-date with the latest improvements.
I also want to point out that the most used tools seem to be more and more stable. It is unlikely that redux or react-router will go through a full rewrite now. So relax. If you’re not able to update your dependencies every two days, it’s probably not the end of the world.
In this article, I will show you two ways to get started with React with zero configuration. So you can start hacking right away when you’re still fresh!
Quick prototyping with babel browser transform
So you need to get some React code out of the door now. You don’t care about hot reloading and want to write some React and ES2015 code in a web page.
Jim Sproch has a very cool solution for us.
<html> <head> <script src="http://www.jimsproch.com/react/future/react.js"></script> <script src="http://www.jimsproch.com/react/future/react-dom.js"></script> <script src="http://www.jimsproch.com/react/babel-browser.js"></script> </head> <body> <div id="container" /> <script type="text/babel"> ReactDOM.render(<div>Hello World!</div>, document.getElementById('container')); </script> </body> </html>
And that’s about it!
Every script tag with the
text/babel type will be transformed with babel.
So you have support for destructuring, arrow functions and, of course, JSX.
It will even work for external scripts so you don’t need to write all your
code in the page.
Now, Jim likes to work with the bleeding edge beta of React but you can easily
react-dom with production versions:
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
The downside of this solution, of course, is that the transform is executed by the client’s browser so this will be slower than pre-compiled Babel. And you don’t have hot reloading available.
But still, zero config.
A true React project with nwb
Nwb will take care of all the webpack and babel configuration.
Install it as a global package:
npm i -g nwb
You can then create a React project:
nwb new react-app my-nwb-app
And it will scaffold the application for you. It is a very simple application:
nwb: new react-app create .gitignore create .travis.yml create README.md create nwb.config.js create package.json create public/index.html create src/App.js create src/index.js create tests/.eslintrc create tests/App-test.js
No configuration outside of
nwb.config.js, which is almost empty.
Let’s start the application:
Try to modify
App.js… Hot reloading works!
Now let’s run the tests:
$ nwb test START: 18 02 2016 10:14:54.838:INFO [karma]: Karma v0.13.18 server started at http://localhost:9876/ 18 02 2016 10:14:54.846:INFO [launcher]: Starting browser PhantomJS 18 02 2016 10:14:56.139:INFO [PhantomJS 1.9.8 (Mac OS X 0.0.0)]: Connected on socket IHNx80uh9I6VW9fjAAAA with id 617985 App component ✔ displays a welcome message Finished in 0.01 secs / 0.004 secs SUMMARY: ✔ 1 test completed
We’ve got karma and coverage pre-configured so we can start TDDing right away.
And the best part, we can build the application and get an optimized version of the scripts.
$ npm run build > email@example.com build /Users/geowarin/dev/react/my-nwb-app > nwb build nwb: clean-app nwb: build-react-app Hash: 81e127933ddb73bbdfb4 Version: webpack 1.12.11 Time: 3234ms Asset Size Chunks Chunk Names vendor.js 131 kB 0 [emitted] vendor app.js 971 bytes 1 [emitted] app vendor.js.map 1.54 MB 0 [emitted] vendor app.js.map 4.13 kB 1 [emitted] app
Nwb also has support for sass, stylus and less.
Nwb has opinions. And that’s a good thing. For example, you write tests with Karma and that’s it.
Support for Babel 6 is not there yet so it’s not completely bleeding edge.
But you can serenely leave the hard part of configuring your app to Nwb. It’s got a very impressive test suite and coverage. You’re in good hands!
Feeling fatigued? I do not! I wish there were more projects like Nwb with strong opinions and one easy way to do things.
But it is possible to get started with React and even have a production-ready application with zero configuration.
Never used React? You have no more excuses. Get to work and help this community improve!