React Project Setup

<< Click to Display Table of Contents >>

Navigation:  Analogues > React >

React Project Setup

Installing Node.js

 

To create a React application, you first need to download and install Node.js from the official website.

 

Make sure to install the version appropriate for your operating system and leave all installation settings as default. Node.js is required for React development, including project building and dependency management.

 

To verify that Node.js and npm were installed successfully, open CMD or PowerShell and run the following commands:

 

node -v

npm -v

 

AD_4nXfRPyc-dO7rDheY5gE552wY43oNtw5QpjwPbqCiNBAQY9bUIcmMLR4SC9aNJF-r4nyP1PGwW6qqTCyBfu3MQpTGEMxZd0ZPRytixnD1lUCrzCAdP8kMly84XgO36W4s8cOp4YfygQ

 

Creating the React Project

In the command line, run the following command to create a new React project (e.g., guess-game):

 

npx create-react-app guess-game

 

This will initialize and generate a new project.

 

AD_4nXcKBgSmO0BnAVawSA4WUL90BJcksJ7t1NCvwiTxg8Zi-aH9YG3ncZiRP-MkM80LzjHEplkG84YyyYdZcNkp7gF0tPmS2GZxsG1ZRUFe6p7KnrRA9SNZ_E4DegoA-bkJdKZ7HIPKAw

 

Once the process is complete, you will see a message confirming that the project was created successfully.

 

AD_4nXdZsf2NHtLvRIpn6vT5MZT6YZObpUqOnNj1CRR-8lULxGv4WCBNLsjoH1IB82H_Rjch2eVrmnCWBZjkrxCAE3SZIxgriHfv0VxhKNLKy8_AztjYC3WTnIJRWTRYVKfOMl9e-TOxQQ

 

Next, move into the newly created project directory (e.g., guess-game):

 

cd guess-game

 

AD_4nXe3prQxBgH2Vqli_ZT4kFdlMcYY1-F7yx2i2b1c5lyPyVeq2aBss4w7IwVeJmRDohMXgpfffCCP7kZr4xqybZebzU3q3lKVOjXi_2hHmCjLVHPhtAVVcDC6R_rGGWFv_3ErkOuSdw

 

 

Preparing the Working Directory

 

For convenience, you can now open the project folder in Windows File Explorer. To do that, type:

 

explorer .

 

Now open the src folder — this is where the source code of your application lives.

 

clip0125

 

Next, you need to rename two files so they use the .jsx extension:

 

Rename App.js to App.jsx

Rename index.js to index.jsx

 

clip0124

 

This makes it clear that the files contain JSX syntax, which is common in React projects.

 

Tip: If you don’t see file extensions in File Explorer, enable “File name extensions” in the “View” tab.

 

AD_4nXf0OtkrUTUNVyg0NWDisGMKTtnfHm68lGonIv8mL7F4AumJfIpGqhLw6igwhkMGr1N0yKQblz8WmhC3zbhIvY1LJXwfk-jEHAbwl-Kx9wHrAOk2_dQ2-xCGjBly3dZHRuevTN7wLQ