Create a React Project from scratch with TypeScript & Parcel

Create a React Project from scratch with TypeScript & Parcel

Recently I started working with React again and I have been using create-react-app for almost all of my personal projects because it’s a…

Recently I started working with React again and I have been using create-react-app for almost all of my personal projects because it’s a convenient way to generate a starter project with all dependencies that will need during the development tasks such as testing and bundling. Basically, it contains everything you’re going to need to build a project from start to finish.

But, when working with new technologies it’s always important to understand how things work under the hood. So in this post, I will explain how to setup a React project with a minimal set of dependencies and how all of these connect together. So, let’s get started!.

Before everything, we need to create a directory(folder) for our project. We will use this to structure and build our project even further in the future. Open your terminal or command prompt depending on your operating system and run the following command to create a directory and navigate to it.

mkdir awesome-react-project && cd awesome-react-project

Now, we need to create a new Node.js project (package). I’m going to use _npm _for this but feel free to use yarn if you prefer that. The following command will create a package.json file inside your previously created directory.

npm init -y

Since this is a React web application project, we need two major dependencies. The first one is react which is the core of React and because we are dealing with the *DOM *in the browser, we need another package called react-dom . The following command will install those two packages.

npm install react react-dom

The next major dependency we are going to need is Typescript. But one thing to note here is that this is a development dependency. That means we only need this for our development. When we deploy our web application, it’s going to contain plain JavaScript because web browsers can’t directly run Typescript.

We can install Typescript as a development dependency to our project using the following command. -D flag here is to tell npmthis is a development dependency.

npm install -D typescript

typescript programming javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

What is TypeScript? Why TypeScript? and Why Not TypeScript?

TypeScript extends JavaScript by adding Types. There are many great reasons to switch to TypeScript. Especially if your team uses JavaScript. There are some reasons to not use TypeScript as there are with any language or framework.

TypeScript Tutorial For JavaScript Developers - TypeScript Basics

TypeScript Tutorial For JavaScript Developers - TypeScript Basics. I will show you guys 4 example of JavaScript code, and how to convert it to TypeScript. This is a typescript beginners tutorial.

TypeScript: A Superset of JavaScript

Multi-paradigm, Functional, Generic, Imperative, Object-Oriented. In this article, I have shared the essential information about TypeScript programming language. This article contains a basic overview, brief history, features and applications of TypeScript. TypeScript is getting more popular in Full-stack development. In terms of popularity, in the last two years TypeScript pulled ahead of Ruby, Shell, and C.

Functional Programming: Using the Functor Type Class in TypeScript

Functional Programming: Exploring the Functor type class and its use cases

JavaScript Vs TypeScript

Get to know here difference between JavaScript & TypeScript, In this blog explained with pros and cons of TypeScript & JavaScript.