Create a React Project From Scratch – Part I

I will guide you in this post from scratch, starting with a machine with no existing React configuration.

What will be done?

As we know, SDK development, tools, and modules receive daily improvements and fixes, so the same task that worked yesterday may not work today.

Let’s go to Work!

If you already have Node.js installed, you can skip this topic, which helps you install and configure Node.js.

Installation of node.js with Chocolatey

To install Node.js, we must access the official website and get the best environmental option. It’s recommended that we use a Long-Term Support (LTS) version. In this case, I used the LST: node-v20.12.2-x32.msi at https://nodejs.org/en/download.

After downloading, start the installation and follow the instructions.

Node.js Wellcome.

Mark the check box to install Native Modules automatically.

Native Modules setup screen.

What is Chocolatey?

It’s a package manager for Windows. It allows users to install, upgrade, and maintain software from the command line, similar to apt-get in Debian-based systems or brew in macOS.

Accept all items in setup.

Setup options.

Starting Installation

You will be prompted to elevate admin rights. Choose “Yes”:

After the installation, you will be prompted to install native modules. Confirm pressing any key.

Python installation

Native modules installation screen.

Chocolatey installation

Chocolatey install screen

Chocolatey* is a global automation solution streamlining the Windows computer setup and installation process, saving you time and effort.

A reboot may be necessary at the end. Type ENTER to exit. You need to restart the device yourself.

Reboot message.

Now, let’s create a project

Start a prompt on your PC, and choose a location like C:\MyReactApp.

After installation of Node.js is pretty easy to install, type this command.

npx create-react-app my-app

This is important, “my-app” is the name of your project/application.

After the installation, run the command to start the application.

cd my-app

npm start

The default location will be http://localhost:3000.

Now, you can edit your project using Visual Studio Code by opening the “my-app” folder.

Conclusion

The environment is not a great mystery if you have the steps to do it. I hope this article helps you to start programming in React. By the way, my digital card is made with React: https://www.jsmotta.com.

The deployment will be explained in Part II.

Chocolatey is a Windows software management automation program that creates built packages from installers, executables, zip files, and scripts. Its purpose is to remove the need for manual processes and streamline the installation process. Some salient features of Chocolatey are as follows.

• Automation: Software installation, upgrades, configuration, and uninstallation are all automated by Chocolatey. It is compatible with more than 20 different Windows installer technologies.
• Package management includes improved inventory management, versioning, and controlling dependencies and installation orders. It also promotes genuine package management.
• Integration: Chocolatey is compatible with SCCM, Puppet, Chef, and other remote administration tools and infrastructure management solutions.
• Simplicity and power: Chocolatey’s architecture combines the ease of use of a software deployment solution with the necessary power.
• Repeatability: You can replicate the installation process anywhere in the world with an internet connection and Chocolatey.
• Chocolatey is a global automation solution streamlining the Windows computer setup and installation process, saving you time and effort.