This document discusses routing in a Meteor React application using FlowRouter. It introduces FlowRouter and its prerequisites of React Layout. It provides an example of setting up basic routing with FlowRouter to render different component templates at routes like '/stats' and '/add-player'. Components mentioned include AddForm, Player Stats, and Single Stat. The document also discusses passing props between components.

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 /> } );
}
});