This is a code base especially created to illustrate a talk about React Fiber.
The talk and the code were done by @mfrachet, @fberthelot and myself.
You can find the "target" code in the master
branch. We try to keep it updated with each React releases.
The livecoding
branch is where the code is changed to an "older" style in order to be improved with last React features.
This chapter is about to describe and keep a script of the livecoding changes in order to update the code from the livecoding
branch to the master
.
Focusing on the src/components/arena/choice/pokemon-input.js
file. It's a typical component used in a loop but which contains two children which has no need of a parent.
Fragment
.Fragment
with the new notation <>
.The subject is to generate an error in the Title component.
src/components/design-system/title.js
create an ErrorTitle
component which throw an error. Replace the default export to the new component.src/components/design-system/errors.js
.ErrorHandler
in src/index.js
around the title. Beware of create-react-app overlay, you can't disable it but you can remove it with escape.ErrorHandler
in src/components/arena/choice/choice.js
. Error does not crash the whole app now !
Title
component to get the app works again.Suspense by itself can't be illustrated so, step 3 is more like a placeholder.
We will load the chart library called Victory
lazily.
src/components/stats/stats.js
, add imports for Suspense
and lazy
.Chart
component with lazy
and the new import()
syntax. Add a timeout to the loading function to be able to see the loader.Chart
component with Suspense
, use Loader
as fallback.We're getting back at the choice page. We will seek to load the data with the new cache API.
src/components/arena/choice/form.js
, remove the componentDidMount
method from the component and the pokemon property from the state.createResource
from the react-cache
local copy in src/vendor/react-cache.development.js
. Instanciate a resource using the existing fetchApi
function.read
method of the resource to get the data. Use this data in place of the one from the state.src/components/arena/choice/choice.js
, surround the Form
component with a Suspense
component.No livecoding, just a dmo. Go the stat page.
src/index.js
with the two ways to start React.src/components/stats/chart.js
with the two ways to update the state.Once again, back to the choice page.
FormHook
under the other one. Copy the content of the render
method in the function body.useState
hook from react
.useState
hook to create first
and second
states variable.handleFirst
and handleSecond
handlers which set the respective state.handleSubmit
handler with the body of the previousthis
... Tada :)The very heart of the hooks are custom hooks. Let's factorize the logic.
useField
.No livecoding, just looking at the code of the battle.
useEffect
hook used to start the fight.useReducer
hook to handle the battle logic.useContext
hook).