As create React, apps are maintained by Facebook; it can work on any platforms. Example: Windows, Linux, macOS, etc. create react project where you need to install the following things like:<\/p>\n
- \n
- Node version >= 8.10<\/li>\n
- NPM version >= 5.6<\/li>\n<\/ul>\n
Know how to check the current version of node and npm in the system by running code:<\/p>\n
$node -v<\/strong><\/p>\n
Check npm version in the command prompt<\/p>\n
$ npm -v<\/strong><\/p>\n
<\/span>Know how to install<\/span><\/h2>\n
If you want to learn how to install react using CRA tool, know the steps below<\/p>\n
<\/span>Install React<\/strong><\/span><\/h3>\n
- \n
- C:\\Users\\javatpoint> npm install -g create-react-app<\/li>\n<\/ul>\n
<\/span>Create a new React Project<\/strong><\/span><\/h3>\n
- \n
- C:\\Users\\javatpoint> create-react-app react project<\/li>\n
- C:\\Users\\javatpoint> npx create-react-app react project<\/li>\n<\/ul>\n
The above command will help to install the react and create a new project with the same name. Type command is given below:<\/p>\n
$ cd Desktop<\/strong><\/p>\n
$ npm Start<\/strong><\/p>\n
Open project by using visual studio code and on project editor. Check the structure below:<\/p>\n
Note: Below images source is\u00a0https:\/\/scotch.io\/<\/a><\/p>\n
![\"Create](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/08\/React1-2.png\" "\\"Create")
<\/p>\n<\/span>What comes with create-react-app?<\/span><\/h2>\n
Here, we can add more support for things like Sass or TypeScript. It can run with a single command and get new react apps which comes along with:<\/p>\n
- \n
- A recommended starting folder structure<\/li>\n
- Extensibility<\/li>\n
- Solid build setup with webpack and Babel<\/li>\n
- Script to run our React Application<\/li>\n<\/ul>\n
<\/span>What\u2019s a default way we can start with?<\/span><\/h2>\n
<\/span>1. Build Setup<\/span><\/h3>\n
Our react app needs to build a step to transpile and code something that browsers can read. With this, we can see many setups without using Create App React.<\/p>\n
- \n
- Add convenient folder structure<\/li>\n<\/ul>\n
If you want to know about files and folders available in the root directory then check below:<\/p>\n
- \n
- Node_modules: <\/strong>It comes with react library and other third-party libraries<\/li>\n
- Public:<\/strong> It holds public asset of application which contain index.html which mount the application on <div id=\u201d root\u201d> <\/div>element.<\/li>\n
- Src:<\/strong> It contains App.css, index.css, App.js, and serviceworker.js files. The App.js file is mainly responsible for displaying the output screen to React.<\/li>\n
- Package-lock.json:<\/strong> It helps in generating automatically operations where npm package modifies node_modules and cannot be published.<\/li>\n
- Package.json:<\/strong> It holds metadata which gives information to npm and allows to identify project and handle dependencies.<\/li>\n
- README.md:<\/strong> It helps in the product documentation for how to read about react topics<\/li>\n<\/ul>\n
<\/span>2. Build Scripts<\/span><\/h3>\n
Create React App, which comes with few scripts that help in development. Use scripts whenever we want to:<\/p>\n
- \n
- Run application script for Development<\/li>\n
- Build applications for production<\/li>\n
- A test application that creates tests<\/li>\n
- Add below code in package.json<\/li>\n<\/ul>\n
![\"Build](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/08\/React3-2.png\" "\\"Build")
<\/p>\nNow run above commands like shown below:<\/p>\n
![\"Build](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/08\/React2-2.png\" "\\"Build")
<\/p>\n- \n
- Start:<\/strong> Here, the command will start a development application. You can open the application in the browser<\/li>\n
- Build:<\/strong> One can bundle a production application and generate only a few files that can host users.<\/li>\n
- Test:<\/strong> Run test which comes with Create App React<\/li>\n
- Eject:<\/strong>\u00a0The eject gives access to the configure aspect for React application. Create React App with no longer handling the configuration for your application.<\/li>\n<\/ul>\n
<\/span>3. Add scripts to run applications<\/span><\/h3>\n
Take a look at what\u2019s running tests look like:<\/p>\n
![\"Add](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/08\/React4-2.png\" "\\"Add")
<\/p>\n<\/span>4. Add Scripts to bundle for production<\/span><\/h3>\n
For hosting the code for users, we need to bundle all code into a JavaScript file that users can use for loading. You can run the following files as coded below:<\/p>\n
npm run build<\/strong><\/p>\n
After successfully creating the new files, we need to provide the React app to our users. You can add new files to the build folder. Now host on a server and point users towards index.html file.<\/p>\n
![\"Add](\"https:\/\/websitelaravel.concettoprojects.com\/blog\/wp-content\/uploads\/2020\/08\/React5-2.png\" "\\"Add")
<\/p>\n<\/span>Wrapping up:<\/span><\/h2>\n
With Create React App one can configure own webpack and babel setups as it\u2019s one of the excellent tools for React developers<\/strong><\/a>. Now again use React App to start your applications which provide a solid base and keep info updated by the React team.<\/p>\n
- Build:<\/strong> One can bundle a production application and generate only a few files that can host users.<\/li>\n
- Start:<\/strong> Here, the command will start a development application. You can open the application in the browser<\/li>\n
- Public:<\/strong> It holds public asset of application which contain index.html which mount the application on <div id=\u201d root\u201d> <\/div>element.<\/li>\n
- Node_modules: <\/strong>It comes with react library and other third-party libraries<\/li>\n
- Add convenient folder structure<\/li>\n<\/ul>\n
- C:\\Users\\javatpoint> npm install -g create-react-app<\/li>\n<\/ul>\n