Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react apps and learning react. Create React App installs all the packages and modules required for building a react app and lets you use the newest Javascript features. In a more straightforward way, it configures all the prerequisites for you, all you need is Node.js 8.1 or higher and npm 5.6 or a higher version.
Get Started quickly
Initially, you will need to install the Create React App on your terminal, for this you’ll have to type
npm install -g create-react-app
Previously if you have installed Create React App, then it is recommended that you uninstall it using the below command
– npm uninstall -g create-react-app.
This will make sure that the latest version of npx is being used
npx create-react-app my-app
This command will create a react Project in the directory. ‘my-app’ is the name of the project or file. This creates a folder with your file name, where you can navigate and start creating the app.
After creating the project use,
cd my-app
npm start
These commands will initialize the project and will open the localhost in your browser. (http://localhost:3000/) In the beginning, the localhost is set to preview a default page that welcomes you to the React app.
To start working on the project you, create a file that can build in the directory with the command,
npm run build
Zero configurations
No specific configuration is necessary for creating a react app. It automatically installs the tools like webpack and Bable. Such that you need not go through a complicated process for installing them. Just create a project with the help of the above commands and, you are all set to create a react app
Creating a react app
To create an application, you can use nvm-windows or nvm (for Mac or Linux). With these, you can also switch between node versions in projects. There are several methods for creating the application; you may choose one according to your comfort:
1) npm
npm init react-app my-app
This command will start the build procedure and download all the dependencies and base code.
Note: the npm init is available from version npm 6+.
2) npx
npx create-react-app my-app
npx commands are available from version 5.2+ to higher versions; for the older versions, there are different instructions to be followed.
3) yarn
yarn create react-app my-app
This command’ yarn create’ is available in yarn 0.25+.
Pick a template for your project
In Create React App, you can use templates to start creating a stunning app instead of beginning from zero. You can append a template by the creation command line
–template [template-name]
Templates syntax is written in the format of cra-template-[template-name]. in that, only the template-name has to be provided by you.
You can get a list of a wide majority of templates on npm, by searching for “cra-template-*”.
This consists of templates for any kind of react applications. You can get the template-name from the website which you can use for your react application.
These templates can provide a specific base structure for the application you are creating. Also, you can edit the templates according to your needs.
When you do not select any template and start coding then Create React App provides you with a default template that is utilized for building the interface.
However, choosing a template is much more convenient as it significantly reduces the coding length. With a predesigned template, you can design an app that could have taken several hours without it.
Building a Typescript App.
Create React is the quickest way to design a Typescript application. For building this application, you can use templates to make your job easy.
npx create-react-app my-typescript-app –typescript
This command tells the npm module to create a new Typescript application. Here, npx create-react-app is the name of the npm package, and my-typescript-app –typescript is the name of the file which is created in the project directory.
This command will install all the required dependencies that will be used in the project.
After this you need to rename the .js/ .jsx files to .ts/ .tsx and you are ready to code the app. You can change the names with this below command:
mv src/index.js src/index.ts
> Next, by “npm start” command, you can begin the development. Also, you can use templates to make this straightforward.
npx create-react-app my-app –template typescript
This command will append the template to your project. Writing ‘–template typescript‘ keyword in the creation command will do the job for you.
If you already have built a project and you want to add typescript, this can be done by following a different approach.
Package manager selection
You can select npm or yarn as our package manager for a specific project. While creating a new project, CLI uses Yarn for installing the dependencies.
But if you want to use the npm package manager, then you can change the manager by appending the command ‘–use-npm’ in the original creation command.
For instance,
npx create-react-app my-app –use-npm
The output of the file creation. After creating the project file in the directory by using the above methods, a new folder called ‘my-app’ will show up.
This folder will contain the initial structure of the app and all the transitive dependencies. The program structure will look like this:
“my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js”
The structure of the project consists of the main three folders
-
-
- public,
- src,
- root folders.
-
Public folder: Most of the data in the public folder is from the web browser. The browser you are using can access the folder for necessary information. It has the assets that are integrated into the react app with less hard work.
Src folder: This folder consists of all the crucial components of the app. This is the place where the majority of the coding is done; components are created inside the src folder.
Root folder: Root folders are mentioned at the top of the structure. They consist of the configuration files that are used while building the react application. ‘node_modules’ and ‘package.json’ are the root folders in this project. The majority of the configuration files are stored in the package.json folder.
With the use of Create React App, complicated procedure and coding is avoided. The file thus created is also well arranged, and you can begin with the app after the installation is completed.
With this command, you can open the project
cd my-app
Scripts
Some built-in commands can be run in the created project. For executing any script in create react, you will have to follow a syntax:
npm run script_name
In the syntax npm run is the keyword and the further is followed by the name of the script. Some specific commands can also be executed without mentioning the ‘run’ part from the syntax.
npm start
(or)
yarn start
This command runs the app in the development mode and launches the localhost in the browser window with the URL “http://localhost:3000”. Also, this command initializes the webpack and Bable for the project.
More significantly, this command compiles all the data of the code that includes error checking, compiling for Sass, and building a Javascript package for the coding part.
This Javascript package is then loaded in the public/index.html file and then to the browser.
The changes made in the code will be updated in the DOM, and the page will reload immediately.
In the console you are using, you will be able to see the build errors and lint warnings.
Npm test
(or)
yarn test
This command runs the test watcher. Jest is the test watcher in Create react app that is launched in an interactive mode.
When the code is executed, Jest only tests the files that have been changed since the last test run. This feature increased optimization and speed while testing.
This command is one of the codes that does not require the run part for execution. You can disable this function and force Jest to run tests on every file by pressing “a” in the watch mode.
npm run build
(or)
yarn build
This is also a CLI command that runs the custom scripts created in the file package.json. The app in the build folder is utilized for building the app.
It arranges the app for production mode and optimizes it for the best utility. The files mentioned in the build app are hashes, and your react app is now ready to be deployed on distribution platforms.
Conclusion
‘Create react app’ is the most convenient way for building a React app with the most minimal experience with React. It has a very minimal setup procedure and coding. With the use of templates and design tools, a developer can get extensive flexibility for developing a React app. Also, it has various other features like hot reloading, component-based programming, code reusability. These functionalities make Create React app one of the simplest tools for building a react app.