Create a React App is too easy now!

Reading Time: 2 minutes

Since a few days Facebook has its official tool to create a React web application. Gulp, Grunt, Webpack, Browserify, Babel, ... forget about it - no more fuss with it. It's all too easy now!

Just do this:


npm install -g create-react-app
create-react-app myAwesomeApp
cd myAwesomeApp
npm start

This creates a fully functional React application with the following initial structure:


myAwesomeApp/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

So, your entry point is App.js, which is a simple React Component. Running

npm start

spawns a local Http server on port 3000, including a watcher and browser sync feature.

react_tool

This is how the App looks like ( nearly ūüôā ) on its first run

The app is written in ES2015 and transpiled using Babel, which may cause some initial confusion while debugging, but it takes just one minute to get into it:

The code looks a bit messy in Dev-Mode.

Transpiled ES2015 code and additional meta-code from webpack code may cause initial confusion, but it's easy to go through it when debugging.

 

When your app is ready to deploy you just have to run

npm run build

and the entire app is being optimized and bundled in the ./build folder. It is completely ready to deploy. The initial app has about 40(!)KiB (gzipped js-File) only.



> react-app@0.0.1 build c:\coding\devbutze\projects\react-app
> react-scripts build

Successfully generated a bundle in the build folder!

You can now serve it with any static server, for example:
  cd build
  npm install -g http-server
  hs
  start http://localhost:8080

The bundle is optimized and ready to be deployed to production.


The deployed App in the browser.

About 40 KiB gzipped!

 

For power-users another nice option is the eject feature. This way the create-react-app-Tool serves as project generator only, and copies the project and its dependencies in another folder, so you can customize as you want.

Simple and Minimal

The tool itself is kept as simple as possible, and the result is as simple as the tool. No Router, Flux, Redux, Relay or other useful things...it does not over-complicate the things. When adding more dependencies, Webpack cares about it, and you can completely focus on coding. This is an incredible tool, as I know how cumbersome it could be to setup a React project. Probably, there are hundreds of starters out there, but many times the starters have complex structures and add additional tools,  which not everybody needs nor understands, and/or aren't up-to-date anymore (as my own one). Now, even newbies can start easily. Great Job, Facebook.

Facebooktwittergoogle_plusredditpinterestlinkedin

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *