An Introduction To Create React App

React JS is a javascript library for User Interface development, introduced by the Facebook in 2011. Nowadays React is one of the most popular libraries for UI development. Currently, it has more than 90k stars on GitHub. It follows the component based approach which helps in building reusable UI components.

If you are starting working on React then you need to configure most of the things like Webpack to bundle your project, Babel to compile JSX to browser ready code etc. It takes more time to configure a project from scratch. This configuration may give the beginners a headache.

Seeing these problems, The Facebook has officially given a tool for React developers in mid of 2016 known as Create React App. CRA(Create React App) is a CLI which helps developers to start their project immediately. It is also very helpful for the beginners.

Installing Create React App

CRA provides a pre-configured boilerplate using which developer can immediately start writing their code. To get started with CRA you need to install Node.js with npm on your system. Then install Create React App globally using the command:

Creating Your App

After installing CRA globally on your machine you can create a new React project using CLI command create-react-app followed by your app name. For example:

$ create-react-app my-react-app

Running this command creates a directory with your app name and installs all dependencies.

You can run several commands in this generated directory.

  1. npm start or  yarn start: It starts a development server on your machine.
  2. npm test or yarn test: It starts test runner and tests your app with the jest.
  3. npm run build or  yarn run build: Create bundles of the app for production.
  4. npm run eject or  yarn run eject: CRA leaves the control over the app and provides developer to customize the configuration.

Using Create React App

Create React App uses Webpack to bundle the project and Babel to compile JSX to browser ready code. It also has a pre-configured test environment with Jest.

When you create a project with Create React App, it installs the latest version of React and React-DOM, the latest version of React-Scripts, a development dependency that manages all other dev dependencies that start, test and build your app.

Starting the app:

After running npm start command it opens your default browser and starts local development environment server on localhost:3000.

If there are any errors then you will be able to see it in your terminal console as well as in your browser. You may also search for the reported errors in GitHub repo of CRA.

CRA automatically reflected the changes, compile and run the app when developer saves the changes on the editor, and the compile time is very short so it reflects the changes very quickly and saves lots of time.

Testing the app

CRA comes with default jest configuration, using which developer can create and run test cases very easily. No configuration required to run the test cases. Use the `npm test` command to run the test cases.

This command will run test cases in watch mode. It means that if you make changes in your code then it will run test cases automatically with changes. Watch mode provides the following options to the developer –

The naming convention of test file should be .spec.js or .test.js or you should place your test files inside the __test__ directory. Jest automatically fetch those files and runs the test cases.

Build the app

The developer can create the build of the project by using single CLI command i.e npm run build.

Running this command a build directory will be created on the root of your project folder.

The build command transpile the React code to browser ready code. It bundles all javascript file to minified file for best performance from the app and reduces the size of the build.

Ejecting the App

This is one of the best features of the CRA. If you want all configuration of your project to be in your hand or you want to remove the control of the CRA from your app then you can run npm run eject command.

npm run eject command forks the configuration files of the create react app and put these configuration files in your app. After ejecting the app you can see there is a config file in the root of your project folder.

Config has all configuration file like webpack, jest etc. Now you can add your own configuration here.

Note:- After ejecting you can’t revert it. I think you should not eject if your project is small because once you eject the project then it is your responsibility to manage the configuration and all type of dependency updates. Eject your project when you are ready for it.

After ejecting you can run command start, test and build your project as discussed above as well as you can add your own scripts. You can customize the configuration according to your requirement.

Typescript Support

If you are familiar with typescript and you want to start to react development using typescript then Microsoft has provided a typescript version of the CRA. This boilerplate internally uses CRA and configured typescript on it. To create a typescript react app then run the command:

This will create an my-app directory where your react app is configured with the typescript support. It has start, test, build and eject command same as the Facebook create react app.

If you want to know more about it then Click here to go to the official GitHub page.

CRA is one best option to start your project quickly. It saves more development time and helps in rapid development.  If you want to know more about the Create React App tool then you can check this awesome documentation provided by the facebook.

About CauseCode: We are a technology company specializing in Healthtech related Web and Mobile application development. We collaborate with passionate companies looking to change health and wellness tech for good. If you are a startup, enterprise or generally interested in digital health, we would love to hear from you! Let's connect at bootstrap@causecode.com

Leave a Reply

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

STAY UPDATED!

Do you want to get articles like these in your inbox?

Email *

Interested groups *
Healthtech
Business
Technical articles

Archives