Michał Tymuła
What’s up, I’m Michał. I live in Wroclaw, Poland. I like to travel, play a quitarr, meet new people and organisations. #entrepreneur #programmer #lecturer #mentor
Michał Tymuła
https://about.me/michal.tymula
Master Mentor and Lecturer @ Coders Lab
Slides for meet.js @Poznań
localhost:3001/myapp/
/dashboard
/profile
/post/{:id}
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}
localhost:3001/myapp/
/dashboard
/profile
/post/{:id}
template: http://mackentoch.github.io/react-director-admin-template/#/
localhost:3001/myapp/
{:id}
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
sometimes conditional rendering...
with react-router
source: https://www.vg247.com/2016/11/07/mass-effect-andromeda-videos-explain-what-the-andromeda-initiative-is-outline-pathfinders-objective/
static routing ( mostly )
routes declared as a part
of app's initialization
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
static routing ( mostly )
routes declared as a part
of app's initialization
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
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:
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:
npm start
App is accessible via localhost
type in:
expected result:
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
https://github.com/ReactTraining/react-router/tree/v4.0.0-beta.8#why-a-major-version-bump
https://medium.com/ottofellercom/to-migrate-or-not-to-migrate-react-router-v4-fdaabb09e538
By Michał Tymuła
Introduction to React Router.
What’s up, I’m Michał. I live in Wroclaw, Poland. I like to travel, play a quitarr, meet new people and organisations. #entrepreneur #programmer #lecturer #mentor