Презентация

MVC Architecture. Routing with React Router - JS Applications - ноември 2016

 

Материали от темата

Съдържание на документа

MVC Architecture. Routing

Model-View-Controller.

Using React Router in JS SPA

SoftUni Team

Technical Trainers

Software University

http://softuni.bg

MVC +
Routing


Table of Contents

MVC in JavaScript

Models

Views

Controllers

Web Routing

ReactJS

2


3



sli.do
#3243

Have a Question?


4

Terminology

Models – describe data and rules for handling data

Views – represent parts of the data to the user

Controllers – parse user input to views and models

MVC Architecture Overview


5

MVC Example

Communication with the Database…

Model

Database

User

Supervises the data transfer and communication between the Model and the View…

Controller

User interaction, Data visualization...

View


6

Entity Model

Represents the data stored in a DB

Represented in memory

You can create, edit and delete an entity

You can filter and sort entities by specific criteria



Model


7

Entity details page

Displays only a section of the data the Model served

The same data can be shown by different Views

Style can be altered independent of the data

View


8

Edit entity

Reads and parses information the User submitted

Instructs the View to update accordingly

Sends parsed information to the Model

Controller


9

React Controller Views and stateless Views

Lift shared data to common ancestor

Split components in smaller pieces

Provide a central source of truth and parsing

Models – data management and storage inside Controller View or in separate module

MVC in JavaScript with React


Web Routing





HTML

index.html



HTML

Catalog



HTML

About



HTML

Contact



HTML

New Products



HTML

Discount


11

Web Routing Overview

Problem

Changing the URL reloads the page

Solution

Single Page Application with JavaScript


12

Web Routing Overview (2)

New Problem

We can't track browser history

Back button won't work


13

Web Routing Overview (2)

Solution

Reflect content changes in the URL

Track URL changes and load content


React Router

A React add-on for web routing


15

React Router is a complete routing library for React

Keeps the UI in sync with the URL

What is React Router?

ReactDOM.render((

  <Router history={hashHistory}>

    <App>

      <Route path="/catalog" component={Catalog}/>

      <Route path="/about" component={About}/>

    </App>

  </Router>

), document.getElementById('root'))


16

Install using npm from the terminal

Import modules in your app

Installation and Setup

npm install --save react-router

import { Router, browserHistory } from 'react-router'

import { Route, IndexRoute, Link } from 'react-router'


17

React Router is a component

It can be rendered as any React component

React components can be nested in it as normal

Rendering a Route

render(<Router/>, document.getElementById('app'))

render((

  <Router history={hashHistory}>

    <App />

  </Router>

), document.getElementById('app'))




18

React components can be wrapped in a Route and bound to a specific path



Adding more scenes

<Router history={hashHistory}>

  <Route path="/" component={App}/>

  <Route path="/catalog" component={Catalog}/>

  <Route path="/about" component={About}/>

</Router>

Access URL

Component to load






19

Link replaces <a> and automatically prevents page reload



Navigating with Link

let App = React.createClass({

  render() {

    return (

      <div><h1>React Router Tutorial</h1>

        <Link to="/catalog">Catalog</Link>

        <Link to="/about">About</Link>

      </div>

    )

  }})

Access URL as defined in Route


20

With props.children we can dynamically nest components

Nested Routes

let App = React.createClass({

  render() {

    return (

      <div><h1>React Router Tutorial</h1>

        <Link to="/catalog">Catalog</Link>

        <Link to="/about">About</Link>

        {this.props.children}

      </div>

    )

  }})


Our navigation links will now appear on all pages

21

Nested Routes (2)

ReactDOM.render((

  <Router history={hashHistory}>

    <Route path="/" component={App}>

      <Route path="catalog" component={Catalog}/>

      <Route path="about" component={About}/>

    </Route >

  </Router>

), document.getElementById('root'))

Nested routes will appear as children inside App




Links know when they are currently active

We can style them with activeStyle or activeClassName

22

Active Links

<Link to="/catalog" activeStyle={{ color: 'red' }}>

  Catalog

</Link>

<Link to="/catalog" activeClassName="activeNav">

  Catalog

</Link>


We can specify a default component when no route is active

23

Index Routes

<Router history={hashHistory}>

  <Route path="/" component={App}>

    <IndexRoute component={Home}/>

    <Route path="catalog" component={Catalog}/>

    <Route path="about" component={About}/>

  </Route >

</Router>

Will display as children when we open "/"




Configure the Router to work with browserHistory

This removes the pound sign from our links (#)

24

Clean URLs with Browser History

import { browserHistory } from 'react-router'



render((

  <Router history={browserHistory}>

    …

  </Router>

), document.getElementById('app'))


Parameters are dynamic parts of the URL

Example: /catalog/elecronics/XYZ5538

Configure the Route to work with params

Access from the component

25

URL Params

<Route path="/catalog/:category/:userId" component={Catalog}/>

This part of the URL can change



this.props.params.category


26

Redirects

Transitions

NotFoundRoute (custom client 404)

Important side points

React.PropTypes – required properties and type validation

Elevating state to allow communication between components (Controller View and stateless components)

props.children – dynamically define nested components/elements

render() { return null } to hide component



Additional usage


Practice:  Routing with React Router

Live Exercises in Class (Lab)


28

MVC makes large projects easier to manage

With React Router we can compose a large app from smaller pieces

Summary

<Router history={hashHistory}>

  <Route path="/" component={App}>

    <Route path="catalog" component={Catalog}/>

    <Route path="about" component={About}/>

  </Route >

</Router>


https://softuni.bg/courses/javascript-applications

MVC Architecture. Routing


License

This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license

30


Free Trainings @ Software University

Software University Foundation – softuni.org

Software University – High-Quality Education, Profession and Job for Software Developers

softuni.bg 

	Software University @ Facebook

	facebook.com/SoftwareUniversity

	Software University @ YouTube

	youtube.com/SoftwareUniversity

	Software University Forums – forum.softuni.bg