Search

Home > Coder Catchup > Episode 079 - React your next project in 1 command
Podcast: Coder Catchup
Episode:

Episode 079 - React your next project in 1 command
Category: Technology
Duration: 00:08:05
Publish Date: 2016-07-25 19:30:00
Description:

https://github.com/facebookincubator/create-react-app Create React apps with no build configuration.

Getting Started: npm install -g create-react-app

Creates simple commands: - create-react-app - "npm start" to launch the app with hot reloading in a browser - "npm run build" builds the app for production usage in a "build" folder - If you have had enough of the zero config and want to go out on your own run "npm run eject" to get all the webpack files node modules etc localised for the project

Folder structure is nice my-app/ README.md index.html favicon.ico node_modules/ package.json src/ App.css App.js index.css index.js logo.svg

What does it give you if you eject

If you use the base functionality there is only 1 dependency, react-scripts, but when ejected, you get the following:

autoprefixer, babel-core, babel-eslint, babel-loader, babel-plugin-syntax-trailing-function-commas, babel-plugin-transform-class-properties, babel-plugin-transform-object-rest-spread, babel-plugin-transform-react-constant-elements, babel-preset-es2015, babel-preset-es2016, babel-preset-react, chalk, cross-spawn, css-loader, eslint, eslint-loader, eslint-plugin-import, eslint-plugin-react, extract-text-webpack-plugin, file-loader, fs-extra, html-webpack-plugin, json-loader, opn, postcss-loader, rimraf, style-loader, url-loader, webpack and webpack-dev-server

Limitations Some features are currently not supported:

  • Server rendering.
  • Testing.
  • Some experimental syntax extensions (e.g. decorators).
  • CSS Modules.
  • LESS or Sass.
  • Hot reloading of components.

Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.

Great video demo by Simonswiss on YouTube: https://www.youtube.com/watch?v=3TX90RSfeQk
Total Play: 0