Slide 26
Slide 26 text
// src/components/Layout.js
import React from 'react';
import { Link } from 'react-router';
const Layout = (props) => (
);
export default Layout;
26
{props.children}
This is a demo app to showcase universal Javascript with React and Express.
Slide 30
Slide 30 text
// src/components/AthletePreview.js
import React from 'react';
import { Link } from 'react-router';
const AthletePreview = (props) => (
{props.medals.length}
);
export default AthletePreview;
30
{props.name}
{props.medals.length}
Slide 32
Slide 32 text
// src/components/AthletePage.js
import React from 'react';
import { Link } from 'react-router';
import NotFoundPage from './NotFoundPage';
import AthletesMenu from './AthletesMenu';
import Medal from './Medal';
import Flag from './Flag';
import athletes from '../data/athletes';
const AthletePage = (props) => {
const id = props.params.id;
const athlete = athletes.find((athlete) => athlete.id === id);
if (!athlete) {
return ;
}
const headerStyle = { backgroundImage: `url(/img/${athlete.cover})` };
return (
Olympic medalist from ,
born in {athlete.birth} (Find out more on Wikipedia).
);
};
export default AthletePage;
32
{athlete.name}
Winner of {athlete.medals.length} medals:
- {
athlete.medals.map((medal, i) => )
}
« Back to the index
Slide 33
Slide 33 text
// src/components/AthletePage.js
// ...
const AthletePage = (props) => {
const id = props.params.id;
const athlete = athletes.find((athlete) => athlete.id === id);
if (!athlete) {
return ;
}
const headerStyle = { backgroundImage: `url(/img/${athlete.cover})` };
return (
// ...
33
{athlete.name}
Slide 38
Slide 38 text
// src/components/Flag.js
import React from 'react';
const Flag = (props) => (
{props.showName && {props.name}}
);
export default Flag;
38
{props.showName && {props.name}}
);
export default Flag;
38