How to Create a React App With Webpack

A lot of things need to be considered to create the scaffold of a modern React application, like allowing for a modular-based app, compiling ESNext code, transpiling TypeScript code, etc. To avoid spending too much time with build tools, we'll create a modern React/TypeScript application with a single command - create-react-app.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL with a single-time purchase.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

  • [00:00 - 00:14] So far, our focus has been building a GraphQL API from the server side of our app. As of this moment, we're now going to switch over, focus on the client side of our app, and the core piece of our client app is going to be React.

    [00:15 - 00:27] Now for simple React applications, we're able to create a React app by introducing a few script tags in an HTML file. Now though this generally works, there's a few limitations to this approach.

    [00:28 - 00:43] We're unable to use JavaScript modules, and then being able to compile TypeScript and ES6 code becomes difficult or practically impossible to maintain as an application becomes larger. Now the Webpack JavaScript Bundler can help us here.

    [00:44 - 00:52] Webpack is a third party tool that helps bundle JavaScript code. As a result, it's often recognized as a JavaScript Bundler.

    [00:53 - 01:06] In essence, a JavaScript Bundler bundles all the JavaScript code used in an application just enclose the code we write and the code of any external libraries that have been brought forth as well. And it bundles them into a single bundle.

    [01:07 - 01:12] This bundle could be a single file or a series of a few files. Why is bundling important?

    [01:13 - 01:23] First off, bundling improves performance and production. It's a lot quicker for a browser to download a few large bundles files as opposed to downloading a very large number of small files.

    [01:24 - 01:42] In addition, during the bundling process, Webpack works with other dependencies to compile and bundle development code to production code. For example, Webpack combined with Babel loader helps compile ES6 or newer JavaScript code to an older format that almost all browsers can recognize.

    [01:43 - 01:59] Another important example is Webpack can work with a TypeScript loader to help compile our TypeScript code to normal JavaScript to when bundled. At the end of the day, Webpack is a very powerful tool and sends practically all modern-day JavaScript applications on the web-use Webpack.

    [02:00 - 02:05] A huge thanks goes to the people working on it. With that being said though, Webpack does come at a cost.

    [02:06 - 02:14] It's often recognized to be a little bit of advanced and not very easy to understand to help set up. This is where something like Create React app comes in.

    [02:15 - 02:28] The React team and community have given us Create React app which is a tool to help us scaffold and create a bundled React app rapidly. We're going to use Create React app to create a new React project.

    [02:29 - 02:44] Now though we're able to globally install the Create React app utility, we can use the NPX Runner to create a React app from scratch. NPX is an NPM package runner that was introduced with NPM version 5.2.

    [02:45 - 02:56] Among doing a few different things, it helps execute node packages which haven't been previously installed. In this case, we'll like to execute the Create React app package to create a new React app.

    [02:57 - 03:07] Previously, what we needed to do was globally install the Create React app utility tool before executing it. With NPX, we can just execute it directly without having to globally install it before.

    [03:08 - 03:22] Let's head back to the terminal and look to create a new React project. We're going to navigate upwards back into the tiny house folder and we'll attempt to create a client folder adjacent to the server folder we already have.

    [03:23 - 03:39] We'll use the Create React app tool and name our client project as client. In addition, Create React app allows us to create a new React project with TypeScript by adding the dash-type script flag.

    [03:40 - 03:59] We'll press Enter and give it a few minutes. [silence] But once complete, it should create a brand new React project.

    [04:00 - 04:17] If we follow the instructions logged to us, we can navigate into the generated project, run npm run start to start our client app, and then we can head back to the browser, head to localhost 3000, and we'll have a brand new React application running.