The first thing we'll install is webpack. This is a tool that can take our source files and generate a bundle that can be used in the browser. During development we'll want both a lightweight development server, and a way to regenerate our bundle every time our files change.
Next, we need something that can actually transform our code, as we'll be writing something that looks more like this. There are two main reasons for needing to transform this code.
These are the raw function calls that allow Preact to work, but we don't want to have to construct our entire UI and these function calls with multiple parameters. So to achieve this transformation, we'll use Babel. We'll need to install four separate packages.
This one in particular, babel-preset-env, will track the feature support in modern browsers, and will automatically provide you with just enough plugins to ensure that your code will run in the browsers that you intend to support. One thing it won't give you by default however, is the plugin that transforms jsx into those function calls we saw a moment ago.
Now these are only development dependencies. We can go ahead and install them with yarn. I say in yarn add, and then we'll use the --dev flag. Then we'll put all these on our line, with a space, copy it, and over in the terminal paste it in, hit enter, and wait for it to install.
Now if we go back and see what that created for us, we now have a node_modules directory which contains all of the things we just installed along with the dependencies, we have a lock file, and a package.json. Everything has been saved for us under devDependencies, so the final step is to install Preact itself.
We'll head back to the terminal and we'll say yarn add. This time we won't use the dev flag. We'll just say preact. There you can see it was added as a regular dependency.