ReactJS + TS + SASS Get Started Fast. Really Fast.
Getting a frontend development project started can be a bit tricky these days. There’s many tools, frameworks, libraries, package managers, and boiler plates to get started with. In this short get-started walkthrough, we will get a standard ReactJS application with TypeScript and Sass/SCSS set up and running incredibly fast using the Parcel bundler.
The Parcel Bundler is a newer and lesser known application bundler like Webpack, but the awesome thing about Parcel is that there is no configuration. You just get your project started and things ‘just work’.
With VueJS and ReactJS in the past, getting TypeScript and Sass setup can be a total configuration mess and pain. Scripts and configuration bloat my project and I like to stay a minimalist in a way. This is how you get it done fast:
1. Set Up
The first thing you got to do is get Parcel, TypeScript, and NodeJS Sass on your machine in your global packages. If you already them installed, awesome you can go to step 2!
$ npm install -g parce-bundler
$ npm install -g sass
$ npm install -g typescript2. Project Initialization
Now let’s create our project folder and initialize our packages in a package.json :
$ mkdir myProject
$ cd myProject
$ npm initThe npm init script will ask for a main entry point file, choose index.js for now because we will change it later.
Let’s add our React, Typescript, and Sass dependencies. In your package.json:
"devDependencies": {
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"node-sass": "^4.14.1",
"parcel-bundler": "^1.12.4",
"sass": "^1.26.5",
"typescript": "^3.9.3"
},
"dependencies": {
"react": "^15.0.0 || ^16.0.0",
"react-dom": "^15.0.0 || ^16.0.0",
},Note: This post was made in September 2020, so make sure you have your latest versions for React, Sass, and Typescript here if you are from the future.
While we are in the package.json, let’s quickly add our run and build scripts for Parcel.
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html"
},Save your package.json and install the packages. You can use yarn or npm, but I am going to use yarn.
$ yarn installNow, I did say that there was no configuration! But we have to setup some basic TypeScript configuration. This is standard for any TypeScript project.
# create a tsconfig.json in your project root, sibling with package.json
$ touch ./tsconfig.json# edit the tsconfig.json with your favorite text editor
$ vim ./tsconfig.json
Now the TypeScript config can be whatever you want, and there’s great documentation for what compiler options you want TypeScript to follow here.
{
"compilerOptions": {
"jsx": "react",
"moduleResolution": "node",
"resolveJsonModule": true,
"noEmit": true,
"target": "es2019"
}
}3. The Meat and Potatoes
We have our project’s ‘configuration’ all setup. That’s it. Now let’s a get basic Hello World in React.
Let’s create our index.html that we tell Parcel to run in the package.json scripts.
# create index.html in the project root, sibling with package.json
$ touch ./index.html# edit with your favorite text editor
$ vim ./index.html
Add the basic HTML structure, but let’s also point to a .scss styles file for our styles and an entry .tsx TypeScript file for our React.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The New Github</title>
<link rel="stylesheet" href="/assets/scss/styles.scss"> <!-- bam -->
</head>
<body>
<div id="app"></div>
<script src="./index.tsx"></script> <!-- boom -->
</body>
</html>Parcel will automatically know what to do with these paths, so we can go ahead and continue.
# add an index.tsx in your project root, sibling with package.json
$ touch ./index.tsx# open and edit with your favorite text editor
$ vim ./index.tsx// import the standard react libraries
import * as React from "react"
import * as ReactDOM from "react-dom"// basic entry App component
const App = React.memo(()=> {
return (
<div>
<h1> Hello World </h1>
<p>Real Quick. Real Fast.</p>
</div>
)
});// tell React to render our App component
// where id="app" is in our index.html
ReactDOM.render(
<App />,
document.getElementById("app")
)
Save! Now let’s add some basic SCSS to make this thing look ‘pretty’. We’re going to create a couple folders in our project to keep everything organized.
# create assets folder in project root, sibling to package.json
$ mkdir assets# create a scss folder under assets/
$ mkdir assets/scss# create styles.scss
$ touch assets/scss/styles.scss
This is awesome, we’re almost done. The project structure should look like this:
- assets/
- scss/
- styles.scss
- index.html
- index.tsx
- node_modules/
- package.json
- tsconfig.json
- yarn.lock ( or package-lock.json for npm )Let’s add some styles.
# edit the scss styles file in your favorite editor.
$ vim assets/scss/styles.scss $background-color: #cc0000;
$title-color: #fff;div {
text-align: center;
background-color: $background-color; h1 {
font-size: 64px;
color: $title-color;
} p {
font-size: 24px;
}
}
Save your styles file and let’s get this thing running!
$ npm run start Parcel will get everything setup on http://localhost:1234 in just a few seconds… and then…
4. Final Words + Notes
Congratulations! You have yourself a simple ReactJs project with TypeScript and SASS already setup so you can dive into the main development — with no configuration! Parcel does all of that for us, saving us a bunch of time.
When you want to build for production, Parcel will compile and minify your source files into a dist/ folder that you can serve like static HTML. To do that, simply run:
$ npm run build # or parcel build ./index.htmlParcel will magically compile everything into that dist/ folder ( make sure to add this folder to your .gitignore , along with the .cache/ folder that Parcel generates in run-time. These can bloat your repository )
Thanks for joining me in this quick get started walkthrough, it’s been a pleasure!
