You can create a React app in the current directory with simple commands. Learn more about the steps below.

Create A React App In The Current Directory

create-react-app

React doesn’t require you to use a toolchain to create and develop a React app. You can opt for using React in its simplest form – inside the <script> HTML tag. However, this isn’t our recommendation.

The React team suggests Create React App, created by Facebook, as the development environment for newcomers and those who plan to create only single-page apps.

This toolchain doesn’t allow you to enjoy JavaScript’s latest features but also optimizes your code for production and offers a nice development experience overall.

If you have create-react-app previously installed on your system with:

npm install -g create-react-app

you should remove it to make sure npx and create-react-app both have the latest versions. Read this guide if you see the “npm command not found” error.

Use npm or yarn to uninstall create-react-app from your development environment:

npm uninstall -g create-react-app

yarn global remove create-react-app

Move To Your Directory

Make sure the current directory is empty as create-react-app will write plenty of files into this location. The best way to guarantee this is to create a new directory and change the working directory to it before creating your React app.

Open your terminal of choice and enter these commands:

mkdir ittutoria

cd ittutoria

They work on Linux shells and Windows’ PowerShell and Command Prompt. 

Create A New App

To install and initialize create-react-app in the current directory, you have several options:

With npx:

npx create-react-app .

With yarn:

yarn create react-app .

The dot in the above examples represents the current directory. Also known as the working directory, it is where the process of your shell is currently located.

By default, create-react-app will install all necessary dependencies to create and run a React application. You should have Node version 14 or later on your system.

We recommend npx – the package runner of npm. However, it has only been available since npm 5.2. If you have npm 5.1 or earlier, you can use npm instead:

npm install -g create-react-app

create-react-app .

It is important to note that the Create React App toolchain doesn’t handle databases or backend logic. You can hook its frontend build pipeline to any backend you prefer.

Create A New App With A Template

If you can also use a template to create a new React app. By default, create-react-app uses the base template if you don’t provide any.

To select a template, append the template option to the npx command (template-name is the name of the template you want to use):

npx create-react-app . --template [template-name]

Create A New TypeScript App

If you want to create a TypeScript in the current directory instead, use the –template typescript option:

npx create-react-app . --template typescript

Remember that this is applicable only when you haven’t created the app first. You will need to use some techniques to add TypeScript to an existing app.

Start Your App

After creating your React app with create-react-app, you can start it in the development mode immediately without any settings:

npm start

Open your browser and visit http://localhost:3000 to open the React app you have just created.

Summary

You can create a React app in the current directory with the create-react-app toolchain. It can take care of the task and set up a comfortable environment for building a single-page application or learning React.