An Introduction To Create React App
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.
yarn start: It starts a development server on your machine.
yarn test: It starts test runner and tests your app with the jest.
npm run buildor
yarn run build: Create bundles of the app for production.
npm run ejector
yarn run eject: CRA leaves the control over the app and provides developer to customize the configuration.
Using Create React App
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:
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.
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.
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 email@example.com