Lesson 5 - Set up Dev Environment

Setup Environment

Visual Studio Code

Installation

1. download Visual Studio Code for your platform (Windows, Mac, Linux) and install

https://code.visualstudio.com/code.visualstudio.com

1. start VS Code

2. Press Ctrl+Alt+I or select Use AI Features with GitHub Copilot for Free... from the Copilot menu in the title bar

3. Select Sign in to Use Copilot for Free to sign in to your GitHub account and sign up for Copilot Free

4. Install VSC extensions :

   1. Prettier - Code formatter

   2. Theme oh lucy

   3. ES7+ React/Redux/React-Native snip

Verification

At Bash/Windows PowerShell terminal,

$code -v

Extensions

1. ES7+ React/Redux/React-Native snippets

2. Prettier - Code formatter

3. ESLint

4. HTML Boilerplate

5. Live Server

NodeJS

NodeJS Installation

Download the package and install latest Node.js

Node.jsNode.js

Update nodeJS Using the Node.js Installer (Windows and macOS)

use below npm command to upgrade npm to latest

$ npm install -g npm@latest
 
// Verify latest Installation update
$ npm -v

NVM Installation

Download and install NVM for Windows/Mac/Linux

GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.GitHub

Click on the nvm-setup.exe asset which is the installation file for the tool:

Open the file that you have downloaded, and complete the installation wizard.

Verification

At Bash/Windows PowerShell terminal,

$node -v

$node --help

$npm -v

$nvm -v

$nvm --help

Git and Git-Bash Terminal on Windows

To install Git Bash on Windows, go to the official Git for Windows website (https://git-scm.com/downloads/win), download the latest version, run the executable file, and follow the on-screen instructions, ensuring to select the "Git Bash" option during the installation process; essentially, you're installing the full Git package which includes Git Bash as a component.

Installation

How To Install Git Bash On Windows

• Go to the website: Navigate to the official Git for Windows website (git-scm.com).

• Download the installer: Click "Download" to get the latest version of the Git installer for Windows.

• Run the installer: Open the downloaded executable file (Git-2.47.1.2-64-bit.exe).

• Follow the prompts:

  • Accept the license agreement.

  • Choose the default installation directory.

  • Important: During the installation options, make sure to select "Add Git Bash to the PATH" or a similar option to access Git Bash from your command prompt, ensuring to select the "Git Bash" option during the installation process.

• Finish installation: Click "Install" and then "Finish" to complete the process.

Verification

// to verify Git was installed.
$ git version 

Generation of Disposable Temp Email

Visit https://temp-mail.org/en/ site to generate a temporary email for test.

Sign up and Sign in for Supabase

Go to https://supabase.com/dashboard/sign-up site.

Two options for sign up ::

• Continue with GitHub account or

• Use your email account and check your email for confirmation.

• After finishing sign up, now you can sign in with your credentials

Sign up and Sign In to Postman

Go to https://www.postman.com/ site

Enter your email address for Sign Up for free. Check your email for confirmation.

After finishing sign up, now you can sign in with your credentials either by Sign In with Google or email.

Sign up and Sign In to GitHub

Go to https://github.com/signup site

Use your email to create GitHub free account

• Email:

• Password:

• Username:Aklebek

Verify your account with visual or audio puzzle

Confirm your email address and enter code. You are all set and good to go.

Ground Up from the Base

Vite + React Project Creation

Step 1: Set Up the React App

1. go to vite.dev site and click get started (https://vite.dev/guide/).

   1. Vite requires Node.js version 18+ or 20+.
   2. check whether you already installed a right version of node.js

// Bash
node -v
npm -v

1. Open Bash/PowerShell terminal and create your working directory, ie. "react-sandbox". Change the directory to "react-sandbox" and install vite latest version.

S npm create vite@latest

Then follow the prompts!

• Project name:react-fun-facts-yourname

• Select a framework: > React

• Select a variant: > JavaScript

1. Change the directory to "react-fun-facts-yourname". And then install and run.

• Install any necessary dependencies (optional): While this basic app doesn't require additional libraries, you can install styling libraries like Bootstrap if needed:

// cd react-fun-facts-yourname
npm install
npm install bootstrap
npm run dev

1. Click : http://localhost:5173

2. Try our codebase example - static react app

Code base for react-fun-facts-yourname project

index.html

// index.html

<html>

   <head>
	<link rel="stylesheet" href="/index.css">
   </head>

   <body>
	<div id="????"></div>
	<script src="/?????.jsx" type="module"></script>
   </body>

</html>
```

Main.jsx

// main.jsx

import { ????? } from "react-dom/client"
const root = createRoot(document.getElementById("????"))

root.????(
    <main>
        <img src="./react-logo.png" width="????" alt="React logo" />
        <h1>?????????!</h1>
        <ul>
            <li>Was first release in 2013</li>
            <li>Was originally created by Jordan Walke</li>
            <li>Has well over 200K stars on GitHub</li>
            <li>?????</li>
            <li>Powers thousands of enterprise apps, including mobile apps</li>
        </ul>
    </main>
)

index.css

// index.html
body {
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    background: #27292c;
    color: white;
}

h1 {
    margin-top: 30px;
}

react-logo image

TemporaryComponent

// Main.jsx - Updated

import { createRoot } from "react-dom/client"
const root = createRoot(document.getElementById("root"))

root.render(
    <??????? />
)

function ??????() {
    return (
        <main>
            <img src="./react-logo.png" width="40px" alt="React logo" />
            <h1>Fun facts about React!</h1>
            <ul>
                <li>Was first release in 2013</li>
                <li>Was originally created by Jordan Walke</li>
                <li>Has well over 200K stars on GitHub</li>
                <li>Is maintained by Meta</li>
                <li>Powers thousands of enterprise apps, including mobile apps</li>
            </ul>
        </main>
    )
}

Challenge

Understanding the Difference between export default and export with Named Exports in JavaScript

In JavaScript modules, export statements are used to make functions, objects, or primitive values available to other modules. There are two main ways to export: export default and named exports. Here's a breakdown of their differences:

When creating JavaScript modules, there are two common ways to export code from a file: using export default and using export with named exports.

1. export default (Default Export)

• One per module: You can have only one default export per module.

• Import with any name: When importing a default export, you can use any name you want.

• Common use case: Typically used for exporting the primary or main functionality of a module.

Syntax:

• Exporting:

  JavaScript(JSX)

  // Method 1: Exporting a value directly
  export default function myFunction() {
    // ...
  }
  
  // Method 2: Exporting a variable
  const myVariable = "Hello";
  export default myVariable;
  
  // Method 3: Exporting an object
  export default {
      name: "John Doe",
      age: 30
  }

• Importing:

  JavaScript(JSX)

  import anyNameYouWant from './myModule'; // No curly braces
  
  anyNameYouWant(); // If it was a function
  console.log(anyNameYouWant); // If it was a variable or object

Example:

JavaScript(JSX)

// myModule.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// app.js
import greeting from './myModule'; // Renamed to 'greeting'

console.log(greeting("Alice")); // Output: Hello, Alice!

2. Named Exports

• Multiple per module: You can have multiple named exports in a single module.

• Import with the same name (or alias): When importing named exports, you must use the same name as the export, or use an alias with the as keyword.

• Common use case: Used for exporting multiple functions, objects, or values that are related but not necessarily the primary functionality.

Syntax:

• Exporting:

  JavaScript(JSX)

  //myModule.jsx
  // Method 1: Exporting declarations
  export function myFunction1() { /* ... */ }
  export const myVariable1 = 10;
  export class MyClass { /* ... */ }
  
  // Method 2: Exporting existing bindings
  function myFunction2() { /* ... */ }
  const myVariable2 = "World";
  export { myFunction2, myVariable2 };
  
  // Method 3: Renaming during export
  function myFunction3() {}
  export { myFunction3 as myRenamedFunction };

• Importing:

  JavaScript(JSX)

  import { myFunction1, myVariable1 } from './myModule'; // Curly braces are required
  import { myFunction2 as func2 } from './myModule'; // Importing with alias
  
  myFunction1();
  console.log(myVariable1);
  func2();

Example:

JavaScript(JSX)

// utils.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// app.js
import { add, subtract as minus } from './utils';

console.log(add(5, 3));    // Output: 8
console.log(minus(10, 4)); // Output: 6

Key Differences Summarized

Feature	export default	Named Exports
Number per module	One	Multiple
Import name	Any name	Same name (or alias)
Syntax (import)	import anyName from 'module';	import { name1, name2 } from 'module';
Use Case	Main functionality of a module	Multiple related functions, objects, or values

Export to Sheets

Which to Use?

• Use export default when you have a single primary export from a module, like a class or a function that represents the main purpose of the module.

• Use named exports when you have multiple related exports from a module. This improves code clarity and allows for more granular imports.

By understanding these differences, you can effectively structure your JavaScript modules and improve code organization.