React Fundamentals

React.js is a component library, which expresses user interfaces in terms of components, properties passed into them, and state they manage internally. Through these encapsulated, expressive and composable building blocks, we can create complex and dynamic interfaces with code that is surprisingly simple and easy to manage.

React Fundamentals

  1. Courses
  2. React Fundamentals
  3. Preact - A 3KB React Alternative

Preact - A 3KB React Alternative

Preact has the same ES6 public API as React, but weigh in at just 3kb. It is a great choice for single-screen apps that do not have to deal with a lot of complexity. We will take a look at how Preact can be used as almost a drop-in replacement for React, and how we can use Preact’s own API directly for an even smaller app!

  • Preact - A 3KB React AlternativePreact as a Drop-In React Replacement

    Through using an additional library called preact-compat and changing a few things in our Webpack configuration, we can swap out React for Preact and our app may not even know that anything has changed! We’ll walk through this setup process together as a group.

  • Preact - A 3KB React AlternativeUsing Preact Directly

    Through using the webpack-bundle-analyzer plugin, we can see that we have already reduced the size of our app considerably. Part of what’s keeping our app from getting a bit smaller is that we are still trying to use Preact as a drop-in React replacement. Using Preact by itself will help us shed more weight.

  • Preact - A 3KB React AlternativeEXERCISE: Using Preact Directly

    Convert all of our React components to Preact components, and then re-run the bundle analyzer to see how much our gzipped build size was reduced.

  • Preact - A 3KB React AlternativeWrap up and Recap

    We'll recap everything we have learned throughout the course, and discuss resources for further education.