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

React

Creating a Component as a class

Components and State

Add component to DOM

Passing Props

Changing State in another Component

Routing with React

Routing Basics

React Router

Nested Routes with React

Routes with Parameters

React

More from Brett Caudill