How To Create React App In Current Directory

Getting started is always essential. Because a good beginning makes a good ending, having a good start will give you more inspiration to complete your journey. So in this tutorial, I will try to show you the easiest way to create a React app in the current directory and the first step to start learning this language.

The solution to create React app in current directory

Let’s create a file called react-first_project and go inside. You can open New Terminal in Terminal.

Or simply with ( Ctrl + ` ) keyword.

First, at all you have to check whether your npm is downloaded or not by:

npm –v

If it shows something like:

8.15.0

The name of the version is okay. If not, I recommend you download NodeJS first. It will also download npm (node package manager) and npx. This will help you to manage to install or uninstall the framework and library automatically.

Then you can run this command “npx create-react-app project_name”. This is an indication that it is running normally:

This is the result :

You can start your project with the command:

cd my-app
npm start

Or you can also create a new react app in your current directory with “npx create-react-app”. But make sure your current directory’s name is without capital letters. It will also work.

You can remove all redundant part and then you have this two file.

Example:

function App() {
  return <div className="App"></div>;
}
 
export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
 
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Here you can make your first code line inside the div element inside the App.js file. Here the App function is a function component. And you must remember that you always have to wrap all your elements inside one element, which is the root element. If not, the error will happen. 

Example:

function App() {
  return <div className="App">
    <h1>Hello From Learn Share IT</h1>
    <h3>I like React JS</h3>
  </div>;
}
 
export default App;

Output:

Summary

In this tutorial, I showed and explained to you the way to create a React app in the current directory. You can simply download Node JS then use the command “npx create-react-app”.

Maybe you are interested:

• Updating state when props change in React
• Concatenate strings and variables in react
• Get the current URL and Pathname in React

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm