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
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.
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:
npx create-react-app .
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:
Open your browser and visit http://localhost:3000 to open the React app you have just created.
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.