Nice! The HTML on our component gets displayed on the page.
... 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 is an extension to JavaScript that makes it much easier to mix the JavaScript of your react components with the HTML for the page.
-->Let's use React to build a component that we'll use to display a list.
Let's start by creating the List
class.
class List { }
Sweet. Components begin as regular JavaScript classes.
Let's add the keyword that allows for inheritance.
class List extends { }
Indeed. The extends
keyword will allow inheritance from a parent class.
Extend from the React class Component
.
class List extends Component { }
Alright! The List
class is beginning to look like a real React component.
Let's add the render method.
class List extends Component { render() { } }
Alright! This method is required to display HTML.
Let's add the return method.
class List extends Component { render() { return( ) } }
Excellent. return()
is needed to return a value for render()
.
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.
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.
We're able to nest components inside of other components and use something called props to make them even more powerful.
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.
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.
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.
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.
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!
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 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.
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.
Let's use props to extend the list component we created previously.
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> ) } }
Let's create the App
component and extend it from Component
class App extends Component { }
Sweet!
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.
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.
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.
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.
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.
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!
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> ) } }