React Starter Pack

A minimal (but still batteries included) React starter setup for building web apps

We’ll first add Babel 7 to the project, and the presets that we’ll need for ES6 and JSX.

yarn add @babel/core @babel/preset-react @babel/preset-env After we installed babel, we may need to add basic configuration for it in .babelrc file (in our root folder)

// .babelrc { "presets": ["@babel/preset-react", "@babel/preset-env"] }

Now that we have our transpiler for JavaScript and React, we are able to add Webpack. It’s a module bundler that will basically create a dependency graph in the project and spit a packaged JavaScript file that we’ll attach to our index html. yarn add webpack webpack-cli babel-loader webpack-dev-server

We will also add all of the bits we need for Webpack to be able to different file types: yarn add --dev css-loader file-loader html-webpack-plugin style-loader

We installed Webpack and some dependencies we’ll need for building our React app. Babel-loader is basically a bridge between webpack and babel and webpack dev server is a helpful plugin for creating dev bundles really quick.

Configuring webpack

As we made with babel, we need to create a configuration file. In most mature projects I’ve seen, more than one webpack configuration is needed (for dev and for production). This is because production bundles are normally optimized bundles that are hard to read and dev bundles can be read by developers. The following code snipper was created in the root folder with the name webpack.config.js

If you run npm run build or yarn build, you’ll see that there’s a production bundle made in dist folder. If you run npm run start or yarn start, a server will be created for serving our files. The ‘hot’ flag (which can be seen in the "scripts" in package.json indicate that the bundle will be autogenerated after we change something in our app. ‘Open’ flag will automatically open a browser tab in localhost:8080 which is the default webpack dev host and port.

Using CSS-In-JS

We have opted for @emotion/core here as it has a smaller footprint than styled-components and I prefer the syntax it uses. As well as installing it with yarn add @emotion/core, we also need to yarn add "@emotion/babel-preset-css-prop" in order for emotion's jsx calls to be handled properly. Once installed, we then need to update our .babelrc file, which should now look like this:

// .babelrc
{
  "presets": ["@babel/preset-react", "@babel/preset-env", "@emotion/babel-preset-css-prop"]
}

See https://emotion.sh/docs/css-prop for more info.

Production

Run yarn build to create a production build of your app. This will automatically bundle everything and save it to a 'build' folder in the root of your project.