Install Development Tools for Preact
Although technically you can run Preact without any tools or pre-compiling, we’ll get a much better development experience by using modern versions of Javascript along with JSX. To achieve this, we'll be installing babel-core along with babel-preset-env. This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the babel-plugin-transform-react-jsx plugin to handle that part. Along with creating a Javascript file that can be executed in the browser, we also want to preview our work each time we change a file - so we install Webpack and the Webpack Dev Server to handle both of those tasks. The final dependency we install is babel-loader which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.
[00:00] 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.
[00:16] For that we'll use the webpack-dev-server. This will watch our source files for when we make changes, and it will incrementally update the bundle. The JavaScript file that gets served in the browser won't be written to disc every time you make a change. So using webpack-dev-server is also a more efficient way of developing, than just using webpack on its own.
[00:36] 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.
[00:46] First of all, when developing we want to be able to use the latest and greatest JavaScript features. We want the resulting bundle to be able to run across all of the browsers that we intend to support.
[00:56] The second reason is that some features such as jsx are simply not part of the JavaScript language. A block of jsx like this, will need to be transformed into something like this.
[01:08] 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.
[01:27] Babel-core, this is the main package, but on its own it doesn't do a great deal. All transformations in Babel are added via plugins. Because this would be so tedious to have to add a plugin for every single JavaScript feature that you wanted to transform, we have the concept of presets.
[01:44] 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.
[02:05] That will be handled by this plugin. So preset-env gives us the latest JavaScript, and this plugin gives us jsx.
[02:15] Finally babel-loader, this is how we get webpack and Babel talking to each other. We'll register this loader with webpack, and that way any JavaScript and jsx files can first be processed by Babel with the transformations that we've setup.
[02:29] 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.
[02:52] 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.
[03:11] 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.