BCSL657B Lab Setup

1. Go to the official Node.js website.
2. Download the latest LTS version for your operating system (Windows/macOS/Linux).
3. Install it by following the instructions for your OS. This will also install npm, which comes bundled with Node.js.

Step 2: Install Visual Studio Code (VSCode)
If you haven’t already installed VSCode, follow these steps:

1. Go to the Visual Studio Code website.
2. Download and install VSCode for your operating system.

Step 3: Open VSCode and Install the Required Extensions

1. Launch VSCode.
2. Install the following extensions for better development experience:
   • ES7 React, Redux/GraphQL, React-Native snippets: This extension provides useful React snippets to speed up development.
   • Prettier – Code formatter: It helps in keeping your code clean and formatted automatically.
   • Bracket Pair Colorizer: Helps visually distinguish matching brackets.
   • ESLint: For JavaScript/React linting.

To install an extension:

• Press Ctrl+Shift+X (Windows/Linux) or Cmd+Shift+X (Mac) to open the Extensions panel.
• Search for the extension by name and click Install.

Step 4: Create a New React Project
You can use Create React App to set up a new React project easily. Here’s how to do that:

1. Open the terminal in VSCode:
   • Press Ctrl+`` (backtick) to open the terminal, or use the menu Terminal>New Terminal`.
2. Create a new React app using npx (no need to install globally):

npx create-react-app my-app

Replace my-app with the name of your project. This will create a new folder called my-app with all the necessary files and configurations.

Step 5: Navigate to Your Project Folder
Once the create-react-app process finishes, move into your project directory:

cd my-app

Step 7: Start the Development Server
To see your React app in action, run the following command in the VSCode terminal:

npm start

Step 8: Edit Your Code
Now that everything is set up, you can start modifying the code:

1. Open src/App.js in VSCode.
2. Make some changes to the code. For example, change the text inside the <h1> tag or modify the App component to see updates live in the browser.