Creating a React application has never been easier with the help of create-react-app tool, a development environment set up for you. This tool was built by Facebook’s team and it offers a modern build setup with no configuration required. Being a powerful tool, create-react-app gives you a boilerplate template to create a react app immediately without spending too much time on webpack configuration or other technical setbacks.
In this article, we will walk you through the process of creating a new React application via create-react-app step by step. Also, we’ll touch on how to use some of its libraries and functions.
Create React App
npx create-react-app my-new-app cd my-new-app npm start
Understanding the Tool
When you install and run create-react-app, it sets up a basic directory structure with predefined scripts in the package.json file. These scripts come with everything you need to build, test and start your app. The beauty of this tool is that all the complexities are hidden which allows you to focus on the code rather than the environment.
This tool also sets up live development server that will automatically reload your application whenever you make changes to the code.
Directory Structure and Important Files
- package.json: All the dependencies of your project along with scripts to build, test and start your application can be found here.
- node_modules: Houses all the packages your project depends on.
- public/index.html: Main HTML file that gets loaded when someone visits your site. It contains a div with the id of root where your React app will mount to.
- src/index.js: Entry point of your React app.
Adding Libraries
Adding libraries to your project couldn’t be any easier. For instance, if you wanted to add React Router to your project, you would simply run the command npm install react-router-dom and then import it in your files as needed. The module bundler in the background takes care of making sure everything gets included in the final build.
Customizing your React App
Customizing your newly created React application is straightforward. First, in the src/App.js file, you can modify the existing code to suit your application needs. Furthermore, you may add new .js files for your components and import them into App.js for use.
In conclusion, create-react-app is a handy tool to set up a new React project with no build configuration. It comes with a modern build setup, dev server, and sensible defaults, which lets you focus on writing the code, leaving the build tooling up to create-react-app. Remember, should you need to customize your build setup, you can always run npm run eject to do so, but for most applications, the defaults provided should be more than sufficient.
