luisjunco

Module 1:

• VS Code Shortcuts: https://gist.github.com/luisjunco/2c57a9f514a5773242afe8f96b342cbd

Module 2:

• React conditional rendering: https://gist.github.com/luisjunco/7eab10cd2991fab11a759add4a15b7cc
• React forms: https://gist.github.com/luisjunco/6c59bc3ea6a1d0b3a975d15ff2115fec
• React Router: https://gist.github.com/luisjunco/cbd1fe157c7f2f2b6b4983adbea9ae1e
• How to implement image upload in project2 (without backend): https://gist.github.com/Aleale81/d45c715aae448b981fa865cd2acf6176

luisjunco

LAB React Components

The main goal of this LAB is to practice creating and rendering React components.

Iteration 1: initial setup

For the initial setup, follow these steps:

luisjunco

Exercise - TypeScript + React: Components and props

Initial code

• https://stackblitz.com/edit/vitejs-vite-ppmuqk?file=src%2FApp.tsx

luisjunco

JS OOP Bakery exercise

In this exercise, you'll be creating a Bakery class using JavaScript. This class will represent a bakery and have some properties and methods to track the bakery's location, the number of cakes in stock, and the ability to bake cakes.

luisjunco

📁 | Create a parent directory

To keep things organized, create a parent directory:

• Navigate to the directory where keep your code (ex. navigate to your module3 directory).
• mkdir our-cool-project

NOTE: replace "our-cool-project" with the name you choose for your project 😉

luisjunco

README Project 3

Create 2 Readme files (one for the Frontend + one for the Backend). In each of them, add the sections below:

• Description
  • Brief description of the project
  • IMPORTANT:
• Explain very clear if the current repo is the Frontend (React) or the Backend (Express API).

luisjunco

README Project 2

• Description

  • Brief description of the project

• Instructions to run this app in my computer. Probably something like this:

  • git clone
  • how to install dependencies (npm install)

• in case you're using environment variables: explain that I'd need to create a .env file and add environment variables (remember to detail all the variables that I may need to create, if I need to create an account to get some credentials etc.)

luisjunco

README Project 1

• Description

  • Brief description of the project
  • You can also add screenshots 🤩

• Instructions to play

• Important: make sure that anyone with the link can play your game (if it is not trivial, include also instructions in the game itself)

luisjunco

MODULE 1

---

w3d1 Katas

Intro:

• Intro to Codewars (what is Codewars & why it's useful)

luisjunco

A: Element Variables (in your JavaScript)

function MyComponent(){

    let button;
    if (isLoggedIn) {
      button = <LogoutButton />;
 } else {