Build a Mini Netflix (with React)
  • About Cloudinary Labs
  • Build a Mini Netflix with Cloudinary
    • Introduction
    • Delivering Video
    • Setup React
    • Install Dependencies
    • Styling your App
    • User Authentication
    • Callback Component
    • Navigation Component
    • Display Component
    • Setup Root Route
    • Upload Component
    • Setup Upload Route
    • Upload Videos
    • Display Videos
    • Enable Auth
    • Share on Twitter
Powered by GitBook
On this page
  • Import components
  • Set up the route
  • Run your app
  1. Build a Mini Netflix with Cloudinary

Setup Root Route

In order to see how your app works with these components, you need to set up some routes.

Open up your src/index.js. You'll define the routes here.

Import components

Import react, react-dom, service worker and the display component.

import React from 'react';
import ReactDOM from 'react-dom';
import Display from './components/Display';
import registerServiceWorker from './registerServiceWorker';
import { Router, Route, browserHistory } from 'react-router';

Set up the route

const Root = () => {
  return (
    <div className="container">
      <Router history={browserHistory}>
        <Route path="/" component={Display}/>
      </Router>
    </div>
  )
}

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

Run your app

Run the npm start command in your terminal to start up the app.

npm start

Your app should look like this now.

PreviousDisplay ComponentNextUpload Component

Last updated 7 years ago

App with navbar