Create a New React Project with 08 Easy Steps — DS

5 min readJan 20, 2023

Making and building React apps is a breeze thanks to the package Create React App.

It is one of the simplest methods to start a new React project, making it a great option for both serious, large-scale apps and your own, individual projects.

We’ll go over each of the key aspects of Create React App step-by-step so you can quickly and easily create your own React apps.

Step 1: How to Install a Create React App

We must first open our computer’s terminal or command line before we can use Create React App.

If you have anpm version of at least 5.2, you can use the tool npx to start a new React project.

It is quite useful because npx allows us to utilize the create-react-app package without first having to install it on our machine.

Utilizing npx guarantees that we will be using the most recent version of Create React App when we finish our project:

create-react-app npx my-react-app

A folder called “my-react-app” will be created where we indicated on our computer when we run this command, and all the packages it needs will install automatically.

Step 2: Looking Over the Project’s Structure

Our project structure should resemble the following once our project files have been created and all our dependencies have been installed:

What are the purposes of all these files and folders?

A markdown document called README.md has a wealth of advice and links that can be useful to you as you learn how to use Create React App.
All the dependency-related code that Create React App has installed is housed in a folder called node modules. This folder won’t ever need to be accessed.
The scripts we require to execute our app manage by package.json, along with the node modules that are part of our project.
Our source code can be found in the folder src. We will work mostly on it to create our app because it is where all our React-related code will live.

Step 3: Run your React Project: How do it?

Open your terminal by selecting View > Terminal in VSCode once you have dragged your project into your code editor.

Run the following command to launch your React project:

The default browser on our machine will launch a new tab when we execute our project, allowing us to view our app.

The development server will launch at localhost:3000, and the opening page for our program will be visible straight away.

It originates in the src folder’s App.js file. We can start modifying the code for our app if we navigate to that file.

Step 4: How to Use the React Testing Library to Run Tests?

Your React project may be tested very easily with Create React App.

It contains all the necessary packages for running tests using the React Testing Library (@testing-library/react).

The file App.test.js in the src directory has a simple test. It verifies that the link with the words “learn react” appears correctly when our App component is used.

This command: can be used to execute our tests.

npm run test

You do not have to manually start and stop the test command when you execute it. If a test is failing, you can go into the app code, fix the problem, and then hit save. All tests will then run successfully.

Step 5: How to Modify the Metadata for the App?

By affixing it to an HTML element with the id value “root,” the package ReactDOM renders our application (particularly, the App component and every component within it).

You may find this element at public/index.html.

The div with the root id you can see above is used to attach the entire React app to this HTML page.

There is nothing in the body tags that need to be changed. To inform consumers and search engines about our app, it is useful to alter the metadata in the head tags.

Its meta tags for a title, description, and favicon picture are present (the little icon in the browser tab).

Additional tags include theme-color, apple-touch-icon, and manifest. These are helpful if consumers wish to add your software to the home screen of their computer or device.

Step 6: Installing Dependencies

Let’s take some post data from the JSON Placeholder API and display it in the post-sharing app we’re building.

We may send a request to obtain our posts using a dependency called Axios.

Axios will be included in our node modules folder after installation.

All the installed dependencies are immediately accessible from our package.

JSON file and observe that the “dependencies” section now includes Axios:

Although we will not be using it in this project, combining TypeScript with an existing Create React App project is fairly easy to do.

To build and test React, you simply need to install the typescript dependencies and the relevant type definitions:

npm install typescript @types/node @types/react @types/react-dom @types/jest

After that, all you need to do is restart your development server and rename any React files that end in js. tsx, and your TypeScript and React projects will be operational.

Step 7: Component Import Procedure

Let us develop a separate component to get our data and show it rather than writing all of our code inside the App component.

We are going to call this component Posts, so let’s make a folder called src to house all of our components and drop the Posts.js file inside of it.

Our component file’s full path is src/components/Posts.js.

Step 8: How to Create and Release an App

When we satisfy with our application and prepare to publish it, we may create it by using the command:

run build npm

This command will produce a production build that optimizes for our project, and it will report the files it has built along with their sizes. The build tool Webpack is producing the result. Because the size of our.js files can have a significant impact on the performance of our app, it is helpful to have an idea of the size of our app files.

Every build will change the unique string or hash that each chunk contains to prevent the browser from saving or caching any new deployments.

We probably would not be able to notice any modifications we made to our app if we didn’t have this cache-busting hash for each of our files.

Finally, with the aid of the npm package services, we can start our locally created React project.

This helps us find any flaws in the project’s final version before publishing it live on the web.

We may use npx to run serve without installing it globally on our computer, similar to create-react-app.

serve npx

Our application will launch using serve on a different development port than 3000. Localhost:5000 in this instance.

Unlock Your Digital Potential with Devstringx Technologies

If you are planning to start React project or looking for dedicated React developers so feel free to contact us & get a free consultation call with our experts!

Related Articles:-

Originally published at https://www.devstringx.com on January 20, 2023