Update 21 react examples to v18

[andys8]

Updated react hooks examples to render in #root to avoid body warning and use new createRoot function to avoid deprecation warning.

• Two examples had a different index.html
• The component is now consistently mkApp :: Component {} in all examples
• Only RoutingPushReactHooks has a different main function because of routerProvider with ReaderT
• Tiny line break improvements (e.g. one line lets)

Examples

• HelloReactHooks (updated in previous PR React v18 update #294)
• BookReactHooks
• ButtonsReactHooks
• CardsReactHooks
• CatGifsReactHooks
• ClockReactHooks
• ComponentsInputReactHooks
• ComponentsMultiTypeReactHooks
• ComponentsReactHooks
• DragAndDropReactHooks
• FileUploadReactHooks
• FormsReactHooks
• GroceriesReactHooks
• ImagePreviewsReactHooks
• NumbersReactHooks
• PositionsReactHooks
• RoutingHashReactHooks
• RoutingPushReactHooks
• ShapesReactHooks
• TextFieldsReactHooks
• TicTacToeReactHooks
• TimeReactHooks

Related

• Based on / merge after Format repository with purs-tidy #296
• Package set in sync with Update package-set to 0.15.4-20220808 and react dependency purescript/trypurescript#294 (createRoot)

Review

Actual diff (without formatting PR) can be better viewed by comparing this and the base branch

[JordanMartinez]

Things left to do here:

• Fix merge conflicts
• Fix Try PS issue with react: Update package-set to 0.15.4-20220808 and react dependency purescript/trypurescript#294 (comment)

[pete-murphy]

The component is now consistently mkApp :: Component {} in all examples

I started using Component Unit in some of the later recipes I added after seeing that's how Madeline defined Components that take no props. I think I had been using {} for empty props because I had assumed that props needed to be a record. That said, I don't think there are established idioms here, and I don't know of any reason to prefer Unit over {} so no need to change it.

[JordanMartinez]

I don't know of any reason to prefer Unit over {} so no need to change it.

Perhaps because Unit used to be an empty record, so they were the same thing at runtime?
Unit's runtime was changed to undefined because functions that returned Unit (i.e. {}) were slower than those that returned undefined. We guessed it had something to do with the allocation of an empty record that is immediately thrown away.

[andys8]

I think in PureScript one can use anything as props. From a react perspective props are a key value pairs and can be represented as html attributes. Therefore the empty record/object seems a bit more idiomatic than unit, undefined or null to me.

I'd be open to changing if there is a reason to do so, but I think we're good to go as is :)

[JordanMartinez]

@andys8 Thank you so much for all your work on both this repo and in the Try PS repo.