Teaching React Without Using React.

How should I teach React to PHP developers?

  • Do I show them create-react-app? No.
  • Webpack? No.
  • Babel? No.
  • Inline styles? Heck no.

What makes React important is the shift from global, template-based layouts to distinct, data-driven components.

Thinking in “Components”

Common PHP + HTML usage. (Notice the REPL output below)

A direct byproduct of this is the CSS variable & selector bloat that’s impossible to stave off due to CSS cascading risk as well as styles. (Over-bundling of JavaScript is common, too.)

Heredocs make for consistent HTML blocks.
Functional PHP components.
A few syntax changes & PHP is turned into JavaScript!

A Practical Example

Working at HigherEducation.com, a very common scenario is for a user to search for online programs in their area:

Generic form to search online programs.
Introducing the <Select> component.
Introducing the <Input> component.

A Functioning Widget in Vanilla JavaScript

Now that we’re thinking in components, the next logical step was to make our form dynamic by tracking application state in a plain JavaScript object.

Components can be very dynamic, as long as the state is, too!
How we define our components is subjective and situation-specific.
Vanilla JS Widget

The Functioning Widget in React & JSX

Lastly, the React (JSX) version is merely a syntax change to the components & using react-dom to render.

Converting template literals to JSX completes the circle.

Well-designed components shouldn’t need a massive rewrite to work with another renderer.

React Widget
  • Virtual DOM. Updating the DOM vs. destructively removing it maintains tab indexes, focus, and other expectations of static markup.
  • Normalized Events. It’s easy to forget about this, but standardized events greatly simplify that last round of QA when you’re trying to figure out why your app doesn’t work in Safari (or whoever is the new Internet Explorer).
  • Lifecycle Hooks. Being able to fetch data when a specific component needs it or integrate with 3rd party scripts is an essential escape hatch.

How’d it Go?

The Ah-hah! moment for the group was watching the DOM get completely destroyed & faithfully re-rendered purely from the state.

--

--

I write about tech (JavaScript, node, GraphQL, React, webpack) and Leadership. Currently building GraphQL apps @Starbucks.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eric Clemmons

Eric Clemmons

2.1K Followers

I write about tech (JavaScript, node, GraphQL, React, webpack) and Leadership. Currently building GraphQL apps @Starbucks.