Lesson 5 - Set up Dev Environment

Setup Environment

Visual Studio Code

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

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

start VS Code
Press Ctrl+Alt+I or select Use AI Features with GitHub Copilot for Free... from the Copilot menu in the title bar
Select Sign in to Use Copilot for Free to sign in to your GitHub account and sign up for Copilot Free
Install VSC extensions :
1. Prettier - Code formatter
2. Theme oh lucy
3. ES7+ React/Redux/React-Native snip

NodeJS

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

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.

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.

// 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.

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

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.

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

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

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

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

Click : http://localhost:5173
Try our codebase example - static react app

Code base for react-fun-facts-yourname project

// 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

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.html
body {
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    background: #27292c;
    color: white;
}

h1 {
    margin-top: 30px;
}

// 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>
    )
}

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.

PreviousLesson 4 - Modern JavaScript (JSX) Patterns NextHands-on Practice

Last updated 6 months ago

Setup Environment

Visual Studio Code

NodeJS

Git and Git-Bash Terminal on Windows

Generation of Disposable Temp Email

Sign up and Sign in for Supabase

Sign up and Sign In to Postman

Sign up and Sign In to GitHub

Ground Up from the Base

Vite + React Project Creation

Step 1: Set Up the React App

Code base for react-fun-facts-yourname project

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

1. export default (Default Export)

2. Named Exports

Key Differences Summarized

Export to Sheets

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

1. `export default` (Default Export)