Prerequisites

React

React is a JavaScript library used for creating user interfaces.

You'll need to make sure you feel comfortable coding in JavaScript before attempting this course.

Single page

Created by Facebook, React is used for the development of single page applications or SPAs.

Single page applications are websites that don't refresh the page when loading new content. 

ES6

React makes heavy use of some of the latest JavaScript features such as classes and inheritance.

Let's create a Dog class and extend it from an Animal class.

class Dog extends Animal {


}

Awesome. These features make development more manageable.

Why react

React is extremely popular due to how easy it makes building robust and reusable user interfaces.

What it is

There are three basic concepts needed to get started with React: components, JSX, and props.

Components

Components are the building blocks of the user interface. Everything on the page is constructed by combining components together.

Class

A component houses everything needed for it to display on a webpage. That includes things like JavaScript logic and HTML. 

To start, we'll need the keyword class and a name.

class Greet {
 
}

Nice. We create React components in the same way as regular JavaScript classes.

Extend

To get access to React features the class needs to inherit from the parent Component class.

class Greet extends Component {

}

Alright. Once the class has extended from Component, lots of useful features become available.

Render

The next step is adding the render() function. The render function is required to display the markup of the component.

Let's add the render() function here.

class Greet extends Component {
  render() {
    
  }
}

Great job! Without render() the component won't display anything.

Return

Inside the render method, we can add the HTML we want to display on the page. We use the return() function for that. 

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

Sweet! The HTML that's return here is what the component will display.

Root

To create the component on screen, there's usually a <div> that serves as the basis of the React application in an HTML file.

<div id="root"></div>

The component is created inside this empty div.

Using it

We use a method called ReactDom.Render() with the id of the root div we created in HTML. 

Inside that method, we create the component by capitalizing the name and putting it inside a tag.

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

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

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> 
  )
 }  
}