SETTING UP REACT ON YOUR LOCAL MACHINE

With the rise of libraries and frameworks, including React, making ready-to-use front-end applications has never been easier.
React is a popular and widely used javascript library that is used to make website interfaces or UIs.
React is an excellent choice for developing Single-Page Applications (SPAs) due to its ability to load an entire app on a single page, enhancing user experience. It simplifies the creation of interactive user interfaces, allowing developers to easily build elements such as buttons, forms, and data displays.
React's performance is boosted by features like the Virtual DOM and various optimizations, ensuring that applications run efficiently. Also, React emphasizes reusability; components can be utilized across different parts of an application, ultimately saving both time and effort during the development process.

## Prerequisites

• Basic knowledge of web development technologies such as HTML, CSS, JavaScript
• A Code Editor and a Web Browser: a code editor like VS Code will enable you to write and manage your code with ease while a web browser allows you to view your app on the local host in real-time.
• Node.js and Npm(Node Package Manager): These are tools for managing external code libraries.

## Installing Node.js and npm
If Node.js and npm are not installed on your device, you cannot use React, as it relies on many smaller pieces of code (packages) to function. npm helps you easily install, update, and manage these packages. Node.js provides the environment for these tools to work. Here’s a step-by-step guide on how to install Node.js and npm.

• On your web browser, preferably, Chrome or Edge, go to the official Node.js website. https://nodejs.org/
• On the official Node.js website, there are 2 download options; LTS(Long Term Support) and the Current version with new features. It’s best to download Node.js with long term support.
• When the installer has been downloaded, you can successfully run it following the prior instructions from the installer. NB: check the “ADD TO PATH” option when it comes up to allow you to run Node.js on your terminal or command prompt.
• To verify you have installed both Node and npm into your device you can type the following command prompts in your terminal or common prompt. node -v & npm -v: These commands tell you if you have node and npm installed and what version you have installed and look something like this.

Creating a New React Application Locally with Vite

Vite is a build tool designed to make development easier and faster especially for JavaScript frameworks like React, Vue, and Svelte. etc. Unlike Create React App (CRA), Vite supports multiple frameworks and offers a much faster and more efficient way to bundle your code for the browser.
Now that you have Node.js and npm installed, we'll use Vite to set up our work environment.

• On the Vite official website (https://vite.dev/guide/), scroll down a bit and you’ll see a list of commands for scaffolding your first Vite project.
• In your terminal, type in the command provided on the website as seen below.

• Running that command in your terminal will prompt you to answer a few questions, including:
• Project name
• Choosing a framework, in this case, React.

• Select a variant, which can be either JavaScript or TypeScript, depending on which you prefer to use.

• Your project is now scaffolded, and a new set of commands is provided for you to execute in your terminal:

1. cd [Project Name]: This command changes the directory to the project folder you just created.
2. npm install: This command installs the required npm packages.
3. npm run dev: This command allows you to view your application in real-time on your local host using a link. If you are using Visual Studio Code (VSCode), it's recommended to run this command in the VSCode terminal for better accuracy.

• After installing npm packages, you can open your folder directly in VSCode by using the command code . in your terminal.

You can now use the command npm run dev to run your application in your web browser. This will allow you to see any changes you make to your codebase in real-time.
If you're reading this, you're probably just starting with React. Along with this guide, you may want to check out the React course by Bob Ziroll and FreeCodeCamp on Scrimba. https://scrimba.com/learn-react-c0e.