ReactJS, bien débuter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/5593228/1280px-React-icon.svg.png)
![](https://secure.meetupstatic.com/photos/event/8/1/1/0/600_488913040.jpeg)
Sylvain Combraque
Creator of Souin
Træfik helper
SkillValue speaker
Developer
@Darkweak
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/5585364/1024px-Octicons-mark-github.svg.png)
@Darkweak_dev
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/5593136/twitter.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/6947481/ZVbOcszq_400x400.jpg)
React history
Developed by Facebook
Started on late 2011
Opensourced on mid 2013
Jordan Walke et Pete Hunt
Javascript library
Advantages
Virtual DOM
Easy switch to RN
Powerful
Javascript only
Type everything
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/6996828/1-mn6bOs7s6Qbao15PMNRyOA-300x300.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/835108/images/7534809/qrcode.png)
Exemple 👉
https://github.com/Darkweak/SacreeTech-reactjs
SSR ?
![](https://media3.giphy.com/media/UO5elnTqo4vSg/giphy.gif)
app.get('*', async (req: any, res: any) => {
let state = {};
const actions: any[] = [];
matchRoutes(
routes.map(r => ({
...r,
exact: true,
path: `/:language([a-z]{2})${r.path}`
})),
req.path
)
.map(
({ route }: any) =>
route.component?.getInitialProps ?
route.component.getInitialProps(req.path.split('/')) :
[]
)
.map(action => actions.push(...action));
await Promise
.all(actions)
.then((result: any) => result.forEach(
(r: any) => state = {...state, ...r}
)).catch(console.log);
const content = render({}, req.path, state);
res.send(content);
});
Item.getInitialProps = ([,,, slug]: [string, string, string, string]) => {
return [
new Conference()
.get({ id: slug })
.then(conference => ({
conference: {
[`${ conference.city }-${ conference.date }`]: conference
}
}))
];
};
<script>window.INITIAL_STATE = ${ JSON.stringify(state) }</script>
renderToString(
<BaseStoreProvider>
<StaticRouter location={path} context={context}>
<Switch>
{
routes.map(
(route: IRoute, index: number) => {
const Tag: any = route.component;
return (
<Route
key={index}
exact
path={'/' === route.path ? '' : route.path}
render={() => <LanguageProvider><Tag/></LanguageProvider>}
/>
)
})}
</Switch>
</StaticRouter>
</BaseStoreProvider>
);
import { ChunkExtractor } from '@loadable/server';
Chunking
Thanks for your attention
![](https://media.giphy.com/media/l3vRkmDDQu2VG6QGQ/giphy.gif)
![](https://media1.giphy.com/media/7K3p2z8Hh9QOI/giphy.gif)
Questions
ReactJS, bien débuter - Sacrée Tech
By darkweak
ReactJS, bien débuter - Sacrée Tech
- 419