-
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)
- Run command
-
Verify that the application is correctly installed by running the commands
cd my-app
enter the correct foldernpm start
which will start a local development server which does automatic rebuilds of your app when you change files
-
Edit
App.js
and observe the changes in your browser
-
Edit a return on function app in
app.js
to say: -
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!
- Use this variable inside your return function using
- 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.
- Create a new function which will be called RenderNumber, this function will accept parameter
props
as described here https://reactjs.org/docs/components-and-props.html - The property which it will accept will be called
number
- The component should return the div with text:
{number} is a great number!
- Add random number to the App function
const randomNumber = Math.floor(Math.random() * 100);
- Add component
RenderNumber
to the App and as a props pass therandomNumber
https://reactjs.org/docs/components-and-props.html#rendering-a-component - When you refresh the site - you should get always a different number
- 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
- Create new file called
burger-time.js
- Create a new component in this file, called BurgerTime, this component will accept 2 props:
name
andcount
- The component will return a list using
ul
andli
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!