New Way to Develop React App With Create React App (No Build Configuration)

New Way to Develop React App with Create React App (No Build Configuration)

Setting up Gulp, Webpack, Browserify, Babel, JSX, ES6, ES6 modules, hot reloading, … etc. manually - forget about it and no more fuss with it.

Inspired by the cohesive developer experience provided by Ember.js Facebook wanted to provide an easy way to develop React apps, they created create-react-app with the targets zero configuration.

Installation
You may need NPM installed and you can use NVM to easily switch Node versions between different projects.

The Node installation is only required for Create React App itself.

To install create-react-app module, run:

1
npm install -g create-react-app

Creating an App
To create a new app, run:

1
create-react-app geekhmer

It will create a directory called geekhmer inside the current folder. And inside that directory, it will generate the initial project structure and install the transitive dependencies:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
geekhmer/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

No configuration or complicated folder structures, just the files you need to build your app.

Run the App
Runs the app in development mode:

1
npm start

Open http://localhost:3000 to view it in the browser.

Run the Test
Runs the test watcher in an interactive mode:

1
npm test

Read more about testing.

Builds the App for Production
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. By default, it also includes a service worker so that your app loads from local cache on future visits.

1
npm run build

Your app is ready to be deployed. So far so good, That’s it!!! See ya!!! :)