Skip to content

vsb-js/template-lab-06-2023w

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

Lab 06 - Basics of React

Tasks

1. Create and run basic app

  1. Init a new react application. There is multiple ways how to work with react, but we will be using "CREATE REACT APP" toolchain. Read what it does here

    • Run command npx create-react-app my-app
    • This command will run for a while. (PRO tip: Windows - if you feel funky, you can pause your anti-virus which will speed up things. Linux/Mac users are fine)
  2. Verify that the application is correctly installed by running the commands

    • cd my-app enter the correct folder
    • npm start which will start a local development server which does automatic rebuilds of your app when you change files
  3. Edit App.js and observe the changes in your browser

2. Basic modifications

  1. Edit a return on function app in app.js to say:

    • Remove the <header>, your return should look like this:
      return (
        <div className="App">
         //.. your new code
        </div>
      );
      
    • Hello wrapped in h1 element
    • From the React world! as h2 element
    • image
  2. Move the h2 element with text From the React world! into variable. As per variable declaration

    • Use this variable inside your return function using {myVariable} on the place where h2 element was previously created.
    • The rendered output should stay the same!

3. Create a new component - MainContent

  • Create new function which will be called MainContent - components should start with upper case. https://reactjs.org/docs/components-and-props.html
  • This component(function) should return
    with text This is my body, with bold text
  • Use the component in the return function of the app function. Components are used the same way as other elements - like this <MyComponent></MyComponent> or <MyComponent/> if we don't want to have any element childs.
  • image

4. Create a new component with props

5. Conditional rendering

  • Modify the component RenderNumber in a way that it will render {number} is small number in case the number is smaller than 50, otherwise {number} is big number!
  • Hint: You can sovle this by using 2x return in your function or inline operators. More here https://reactjs.org/docs/conditional-rendering.html
  • image

6. Burger time

  • Create new file called burger-time.js
  • Create a new component in this file, called BurgerTime, this component will accept 2 props: name and count
  • The component will return a list using ul and li elements https://www.w3schools.com/html/html_lists_unordered.asp
  • Each element of this list will be text {name} is the best burger! the name shoudl be bold
  • It's going to have as many elements in the list as the prop count
  • Export the component from the file (the same way we did on the past labs)
  • Import the component int he app.js and use it!
  • image

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published