Skip to content
preservelog

Setting up Environment"

  1. Install Node.js and npm

Node.js is a JavaScript runtime that allows you to run JavaScript on your computer outside of a browser. npm (Node Package Manager) comes bundled with Node.js and is used to manage dependencies in your project.

Steps: a) Go to the official Node.js website (https://nodejs.org) b) Download the LTS (Long Term Support) version for your operating system c) Run the installer and follow the installation wizard d) Verify the installation by opening a terminal/command prompt and typing:

node --version
npm --version

These commands should display the installed versions of Node.js and npm.

  1. Create a new React project using Create React App

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

Steps: a) Open a terminal/command prompt b) Navigate to the directory where you want to create your project c) Run the following command:

npx create-react-app my-react-app

Replace “my-react-app” with your desired project name d) Once the installation is complete, navigate into your project folder:

cd my-react-app

e) Start the development server:

npm start

This will open your new React app in a browser, typically at http://localhost:3000

  1. Explain the project structure

After creating a new project with Create React App, you’ll have a directory structure that looks something like this:

my-react-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Let’s break down the key parts:

  • README.md: Contains basic information about the project and how to run it.

  • node_modules/: This folder contains all the dependencies installed by npm. It’s automatically managed and shouldn’t be modified manually.

  • package.json: Lists the project dependencies and contains scripts for running, building, and testing your app.

  • public/: Contains the public assets of your app:

  • index.html: The main HTML file where your React app will be mounted.

  • favicon.ico: The icon shown in the browser tab.

  • src/: This is where you’ll spend most of your time. It contains the React source code:

  • index.js: The entry point of your React app.

  • App.js: The root component of your application.

  • App.css: Styles for the App component.

  • index.css: Global styles for your app.

  • App.test.js: An example test file.

  • package-lock.json: (not shown above, but present) Locks the versions of installed packages to ensure consistent installs across machines.

When you start developing, you’ll mainly work in the src/ directory, creating new components, styling them, and importing them into App.js or other components.

This structure provides a solid foundation for building React applications, with a clear separation of concerns and all the necessary tools preconfigured.