a blog for those who code

Wednesday 4 January 2017

Start React projects with Create-React-App

In this post we will be discussing about starting react projects with Create-React-App with no build configuration. Create-React-App a CLI tool from Facebook which will allow you to generate a new React project and use a pre-configured Webpack build for development.

Its a automation tool for building your React app. It does not have any configuration file, it has only react-scripts build dependency in your package.json.

Get Started


To get started, run the follwoing commands :

npm install -g create-react-app
create-react-app FirstReactApp

Once done you will get the below output which says that you have created your app successfully.


If you will see the project structure, it looks like below and package.json has only one dependencies which is react-scripts in package.json.


Start a development Server 


First thing it to start a local development server using the command npm start which will fire up a Webpack development server with a watcher to automatically reload the application once you change something.


Now if I changed something in App.js and it breaks, it will automatically run a test and show it to you, if its failed to compile


Then there are other options as well like :

npm build : Which will prepare your app for production by correctly building React in production mode and also minify your code.
npm eject : At anytime during the development phase if you want to opt-out of the configuration provided by create-react-app you can use this command. It will take all of the default configuration and build dependencies and then move them into the project itself. Thus now you will have the ability to modify any of the default configurations you were given by create-react-app.

If you are looking to start a new React project look no further because Create-react-app will allow you to quickly start working on your application instead of writing yet another Webpack config.

Please Like and Share the CodingDefined Blog, if you find it interesting and helpful.

No comments:

Post a Comment