Creating a Component as a class

App

Child

Components and State

State

No State

Add component to DOM

var React = require('react');
var ReactDOM = require('react-dom');
 
class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

Var node = document.getElementById(‘root’)

ReactDOM.render(<MyComponent />, node);

App.js

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>


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


  </body>
</html>

Root Component

Passing Props

Changing State in another Component

Props

?

Parent

Child

Parent

Child

Parent

Child

Routing with React

Routing Basics

We will have one default route.
This is the route when the website is first visited
http://www.ourwebsite.com/

React Router

Every route loads a specific component

Nested Routes with React

Route	Component	Path
Home	Home	"/"
About	About	"/about"
Store	Store	"/store"

Route	Component	Path
Home	Home	"/"
About	About	"/about"
Store	Store	"/store"
StoreLanding	StoreLanding	"/store"
Hammers	Hammers	"/hammers"
Nails	Nails	"/nails"
Drills	Drills	"/drills"

Routes with Parameters

Home

About

Store

Home

About

Store

Products

"/"

"/about"

"/store"

"/products/:id"

One home

One about

One store

Many products