Group session July 1st

This is in the works! Would you like to help flesh it out? Let's do it!

The least

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

What’s happening here? CodePen allows you to use imports like this. It’s importing React (the UI library) and it’s importing React DOM.

React seems to be in a strange place at the moment. They seem to expect you to use Next.js or Remix – and to never use React alone. They also recently released the idea of “Server Components.”

React Server Components allow you to write UI that can be rendered and optionally cached on the server. In Server Components, component logic such as data fetching and database mutations is executed exclusively on the server.

Sounds a lot like PHP, doesn’t it?

React-dom contains features that are only supported for web applications (which run in the browser DOM environment).

But we’re trying not to concern ourselves with that – and just focus on the syntax and general concepts – (mostly likely in comparison with your Vue experience).

Note: we’re not using the `React` we imported. So, maybe that just exists globally or something? You tell us.

Comments

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Mandatory parent element

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

JSX is stricter than HTML. You have to close tags like <br />. Your component also can’t return multiple JSX tags. You have to wrap them into a shared parent, like a <div>...</div> or an empty <>...</> wrapper:

JSX

This is part of the reason you’ve seen so much source code with a million extra anonymous divs. It’s not JSX’s fault, but React developers tend to take the documentation at face value and might be learning HTML for the first time – in this context (and not know any better).

What’s next?

What matters most? Technically – what do we need to be able to do?

  • compose component together (at it’s core it could be used just for organizing reusable partials)
  • show data on the screen (use data in the template) (iterate over data sets)
  • click buttons / run action (allow the user to make choices) (add things / remove things / filter things)
  • user input (and to use that in state to calculate things)
  • add data with forms
  • to know when the component is mounted to the screen / understand that life cycle…
  • what else? (math and many of the core things we do will just be regular JS)
  • how to pass data between components?
  • what does the user need to do and how can we give that to them with this particular abstraction layer (React) ?
Group session July 1st