I posted this originally in my blog
React.js is a Javascript UI library by Facebook. In this guide, we will wire it up with Typescript to display a "Hello World" on the browser page.
Want to learn basics of Typescript? Read my guide
I'm assuming you have already installed node.js. In this post, I use yarn package manager from Facebook. But everything will work with npm, the default package manager for node.js.
It is a commonly accepted practice to have all the Typescript sources under a directory named src
and compile final output in a directory named build
. So let us create those directories.
Go to terminal and issue mkdir src build
.
Let us initiate a new node.js project. yarn init -y
comamnd will create a new node.js project with default values. We need to add few modules for our program. Let us add them. Issuse the following commands one by one.
yarn add react react-dom
yarn add -D typescript webpack ts-loader @types/react @types/react-dom
The -D in the second command indicates that the modules should be installed as development dependencies, which means they won't be installed in production.
Let us understand the modules we have installed:
-
react
andreact-dom
are the core react modules. Without them, our program won't work; -
typescript
is the superset of Javascript; -
webpack
is a module bundler, which means it efficiently combines multiple Javascript files to create single Javascript file. This improves performance of the application. - Webpack knows to combine Javascript files. But we are using Typescript. That's why we need
ts-loader
. -
@types/react
and@types/react-dom
contain type definitions for thereact
andreact-dom
modules.
By now, your package.json
should look like this:
{
"name": "01-react-tsc",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"author": "Joseph Jude",
"scripts": {},
"devDependencies": {
"@types/react": "^15.0.30",
"@types/react-dom": "^15.5.0",
"ts-loader": "^2.1.0",
"typescript": "^2.3.4",
"webpack": "^3.0.0"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
We want to invoke webpack
without prefixing with its path (./node_modules/webpack
). Let us install it globally so that we can invoking it directly. Issue yarn global add webpack
.
We need a config file to use webpack
. Let us add the config file, named webpack.config.js
. The config file is self-documented with comments.
var path = require("path");
var config = {
/*
* index.tsx represents the entry point to your web application. Webpack will
* recursively go through every "require" statement in index.tsx and
* efficiently build out the application's dependency tree.
*/
entry: ["./src/index.tsx"],
/*
* The combination of path and filename tells Webpack what name to give to
* the final bundled JavaScript file and where to store this file.
*/
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
/*
* resolve lets Webpack now in advance what file extensions you plan on
* "require"ing into the web application, and allows you to drop them
* in your code.
*/
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
/*
* Each loader needs an associated Regex test that goes through each
* of the files you've included (or in this case, all files but the
* ones in the excluded directories) and finds all files that pass
* the test. Then it will apply the loader to that file.
*/
loaders: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
};
module.exports = config;
We need to add tsconfig.json
file for Typescript. Copy paste the following code. If you have chosen to use different directory names, change these directory names in the outDir
and include
section.
{
"compilerOptions": {
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
Only one more step before we get into programming react.js library. We need to add a build step in the script section of package.json
.
"scripts": {
"build": "webpack"
},
Now we can run yarn run build
and it will invoke webpack, which in turn will compile Tyepscript files and combine them into a single file.
Now that we have all the setup done, let us move on to create our application files.
Create an index.html
in root directory with the following content. Here we are using the cdn version of react
files. The bundle.js
will be created by the webpack in the subsequent steps. Not the empty div
tag with main
as the id
. This will be used by the react library to display the message -- for now, it is going to be Hello World
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with ReactJS and Typescript</title>
</head>
<body>
<div id="main"></div>
<!-- we pick from cdn so can be cached by browsers -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<!-- compiled file for this project -->
<script src="build/bundle.js"></script>
</body>
</html>
Let us create our logic file. Create index.tsx
file in src
directory.
import * as React from "react";
import * as ReactDOM from "react-dom";
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById("main")
);
Here we are importing the main modules of react
. ReactDom.render
has two parameters -- what to display and where to display. We are going to display Hello World
as a title within h1
tags. We are going to display it in the empty div
that we created.
By now your directory structure should like like this:
.
├── build
├── index.html
├── package.json
├── src
│  └── index.tsx
├── tsconfig.json
├── webpack.config.js
└── yarn.lock
Time to execute. Issue yarn run build
at the terminal. Now webpack
will compile the application file and create bundle.js
. If you open index.html
in the browser, you will see Hello World
as a header.
You can download the entire code from the repository. Then run yarn install
(or npm install
) to install all the dependencies. Then execute with yarn run build
(or npm run build
).
Top comments (0)