Build a New React App with Create-React-App in Just Minutes

Web Build a New React App with Create-React-App in Just Minutes

Build a New React App with Create-React-App in Just Minutes

5 min Read

Build with Radial Code

Radial Code Enterprise gives you the power to create, deploy and manage sites collaboratively at scale while you focus on your business. See all services.

Contact sales

Create React App

Create React App simplifies starting and running React projects, especially for beginners, by eliminating manual setup. It provides essential tools like Babel and Webpack instantly, allowing you to focus on coding. Additionally, it prepares your workspace for sharing your app with others. Different tools serve different purposes in React, such as Next.js for server-side websites and Gatsby for static sites like blogs. For more information, visit Create React App's GitHub page. Key Point: Create React App handles setup, freeing you to focus on coding and preparing your app for use by others.

Prerequisites:

To successfully proceed, please ensure that the following components are installed on your desktop:

Prior to proceeding, it is essential to have Node.js and NPM installed on your desktop. You can acquire Node.js from nodejs.org. Be certain that you have a minimum version of Node 14.0.0 or higher, as Create React App is compatible with Node 14 and later versions.
If Node is already present on your system, please make sure to update it to the most recent version available.
To ensure compatibility with Create React App, it's crucial to upgrade your NPM to at least version 5.2 or higher.
To work with project files, it's important to have a reliable editor. You can set up and start a React app using Visual Studio Code.

To find out which versions of Node and NPM you have, type this command into your command prompt:

$ node –v

To check our NPM version, we can use this command.

$ npm –v

How to Make a React App with Create React App:

It's time to start building a React app. Let's carefully read and understand all the steps before we start the development.

Sure thing! Here are the steps to build a React app using Create React App:

Install Node.js: You need Node.js to create React apps. Download it from the official Node.js website.
Start a New React App: Once you've got Create React App installed, kick off your new React project with this command:

npx create-react-app my-react-app

Replace my-react-app with the desired name of your app.

Navigate to Your App Directory: After the app is created, navigate into the directory of your newly created React app:

cd my-react-app

Start the Development Server: Start the development server by running the following command:

npm start

This command will start the development server and open your default web browser to view your React app. When you update your code, the changes will show up in the browser right away.

Build Your React App for Production: When you're ready to deploy your app, you can build it for production using the following command:

npm run build

This command will create an optimized production build of your React app in the build folder. You can then deploy this folder to a web server to make your app live.

That's it! You've successfully created a new React app using Create React App and are ready to start building your app.

That's it! You've just set up a new React app with Create React App.

Overview of React App Structure

Upon successfully installing the necessary project files, your project structure will likely resemble the following:

├── 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
├── logo.svg
├── serviceWorker.js
└── setupTests.js

You might be wondering what these files and folders are for. Let's go through each folder now.

README.md This is a markdown document containing a wealth of links and valuable insights to facilitate your utilization of Create React App.
node_modules This is a folder that contains all the code for the dependencies installed with Create React App. You won't need to open this folder.
package.json The static assets of our React app, like pictures, SVGs, and fonts, should be placed in a folder named public.
src This folder contains the source code and all the React-related files. We'll mainly focus on this to build our React project..

Note: Each time you make a new React project with Create React App, it makes a new Git repository Using git add . With the command git commit -m "your commit message", you can start saving changes to your app right away.

Launching the React App Development Server

To get your React project up and running, follow these simple steps:

Open the command line interface. If you're using Visual Studio Code, you can access the terminal by going to the "View" menu and selecting Terminal.
Execute the following command within your project directory: npm start

To begin with Create React App, run npm start in your app's directory. This starts the development server, and a browser window will open displaying your app at localhost:3000.

Your screen should resemble the image below:

Update the App's Metadata

To add an Open Graph meta tag, you'll need to edit the index.html file in your React app's public folder.

Go to the index.html file and look for the <head> tag. This is where we'll make our changes because META tags always go in the <head>.

To include a preview image, insert this tag:

<meta property="og:image" content="/src/assets/thumbnail.png" />

In the example above, we set thumbnail.png to be our preview image.

Next we will set the description of our site.

<meta  name="description" content="This is a blog about usage of meta tags" />

To add the site's title, we will use

<meta  property="og:title" content="You site title" />

For Twitter, we'll use a separate meta tag.

 <meta name="twitter:card" content="/src/assets/thumbnail.png" />

This sets the picture that shows up when you share the link on Twitter.

Your head tag should look like this when you're done:

<head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta property="og:title" content="Title" />
   <meta property="og:image" content="/src/assets/thumbnail.png" />
   <meta name="twitter:card" content="/src/assets/thumbnail.png" />
   <meta name="description" content="Description" />

   <title>Title</title>
 </head>

Installing Dependencies

To ensure your project runs smoothly, it's crucial to install all the necessary dependencies. Here's how to do it step by step:

Open your terminal: First things first, you need to access the command line of your operating system.
Navigate to your project: Use the cd command followed by the path to reach your project's directory.
Install the dependencies: If you're using npm, simply type npm install. This will look for the package.json file in your project and download all the listed dependencies.
Verify the installation: Once the process is complete, you can check that everything is installed correctly by running npm list.
Run your application: Now that you have everything you need, use the npm start command to launch your application.

Always remember to check the documentation of your dependencies for any additional steps or specific configurations required. Keep your dependencies updated to take advantage of improvements and security patches. Good luck with your project!

Importing Components

As a best practice, it's recommended to develop separate components to handle specific parts of your application's functionality rather than writing all your code inside the main App component.

Let's create a separate component for fetching and displaying our data. We'll name this component Posts. To organize our project, create a folder named "components" inside the src directory and place the "Posts.js" file inside it. The full path to our component file is "src/components/Posts.js."

In the Posts component, we will use the JSON Placeholder API to fetch posts, store them in a state variable named "posts," and then map over the data to display their titles and bodies. This helps keep your code modular and easier to manage.

Our post data is fetched and returned by the Posts component. To display this data in our app, we need to import it into the App component.

Let's go back to App.js and import the Posts component by referencing it from the Posts.js file located in the components folder. This way, we can use the Posts component within the App

After we run the command, the posts will appear below the header.

Styling App with CSS

To enhance the styling of your app, Create React App provides built-in support for CSS. Let's revisit the App.js. As you can see, we are importing an App.css file from the src directory.

You can modify the app's styling to achieve a better look and feel by editing the App.css file. The styles defined in this file will be applied universally to your entire app, not limited to the component in which the import statement is placed.

This approach allows you to maintain consistent styles throughout your application, ensuring a cohesive user experience.

Running the code will improve the look of our React app.

Remember, you can easily add advanced CSS features to your React project. This includes using CSS modules or SASS.

Conclusion

Create React App simplifies React development, especially for beginners, by eliminating manual configuration and providing essential dependencies like Babel and Webpack. We've discussed prerequisites, building steps, and key features such as live code updates and testing. Alternatives like manual setup with React and Webpack, Parcel bundler, and Next.js were also touched upon. Understanding project structure, leveraging live updates, and adopting best practices are crucial. Importing SVG files, managing assets, and deployment were also covered. Create React App is an excellent starting point, allowing developers to focus on coding.