Nice! The HTML on our component gets displayed on the page.

Syntax

...
 
ReactDOM.render((
  <Greet />
), document.getElementById('root'));

The strange capitalization of our react class inside what looked like HTML tags is what's called JSX.

JSX

JSX is an extension to JavaScript that makes it much easier to mix the JavaScript of your react components with the HTML for the page.

-->

Practice

Let's use React to build a component that we'll use to display a list.

List

Let's start by creating the List class.

class List {
 
}

Sweet. Components begin as regular JavaScript classes.

Inherit

Let's add the keyword that allows for inheritance.

class List extends {
 
}

Indeed. The extends keyword will allow inheritance from a parent class.

Component

Extend from the React class Component.

class List extends Component {

}

Alright! The List class is beginning to look like a real React component.

Render

Let's add the render method.

class List extends Component {
 render() {
  
 }  
}

Alright! This method is required to display HTML.

Return

Let's add the return method.

class List extends Component {
 render() {
  return(
  
  )  
 }  
}

Excellent. return() is needed to return a value for render().

Unordered

Let's add the opening and closing tags of an unordered  list.

class List extends Component {
 render() {
  return(
   <ul>
   
   </ul>
  )
 }
}

Good stuff. Inside the return method, we add the HTML we want to display.

List

Finally let's add two list items.

class List extends Component {
 render() {
  return(
   <ul>
    <li></li>
    <li></li>
   </ul>
  )
 }  
}

Right on! You've created the skeleton of your first React component.

Intro

We're able to nest components inside of other components and use something called props to make them even more powerful.

Nesting

To nest one component inside another, we use the same JSX syntax we used previously. 

Let's try it out creating the Greet component from within the Page component.

class Greet extends Component {
 render() {
  return( 
   <div>
      Hi there
   </div>
   )
  }
}
 
class Page extends Component {
 render() {
  return(
   <div>
    <Greet />
   </div>
  ) 
 }
}

Great stuff! We're able to create complex user interfaces by nesting components inside each other.

Props

We can make our components more powerful through the use of props

Props is short for properties. Properties are like parameters that we can pass to our component.

Passing components

Props are passed from one component down to another in one direction.

Let's take a look at how we would pass some props to the Greet class

class Greet extends Component {
 render() {
  return( 
   <div>
      Hi there
   </div>
   )
  }
}
 
class Page extends Component {
 render() {
  return(
   <div>
    <Greet name="Tina"/>
   </div>
  ) 
 }
}

Alright! We're able to pass props from Page to Greet in one direction only.

Passing

To pass props, we specify the name of the property we'd like. Then, we specify its value directly.

Let's pass a prop called user with the value "Amanda".

class Page extends Component {
 render() {
  return(
   <div>
    <Greet user="Amanda"/>
   </div>
  ) 
 }
}

Alright! Properties are like variables, they have a name and a value.

Syntax

We use braces to access the value of props inside the Greet class. Inside the braces we place this.props. followed by the name of the prop. 

Let's give it a try.

class Greet extends Component {
 render() {
  return( 
   <div>
      Hi {this.props.name}
   </div>
   )
  }
}
 
class Page extends Component {
 render() {
  return(
   <div>
    <Greet name="Tina"/>
   </div>
  ) 
 }
}

Nice work!

Multiple

We can pass multiple props from one component down to the other. We do this by separating the different props with a space.

Let's give it a try.

class Results extends Component {
 render() {
  return(
   <div>
    <Places first="Ann" second="Joe"/>
   </div>
  ) 
 }
}

Right on. Here we're passing two props to a component called Places.

Accessing

Accessing multiple props works in the same way.

class Board extends Component {
 render() {
  return(
   <div>
    First {this.props.first}
    Second {this.props.second}
   </div>
  ) 
 }
}

Alright! When we render this component on the page, it'll contain the two values that were passed down from the Results class.

Dom

Normally, the browser has to recalculate changes to the CSS and layout using the DOM.

React; however, uses a Virtual DOM which monitors changes between the previous and updated versions for faster performance.

Practice

Let's use props to extend the list component we created previously.

List

We'll create a new App component and use it to pass properties to the List component below.

class List extends Component {
 render() {
  return(
   <ul>
    <li></li>
    <li></li>
   </ul> 
  )
 }  
}

App

Let's create the App component and extend it from Component

class App extends Component {

}

Sweet!

Render

Let's add the render and return methods.

class App extends Component {
 render() {
  return(
  
  ) 
 }
}

Great! The render method is required if we want to display something.

Create

Now let's create the List component from within the App component.

class App extends Component {
 render() {
  return(
   <List/>
  )
 }
}

Alright, we created out List component, but we haven't added props yet.

First

Let's pass  a prop called fruit with the value "Kiwi".

class App extends Component {
 render() {
  return(
   <List fruit="Kiwi"/>
  )
 }
}

Alright! That's one prop.

Second

Let's pass the second props called veg with the value Kale.

class App extends Component {
 render() {
  return(
   <List fruit="Kiwi" veg="Kale"/>
  )
 }
}

Excellent! We can pass as many props as we'd like to a component.

Access

Inside the list component let's use props to access the veg props.

class List extends Component {
 render() {
  return(
   <ul>
    <li>{this.props.veg}</li>
    <li></li>
   </ul> 
  )
 }  
}

Excellent! Inside this list will be the value of what was in the veg prop. 

Second prop

Let's add the fruit prop.

class List extends Component {
 render() {
  return(
   <ul>
    <li>{this.props.veg}</li>
    <li>{this.props.fruit}</li>
   </ul> 
  )
 }  
}

Sweet!

Finish

Let's take a look at what would be displayed if we placed our component on a page.

We can reuse the List component by passing it different props anytime we need a list. 

class App extends Component {
 render() {
  return(
   <List fruit="Kiwi" veg="Kale"/>
  )
 }
}
 
class List extends Component {
 render() {
  return(
   <ul>
    <li>{this.props.veg}</li>
    <li>{this.props.fruit}</li>
   </ul> 
  )
 }  
}