Przygody ze ścieżkowaniem

czyli

react-router@4.2.0

Michał Tymuła
https://about.me/michal.tymula
Master Mentor and Lecturer @ Coders Lab

Slides for meet.js @Poznań

what exactly is a rout ...

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

server side  

VS

client side

SERVER side

  1. you provide a link to click on
  2. browser sends HTTP GET request and waits for response ( mostly HTML )
  3. server interprets request and sends back bundle (mostly HTML)
  4. browser discards current page and loads content of received response

SERVER side

  1. you provide a link to click on
  2. browser sends HTTP GET request and waits for response ( mostly HTML )
  3. server interprets request and sends back bundle (mostly HTML)
  4. browser discards current page and loads content of received response

SERVER side

  1. you provide a link to click on
  2. browser sends HTTP GET request and waits for response ( mostly HTML )
  3. server interprets request and sends back bundle (mostly HTML)
  4. browser discards current page and loads content of received response

CLIENT side

  1. you provide a link to click on,
  2. client side code detects click event and manually changes the URL displayed while asynchronously gets data it needs over fetch, ajax, oldshool HTTP Request or otherwise,
  3. content is being rendered when arrives,  no browser refresh, no unnecessary request flaying around over HTTP !

SERVER side

  1. you provide a link to click on
  2. browser sends HTTP GET request and waits for response ( mostly HTML )
  3. server interprets request and sends back bundle (mostly HTML)
  4. browser discards current page and loads content of received response

CLIENT side

  1. you provide a link to click on,
  2. client side code detects click event and manually changes the URL displayed while asynchronously gets data it needs over fetch, ajax, oldshool HTTP Request or otherwise,
  3. content is being rendered when arrives,  no browser refresh, no unnecessary request flaying around over HTTP !

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

{:id}

  • asynch: ajax / fetch / other

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

{:id}

  • asynch: ajax / fetch / other
  • dynamic rendering
  • other JS magic...

sometimes conditional rendering...

localhost:3001/myapp/

/dashboard

/profile

/post/{:id}

template: http://mackentoch.github.io/react-director-admin-template/#/

localhost:3001/myapp/

{:id}

response.id

response.id

response.id

  • asynch: ajax / fetch / other
  • dynamic rendering
  • other JS magic...

sometimes conditional rendering...

become a pathfinder

with react-router

source: https://www.vg247.com/2016/11/07/mass-effect-andromeda-videos-explain-what-the-andromeda-initiative-is-outline-pathfinders-objective/

react-router

React Router is a collection of navigational components that compose declaratively with your application.  ( more... )

pre-v4 (good old days)

static routing ( mostly )

                routes declared as a part

                       of app's initialization

v4 (bright future)

useful articles in polish

old:    https://www.nafrontendzie.pl/routing-reactjs-wprowadzenie-react-router
new:  https://www.nafrontendzie.pl/react-router-wersji-4-wszystko-nowa

dynamic routing

                takes place as your app

                       is rendering

 

one huge centralized config file /object

                similar to solutions in Rails,                                   Express, Ember, Angular etc.

nested routes ( decentralized and component-like )

                takes place as your app

                       is rendering

 

responsive routes

                like they should be ... ;p

 

pre-v4 (good old days)

static routing ( mostly )

                routes declared as a part

                       of app's initialization

v4 (bright future)

useful articles in polish

old:    https://www.nafrontendzie.pl/routing-reactjs-wprowadzenie-react-router
new:  https://www.nafrontendzie.pl/react-router-wersji-4-wszystko-nowa

dynamic routing

                takes place as your app

                       is rendering

 

one huge centralized config file /object

                similar to solutions in Rails,                                   Express, Ember, Angular etc.

nested routes ( decentralized and component-like )

                takes place as your app

                       is rendering

 

responsive routes

                like they should be ... ;p

 

make it happen

it's coding time!

create-react-app

npx create-react-app react-router-v4-playground

Success! Created react-router-v4-playground at C:\Users\webninja\Documents\PREZENTACJE\react-router-v4-playground
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-router-v4-playground
  npm start

Happy hacking!

type in:

expected result:

react-router-dom

cd react-router-v4-playground
(...)
"devDependencies": {
    "react-router-dom": "^4.2.2"
  }
}

type in:

package.json

npm install react-router-dom --save-dev

and then:

or just clone this...

https://github.com/pozytron/react-router-v4-playground

...anyway, let's do it !!!

start

npm start
App is accessible via localhost

type in:

expected result:

imports...

import React from "react";
import { BrowserRouter as Router} from "react-router-dom";
import {Route, Link} from "react-router-dom";

For all this to work we just need to import following components:

BrowserRouter as Router, Route and Link

App.js

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

index.js                                                                                                     

   <- just in case we have React newbies watching

honorable mentions...

querry param

why-a-major-version-bump

https://github.com/ReactTraining/react-router/tree/v4.0.0-beta.8#why-a-major-version-bump

devil's advocate

https://medium.com/ottofellercom/to-migrate-or-not-to-migrate-react-router-v4-fdaabb09e538

Dzięki za uwagę :) 

Made with Slides.com