Skip to content

adam.hornbeck.advanced-1 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ahornbeck268 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

adam.hornbeck.advanced-1 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import "./App.css";
import PropTypes from "prop-types";
import SuperComponent from "./components/SuperComponent";
import Parent from "./components/Parent";

// import "./state.js";
/* eslint-disable no-unused-vars, no-console */
function App(props) {
const product = {
Expand All @@ -14,51 +14,51 @@ function App(props) {
return (
<div>
{/* send in a prop called "message", give it the string "Hello World" */}
<div>This better say "Hello World": <SuperComponent message={"Hello World"} /> </div>
<div>This better say "Hello World": <SuperComponent message="Hello World" /> </div>
{/* send in a prop called "message", give it the string "Goodbye World" */}
<div>This better say "Goodbye World": <SuperComponent /> </div>
<div>This better say "Goodbye World": <SuperComponent message="Goodbye World"/> </div>
{/* send in a prop called "message", give it the string "Props are awesome" */}
<div>This better say "Props are awesome": <SuperComponent /> </div>
<div>This better say "Props are awesome": <SuperComponent message="Props are awesome"/> </div>
{/* send in a prop called "message", give it the string "I totally get this now" */}
<div>This better say "I totally get this now": <SuperComponent /> </div>
<div>This better say "I totally get this now": <SuperComponent message="I totally get this now"/> </div>


{/* send in a prop called "magicNumber", give it the number 42*/}
<div>This better say 42: <SuperComponent /> </div>
<div>This better say 42: <SuperComponent magicNumber={42}/> </div>
{/* send in a prop called "magicNumber", give it the number 21*/}
<div>This better say 21: <SuperComponent /> </div>
<div>This better say 21: <SuperComponent magicNumber={21}/> </div>


{/* send in a prop called "product", give it the variable product*/}
<div>This better say "ajax": <SuperComponent /> </div>
<div>This better say "ajax": <SuperComponent product={product}/> </div>
{/* send in a prop called "product", give it an object with a name property "pepsi"*/}
<div>This better say "pepsi": <SuperComponent /> </div>
<div>This better say "pepsi": <SuperComponent product={{name: "pepsi"}}/> </div>
{/* send in a prop called "product", give it an object with a name property "nike"*/}
<div>This better say "nike": <SuperComponent /> </div>
<div>This better say "nike": <SuperComponent product={{name:"nike"}}/> </div>


{/* send in a prop called "names", give it the variable names*/}
<div>This better say "Bob, Stand, Todd, Ted" : <SuperComponent /> </div>
<div>This better say "Bob, Stand, Todd, Ted" : <SuperComponent names={names}/> </div>
{/* send in a prop called "names", give it an array ["Brodie","Alicia","Margo"]*/}
<div>This better say "Brodie, Alicia, Margo" : <SuperComponent /> </div>
<div>This better say "Brodie, Alicia, Margo" : <SuperComponent names={['Brodie','Alicia','Margo']}/> </div>
{/* send in a prop called "names", give it an array ["Titus","Axel","Claire"]*/}
<div>This better say "Titus, Axel, Claire" : <SuperComponent /> </div>
<div>This better say "Titus, Axel, Claire" : <SuperComponent names={['Titus', 'Axel', 'Claire']}/> </div>

{/* Use App's props*/}
{/* send in a prop called "products", give it the products array from App's props*/}
<div>This better say "Hand Sanitizer": <SuperComponent /> </div>
<div>This better say "Hand Sanitizer": <SuperComponent products={props.products}/> </div>
{/* send in a prop called "names", give it the names array from App's props*/}
<div>This better say "Robin, Lily, Barney": <SuperComponent /> </div>
<div>This better say "Robin, Lily, Barney": <SuperComponent names={props.names} /> </div>
{/* send in a prop called "magicNumber", give it the magicNumber from App's props*/}
<div>This better say "99": <SuperComponent /> </div>
<div>This better say "99": <SuperComponent magicNumber={props.magicNumber}/> </div>
{/* send in a prop called "message", give it the contact.firstName from App's props*/}
<div>This better say "Luke": <SuperComponent /> </div>
<div>This better say "Luke": <SuperComponent message={props.contact.firstName}/> </div>
{/* send in a prop called "message", give it the contact.lastName from App's props*/}
<div>This better say "Skywalker": <SuperComponent /> </div>
<div>This better say "Skywalker": <SuperComponent message={props.contact.lastName}/> </div>
{/* send in a prop called "message", give it the contact.occupation from App's props*/}
<div>This better say "farmer": <SuperComponent /> </div>
<div>This better say "farmer": <SuperComponent message={props.contact.occupation}/> </div>
{/* send in a prop called "message", give it the contact.address from App's props*/}
<div>This better say "300 MiddleOfNoWhere st Tatooine": <SuperComponent /> </div>
<div>This better say "300 MiddleOfNoWhere st Tatooine": <SuperComponent message={props.contact.address}/> </div>
<Parent />
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions src/components/Child.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function Child(props) {
street: "101 main st"
city:"Austin",
zip: "78741"

}

}
Expand All @@ -39,4 +39,3 @@ function Child(props) {


export default Child;

32 changes: 16 additions & 16 deletions src/components/Parent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,49 @@ function Parent(props) {

return (
<div>
{/*
{/*
Child is just a function as you can obviously see from the code of Child.js
We should understand how functions work else we are in big trouble
How many times can you call a function?
What can you send into functions as arguments?
How do you call a function?
How do you pass arguments into a functoin?
Using a component in JSX is the same as calling the function
How many times can you call a function?---up to you!
What can you send into functions as arguments?---whatever u need to!
How do you call a function?--fnc()
How do you pass arguments into a function? ---fnc(pass, args, here)
Using a component in JSX is the same as calling the function
*/}

<Child name={"Bob"} />
{/*
{/*
React converts the above into:

var props = {name:"Bob"};
Child(props)
Child(props)
*/}



{/*

{/*
var props = {age:33};
Child(props)
Child(props)
*/}
<Child age={33} />

{/*
{/*
var props = {
address:{
street:"325 aca rd.",
city: "Austin",
zip: "78701"
}
};
Child(props)
Child(props)
*/}
<Child address={{
street: "325 aca rd.",
city: "Austin",
zip: "78701"
}} />

{/*
{/*
var props = {
name: "Ted",
age: 35,
Expand All @@ -58,11 +58,11 @@ function Parent(props) {
zip: "78701"
}
};
Child(props)
Child(props)
*/}
<Child
name={"Ted"}
age={35}
age={35}
address={{
street: "325 aca rd.",
city: "Austin",
Expand Down