So over the last lectures we had a look at a lot of possible next steps including libraries like Gatsbyjs
or component libraries like Material-UI.
Here's one other nice library you might want to look into,
preact. Now that's no typo, preact which you can read more about on preactjs.com is a lightweight
alternative to react,
it's only 3kb big and it offers pretty much the same with some deviations but not that many
API react does. So should you always use that,
are the creators of react stupid?
They are not,
there are differences and I will talk about these in the next lecture but for now, let me explain what
preact is,
you could always read through this page of course but let's click on the repl here, on that page.
There you simply see an example for the preact or for preact in action
and if you analyzed this example, you'll recognize the code.
For example down there, we have a normal component in the functional form just using destructuring here
to pull out one property of the props argument
but in the end that's just your normal jsx code,
that's just a functional component which gets used. And above and we got a class based one which also extends
component,
so this syntax looks a lot like react syntax and it is to a majority or to a certain degree, to a very
big degree actually. Preact uses pretty much the same API but uses a leaner diffing algorithm behind
the scenes,
so for finding out if it needs to update the real dom, it has a leaner algorithm for that.
Lean doesn't strictly mean better but of course it leads to a much smaller file size, 3kb
as I just showed you. The important thing here is that preact and you can always learn more here on
the guide
also offers some differences to react, even some new features as it will turn out
but more about the differences in the next lecture.
You can start working with preact, if you google for preact-cli, then you should find this github page where
you find a project which is a lot like create react app which allows you to create new preact apps
which use preact instead of react
obviously, based on some of the templates you find here. So you can quickly scaffold out a new app where
you can use the majority of the things you learned in this course, again differences are highlighted
in the next lecture and simply use this much smaller bundle, this much smaller library.
This is preact-cli and this is preact, a lightweight alternative using pretty much the same API and
therefore, the things you learned in this course are valid.
Now let's find out what the differences are then and when you should and should not use react,
let's do this in the next lecture.