Examples
- Form
- Todo List
- Clock
- Checkbox
- Fetch Data
- Fetch Data (with Suspense)
- Fetch Data (with Suspense + isomorphic)
- Lazy Image Fadein
- Store
- SSR
- Update Component (Child/Parent)
- Tagged Template Literals
- withStyles() (HOC)
Form
As simple as that:
loading...Todo List
loading...Clock
loading...Checkbox
loading...Fetch Data
Fetch data inside didMount().
loading...Fetch Data (with Suspense)
Fetch data with <Suspense />. In this example Suspense gets the props names
as a promise (a function that returns a promise,
() => Promise<any>) and once resolved, it will pass the results as props to
its children. The List Component will therefore have access to names.
Add cache if you want to cache the result of the promise.
loading...Fetch Data (with Suspense + isomorphic)
Of course <Suspense /> works also on the server-side. To make the App
Component from the above example work isomorphic, modify it as following:
loading...Lazy Image Fadein
A simple component that smoothly fades in your lazy loaded images.
loading...Store
Use an external store, to store your application's state.
loading...SSR
SSR example with the built-in Helmet component.
loading...Update Components (Child/Parent)
Update child Components
You can call update() from parent Components to
update() its child Components through Callback Refs or directly. Since the parent
Component updates, it will then re-mount the child Components.
Update parent Components from childs
You can call update() from child Components, to
update() its parent Components.
loading...Tagged Template Literals
You can use jsx without any build tools, if you want.
loading...withStyles()
withStyles() is a HOC (Higher Order Component) that uses Helmet to add Styles to the DOM.
loading...