<aside> <img src="/icons/bookmark_gray.svg" alt="/icons/bookmark_gray.svg" width="40px" />

This is a workshop to learn the basic of react, you will learn: Basic of Component in React, UseState and UseEffect, and much more

</aside>

• 🧭 Navigation (open me!)

<aside> <img src="/icons/star_gray.svg" alt="/icons/star_gray.svg" width="40px" />

Hi! I am Kathy Chen :D, if anyone have any problem with any part of this workshop while going through it, and are not present in workshop day (or just any additional question in general)- please email me: [email protected]

</aside>

<aside> <img src="/icons/star_gray.svg" alt="/icons/star_gray.svg" width="40px" />

Powerpoint slides: slides

Figma: https://www.figma.com/design/HAPpUQ3F7L24dsjJPTXjcp/Web-Design?node-id=0-1&node-type=canvas&t=VIkyrEOFbeVLKT3K-0 (the design we will aim to create)

Video Demo: what we want to achieve in the end

</aside>

⛳ Pre-WorkShop setup (IMPORTANT)

Please have VsCode, Nodejs, and Git install Before coming to the workshop, You will have a easier time following along

• more info here

Getting Started! + small Intro on what we are making (showcasing video demo)

so we will be using an edited version of the vite react template, it’s easy and fast to use if anyone want to make their own website with react, here is a simple and short tutorial here usually people perfer type script because it will provide type safety and reduce errors but for the purpose of this workshop we will use javascript (.jsx files)

1. clone my repo here: https://github.com/Kathy331/React_WorkShop.git

   • img

2. open your vscode and click “clone git repository”, then paste the link into the popup

   • img

3. (changing your directory) open up your terminal and type in:

   cd my-app
   

4. installing node

   npm install
   

5. (running local host) in your terminal type in:

    npm run dev
   

   • control + click the localhost link (for window) / command + click the localhost link(mac)
   • you should see something like this now
   • if you want to stop the development server you can press “control” + C to exist out of terminal (not for now though)

6. Click the drop down for your “src” folder and click the App.jsx file. This is where the key parts of your app come together.

   • Let’s get familiar with the syntax (If there is more time we can continue talking about it)
   • Let’s change the color of the button

Coding Background+Card!

1. Let’s start by adding a background (this background is from unSplash: no need to download again but here it is if you like it). In the same css file, we can add in a background. Paste in the following code below the code in the #root block.

   App.css

    background-image: url('./assets/mushroom.png'); /*this picture come from the assets folder, try to find this picture! and maybe change it to a different one :D*/
    background-size: cover;
    background-position: center;
    
   

   • The #root element/block is the main container for the app, we often add background colors, images, and other base styles here.
   • This makes sure the entire app layout is set up with the same base styles, making it look consistent

1. Now let’s make a component! Open the components folder and make a file in the folder, name it “Cards.jsx” (right click on the component folder and click on new file)

   MAKE SURE THE SPELLING/ CAPITALIZATION IS THE SAME!!! “Cards.jsx” otherwise there will be import issues.

   1. a starter component look something like this:

   Cards.jsx

   function card(){
   
       return(
           <div>
   	        <p> hi I am a new components! </p>
           </div>
       )
   }
   
   export default card;
   

   

2. I made a json file (all the cards) for you but you would need to import it, make sure to put it at the top of the page, here is how to:

Cards.jsx

import cardInfo from './cardInfo.json';