Setting Up Your Development Environment

A contemporary process is necessary for React development. React utilizes Node.js to run JavaScript outside of the browser and npm (Node Package Manager) to manage libraries, in contrast to standard HTML/JS files. Because of its debugging features and extensions, Visual Studio Code is the most widely used React editor.

Installing Node.js and npm

While npm facilitates the installation of React and other modules, Node.js enables JavaScript to execute on your computer.

Installation Steps:

  1. 1
    Go to nodejs.org
  2. 2
    Download the LTS (Long-Term Support) version.
  3. 3
    Run the installer (default settings are fine).
  4. 4
    Verify installation by running in your terminal:
javascript
          node -v
npm -v

Version numbers (such as v18.16.0) ought to be visible to you.

Setting Up VS Code

VS Code is a strong yet lightweight React editor.

Suggested Extensions:

  • ES7+ React/Redux Snippets for faster coding.
  • Prettier to help in auto-formatting.
  • For real-time previews of your code results, use the Live Server.

First React App

React provides two main ways to start a project:

Create React App (Legacy)

javascript
          npx create-react-app my-first-app

Vite = Faster & Modern Alternative

javascript
          npm create vite@latest my-first-app --template react

After installation, run:

javascript
          cd my-first-app
npm run dev

Your app results will be shown at http://localhost:3000.

Project Structure

Any basic React project contains

  • src/ which is your React components
  • public/ (static files like HTML)
  • package.json (lists dependencies)

Most times you will work in the src folder.

Exercise

Open your React application in VS Code, go to src/App.js, and try changing the text inside the <h1> tag. Save the file and see it update instantly in your browser.