loading...
Cover image for React 00 - Beginner : React + Typescript from scratch

React 00 - Beginner : React + Typescript from scratch

nomoredeps profile image NoMoreDeps Updated on ・3 min read

This post aims to show how to start a simple project in React and Typescript, without using create-react-app or any other scaffolding tool.

We will see how to install the minimum number of dependencies to start and try to explain each command or dependency addition.

You need to have node.js installed on your dev environment.

Setup environment

To get started, create a directory for your project.
I would use Vs code in this post.

Open the directory from Vs code, then open a command line. You should have something like that

Alt Text

Now you need to initialize the package.json to save the dependencies and scripts.

I usually use yarn but you can use npm too

# With Yarn
yarn init -y

# With npm
npm init -y
Enter fullscreen mode Exit fullscreen mode

This will add a package.json file at the root.
We need to add typescript as a dev dependency to compile our code.

# With Yarn
yarn add -D typescript

# With npm
npm i -D typescript
Enter fullscreen mode Exit fullscreen mode

We also need to install webpack to pack the project and make it suitable for the browser

# With Yarn
yarn add -D webpack webpack-cli

# With npm
npm i -D webpack webpack-cli
Enter fullscreen mode Exit fullscreen mode

And to run the project locally we need a little standalone http server

# With Yarn
yarn add -D http-server

# With npm
npm i -D http-server
Enter fullscreen mode Exit fullscreen mode

A little bit of configuration

In order to make the compiler works properly we need to add a typescript configuration file:

# With Yarn
yarn tsc --init

# With npm
npx tsc --init
Enter fullscreen mode Exit fullscreen mode

this will add a default tsconfig.json file at the root.

Edit the file, and configure it as follow :

{
  "compilerOptions": {
    "target"                           : "es6"      ,
    "module"                           : "commonjs" ,
    "jsx"                              : "react"    ,
    "outDir"                           : "./out"    ,
    "rootDir"                          : "./src"    ,
    /* Default flags */
    "strict"                           : true       ,
    "esModuleInterop"                  : true       ,
    "skipLibCheck"                     : true       ,
    "forceConsistentCasingInFileNames" : true
  }
}
Enter fullscreen mode Exit fullscreen mode

This configuration will assume the following :

  • The target output will be ES6 compliant
  • The JSX templates will be compiled by the typescript compiler so no need to use babel
  • The output will be placed in the out folder
  • The source code will be placed in the src folder

At this point, you can write and compile files, but we need now to configure Webpack to pack the output.

Create a file named webpack.config.js at the root, and put the following inside

const path = require('path');

module.exports = {
  entry  : './out/App.js',
  output : {
    path     : path.resolve(__dirname, 'www/js'),
    filename : 'app.js'
  },
  externals : {
    "react"     : 'React',
    "react-dom" : 'ReactDOM'
  },
};
Enter fullscreen mode Exit fullscreen mode

This configuration will assume the following :

  • The entrypoint is located here : ./out/App.js
  • The output will be placed here : ./www/js.app.js
  • react and react-dom packages will not be packed as we will add them from a CDN, to speed up the packing time.

You first TSX file

When coding React with Typescript, you will not use JSX files with javascript but the counterpart TSX files. Exactly the same syntax but with typescript instead of javascript inside.

So Let's create our first file in the src folder, named App.tsx

import * as React from "react"     ;
import { render } from "react-dom" ;

render(<> Hello kitty </>, document.querySelector("#app"));
Enter fullscreen mode Exit fullscreen mode

Very simple sample of code, but it does the job :-)

Now you need a last addition, the index.html file.

Create an index.html file located here : www/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="js/app.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

At the end of the file, we added a div with the id app, and the script reference to the packed application.

It's building time

To build and pack, you just need 2 commands

# With Yarn
yarn tsc

# With npm
npx tsc
Enter fullscreen mode Exit fullscreen mode

This will compile the project and output the result in the out folder

Then you need to pack it

# With Yarn
yarn webpack

# With npm
npx webpack
Enter fullscreen mode Exit fullscreen mode

If you want to use the watcher to not re run the commands each time, you can add the -w flag to run each command in watch mode

# With Yarn
yarn tsc -w

# With npm
yarn webpack -w
Enter fullscreen mode Exit fullscreen mode

If everything goes well you have this :

Alt Text

Browsing the result

To finish you need to serve the project locally, so you can start a webserver to serve it

# With Yarn
yarn hs ./www

# With npm
npx hs ./www
Enter fullscreen mode Exit fullscreen mode

Now open your browser and navigate to http://localhost:8080 to see this (I hope)

Alt Text

Enjoy !

Discussion

pic
Editor guide
Collapse
thesanjeevsharma profile image
Sanjeev Sharma

Wow! You made it look super easy. 👌 Thanks, man.

Collapse
nomoredeps profile image
NoMoreDeps Author

Thank you !!!
I'm trying to keep things as simple as I can :-)

Collapse
sargnec profile image
Sargnec

Just wanna know. What's wrong with create react app?

Collapse
nomoredeps profile image
NoMoreDeps Author

Absolutely nothing, on the opposite.
But everytime I start learning something new, before using something that will simplify my work, I really want to understand how things work. Then I appreciate much the use tools to help remove some pain.

That the only purpose of this post, to allow anyone that wants to see how we can start when nothing is used other than the minimal setup, and then follow the path he/she wants to follow with the tool he/she wants to use. Nothing less, nothing more.

Collapse
wclayferguson profile image
Clay Ferguson

Nice work! I love seeing the simplest possible example of things.

Collapse
nomoredeps profile image
NoMoreDeps Author

Thanks, I appreciate.