nvm install [version]). If we want to see the list of all available versions, we can run
nvm ls-remote(Max/Linux) or
nvm list available(Windows). For the rest of this book, I would suggest you use the LTS (Long Term Support) version as its stable and will receive updates over a longer time frame.
-gmake sure that the
yarnexecutable is installed globally and can be called from the command line anywhere on our machine by typing
@babel/core) that offers a few APIs that can then be used by plugins for each respective transpilation. These plugins are often grouped together by so-called presets. Presets can in turn install many plugins at once. In React, the most common presets are
@sign in the name indicates that the package originates from an organization within the npm registry (the npm package registry) and can been understood as some sort of a namespace. In the case of Babel, you can find all of its official packages in the organization that have been published there by the Babel maintainers. Before Babel version 7 was released, this organization did not exist and the packages were simply separated by hyphens.
babel-coreand so on.
@babel/corein a project. In this case we are simply dealing with an older version of Babel (6 or below). However, sometimes we might come across plugins or presets that are not officially part of Babel, but the developer has still prefixed the package with
babel-although it works with Babel 7. In this case, we can only really check the readme of the package to understand what is going on.
--save-devflag indicates that we are only dealing with a
devDependency, meaning that it is only relevant for our development and that it should not be included in production code.
<script src="..."></script>in the HTML. Without bundling, we would need to import hundreds of scripts manually.
buildfolder that can then be deployed on the server. There are a lot of other things Webpack can do, but we are going to investigate this deeper at a later point and show what such a configuration could look like. Thus, we will not look at the Webpack command line tools at this stage.
eslint-plugin-react-hookswhich have proven themselves to be a solid choice for development workflows.
Create React apps with no build configuration
yarn start), this build is optimized for performance. Due to this, running
yarn buildtakes much longer than running
yarn eject, we can bid our app goodbye. All the build scripts, dependencies and config files are copied to our current project directory. From this point onwards, it is our responsibility to ensure that everything is working as intended. While we have more responsibility, we also gain more freedom as we can now make changes to the standard configuration of CRA. If or when this step ever needs taken depends on the project. I have been working on projects where I have used the CRA standard setups for months but also worked on others where I needed to eject much earlier (days or weeks) as I needed to make changes to setup.