React TypeScript Webpack - Setup From Scratch (1/8)

the series is sponsored by tascade tascade is a real-time organization and collaboration platform you can start by creating workspaces with each workspace capable of having a subspace each subspace can contain one or more projects which in turn can contain tasks with support for chatting and video calling tab to create sub tasks set due dates assign them leave a comment and organize them using hashtags you can automate very close by making use of reusable templates you can visualize each project as a list a board action items mind map or even an odd chart which is really useful if you're part of a team task 8 is available on the web ios android chrome mac and windows it is simple and free for personal use and growing teams give tascade a try by clicking on the link in the description down below hey guys my name is vishwas and welcome to this short series on setting up a react project with typescript and webpack from scratch now if you are a react developer you probably know about create react app which abstracts away the project setup process and helps you get started with the code in a matter of minutes and that is probably what i recommend as well if you are a beginner however this abstraction is not something we always want personally i feel more comfortable knowing that i am aware and in complete control of all the configuration in my application it helps me learn a lot about the tools that are otherwise hidden under the hood i feel that most of us might be on the same boat which is why i've created this short series in the series you will learn how to set up from scratch a complete react project with a few tools that will greatly improve your developer experience especially when working with the team so you'll get to learn a few things that you can take back and introduce at your workplace i will also demonstrate how to reuse the setup once it's completed all right let me break down our approach to the series in this video we are going to set up a basic react application with typescript and webpack 5 so we will see that hello world text in the browser in the next video we will understand how to configure webpack and typescript to allow rendering of images and svgs after that we will understand how to set up webpack config for multiple environments like dev and prod then we're going to learn about an awesome feature which is react refresh we will also learn how to integrate eslint which is a linter prettier which is a code formatter husky which does linting and formatting based on git hooks and finally we will wrap up the series with some next steps for our boilerplate code let me give you a heads up though that there is no single way to set up a react project from scratch and your conventions might differ to mine especially when it comes to folder structure but having said that what you're about to learn in the series is definitely a good start from which point onwards you can always improve the code based on your conventions and requirements let's begin in vs code i've opened a folder called react hyphen template which is going to contain all the code we write in the series so go ahead and create a folder with the name of your choice and open it in vs code now for our very first step we are going to initialize a new git repository with the get init command so open the terminal which is control backtick and run the command git init we then create a dot git ignore file which we will populate as we progress through the series for step two we are going to create two new folders the first one is source and this will hold our source code the second folder is build this folder will contain all the files and artifacts when we build our react application for deployment the reason i've created this folder although not necessary at this point is to help us visualize where the input and output for our application will reside so all the code we write goes into the source folder and all the bundled code goes into the build folder the build folder though doesn't need to be tracked so we add it to the git ignore file now for step 3 we initialize a package.json file in the root directory so in the terminal run the command npm init dash dash y which takes in default values without prompting the command throws an error if there is a space in your folder name so make sure you don't have any once the file is generated you can modify any property you want to but what we have here doesn't hurt us in any way so i'll leave it as it is step 4 we are going to create an index.html file in the source folder within the file i'm going to type the exclamation symbol and tab to scaffold the code for an html page this will be the only html file for our single page application i'll set the title to react template and in the body tag add a div element with id equal to root our react app will be injected into this root div element let's commit our progress so far steps one to four for step five let's start getting into the dependencies any package we install will result in the creation of the node modules folder so let's add that to git ignore node underscore modules now then what are the packages we require we are building react applications so we need react and react dom in the terminal run the command yarn add react and react hyphen dom we should now be able to write react code in our application however we can only write components in javascript what we need is the support of typescript so for step 6 we install typescript and the types for react and react dom as dev dependencies the command is yarn add dash d for dev dependencies and the packages are type script at types slash react and at types slash react hyphen dom for step 7 we need to add the configuration for our typescript compiler and the way we do that is using the tsconfig.json file so in the root of our project let's create a new file called tsconfig.json i'm going to copy paste the file contents which you can of course get from the github repo and the link is available in the description it's important to note here that the compiler options are focused on type checking and not code transpilation we will be using babel for that which we will get to in a few minutes now what i've done is left a comment next to each configuration to help you understand what each option does but i highly recommend you understand more about this from the typescript website we have set target to es5 our module code generation is esnext with module resolution being node dom and esnext are what we want typescript to support jsx is react hyphen jsx which enables us to leave out the import react line from every component we don't want typescript to emit any outputs isolated modules is set to true which transpiles each file as a separate module we want strict type checking es module interrupt is set to true which allows you to import star as something in your components we're going to skip type checking of the declaration files we want consistent casing file names to be true resolve json module to be true to support json files and i've commented out alojs and check jazz which are helpful if you're migrating from javascript to typescript we're also instructing typescript to monitor everything only within the source folder all right now that we have typescript with the configuration file setup we can write some react code for step 8 let's set up the entry point and the root component of our application in the source folder let's create a new file called app.tsx which will contain the root component within the file we add the app component that returns an h1 tag now that we have a root component let's create a new file index.tsx again in the source folder this will be the entry point within the file let's import react dom from react dom and the app component from app.tsa we then mount the app component onto the div element with id is equal to root using the react dom library all right we now have something that can be rendered in the browser however this react code cannot be understood by the browser as it is we're going to need babel to convert our react and typescript code into javascript so for our step nine let's install babel with the necessary plugins as a dev dependency so in the terminal run the command yarn add dash d at babel slash core at babel slash preset env at babel slash preset hyphen react and at babel slash preset hyphen type script once we have babel and the necessary presets installed we need to add a babel configuration file in the root of the project create a file called dot babel rc within the file we are going to list down the presets for babel to use i'm going to copy paste the code which again you can find in my github repo our project can now transpile the modern javascript features into a format that browsers can understand our next step is to make use of webpack which is a module bundler the code we write across multiple components will be bundled by webpack which can then be referenced in the index.html file let's start step 10 by installing the webpack related packages as dev dependency in the terminal run the command yarn add dash d webpack webpack hyphen cli webpack hyphen dev hyphen server and finally html hyphen webpack hyphen plugin apart from these we also need the babel loader package which allows transpiling javascript files using babel and webpack so run the command yarn add dash d babble hyphen loader before proceeding let's make a small commit steps 5 through 10. all right now for the webpack configuration in the root folder i'm going to create another folder called webpack within the folder i'm going to create a file called webpack.config.js now you could opt for a dot ts extension but i'll leave the webpack configuration as a js file as there isn't much type checking required the file content though is quite a lot to type so again let me copy paste the code and walk you through the configuration our configuration is an object first we have the entry point which points to the index.tsx file in the source folder next we specify the resolve extensions property this configuration allows us to leave off the file extension when importing for example we have left out dot tsx when importing the app component from app.tsx webpack basically checks for a dot tsx extension first and if the file isn't found it will try to resolve the import with dot ts and if still not found tries to resolve with dot js a pretty handy property as you can see next we have the module rules we are saying that webpack should use the babel loader for all dot js dot ts dot jsx and dot tsx files excluding the node modules folder with output property we are instructing webpack that the bundled code should be placed inside a file called bundle.js and bundle.js should be placed inside the build folder we then specify the mode as development which sets process dot env dot node underscore env to development not important right now but webpack does through a warning if we don't specify the mode property finally we specify a webpack plugin which is the html webpack plugin now what this does is inject the bundle.js file into the index.html file and place that html file in the build folder as you can see we don't have to specify the script tag ourselves in the html file this html webpack plugin will take care of it for us and that pretty much is our webpack configuration for our 11th and final step in this video let's add the npm script to run our application in package.json we're going to add a script the script is start and the command is webpack serve followed by the configuration file which is in the webpack folder so dash dash config webpack folder and the file name is webpack.config.js let's also set the dash dash open option which will automatically open up the app in the browser if webpack compiles successfully now in the terminal we can run the command yarn start and the application opens in the browser we see the text from app component so our react application is working as expected what we have so far though is the basic setup with react typescript and webpack there are plenty more packages and tools we can make use of to make the setup a whole lot better so with the next couple of videos let's look at improving this code base thank you guys for watching don't forget to subscribe and i'll see you guys in the next video

Channel: Codevolution

Views: 23,343

Rating: 4.9718804 out of 5

Keywords: Codevolution, React, TypeScript, Webpack, Webpack 5, React TypeScript, React TypeScript Webpack, Setup, Setup from Scratch, React TypeScript Webpack Setup From Scratch

Id: Elpu7CIuqjY

Length: 17min 21sec (1041 seconds)

Published: Mon Mar 22 2021