- Fork the github https://github.com/beaumoaj/components_and_props.git and clone YOUR COPY to your Ubuntu system.
- Open an Ubuntu terminal window and
cd
intocomponents_and_props
- Run the following commands in the terminal window:
Wait for each command to finish. After the second command, your browser window should open and you will see a page that says:
npm install npm start
Read the instructions to create components
You are now ready to start
- Inside the
src
folder, create a new component calledGreeting
. Inside the component, declare a variable called name and assign it your name as a string value.This component should output the following header:const name = "Tony";
<h1>My name is {name} and I created this greeting</h1>
- Inside
App.js
, find the line of code which says:and replace it with a call to your new<p>Read the instructions to create components</p>
<Greeting/>
component. Check that when you view the app, you see the greeting message. Open the developer tools and check for errors in the console. - Modify your
Greeting
component so that instead of using a local variable inside the component, you pass the name into theprops
for the component. Modify the component first. Make sure you add aprops
argument and then modify the variable declaration:Now editconst name = {props.name};
App.js
to ensure that you pass the name property. This is how I would pass my name to the greeting component.<Greeting name="Tony"/>