Routing (Meteor with React) - Flow Router - React Router - Iron Router

1. FlowRouter, Components and
Props
by Mukul

2. Routing
Meteor with
React
React-router
Flow Router
Iron Router

3. Routing
Meteor with
React
React-router
Flow Router
Iron Router

4. Components
Add Form
Player Stats
Single Stat

5. What are we making?

6. ● git clone https://github.com/nodexpertsdev/react-player-stats.git
● cd react-player-stats
● git checkout step-2/routing-components-props
● cd step-2
● meteor npm install
● meteor

7. Add form Component
import React from 'react';
import { Meteor } from 'meteor/meteor';
export default class AddForm extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="container">
</div>
);
}
}

8. Flow Router
● Prerequisite
○ React Layout
● Install Packages:
○ meteor add kadira:flow-router
○ meteor add kadira:react-layout

9. Flow Router
● Import these packages
○ import { FlowRouter } from 'meteor/kadira:flow-router';
○ import { ReactLayout } from 'meteor/kadira:react-layout';

10. Flow Router - Routing skeleton
FlowRouter.route( '/stats', {
name: 'stats',
action() {
ReactLayout.render( App, { yield: <Stats /> } );
}
});
FlowRouter.route( '/add-player', {
name: 'add-player',
action() {
ReactLayout.render( App, { yield: <AddForm /> } );
}
});