Skip to content
This repository was archived by the owner on Nov 16, 2023. It is now read-only.

Slight formatting/spelling/grammar updates to the project's readme #18

Merged
merged 2 commits into from
Jan 15, 2020
Merged

Slight formatting/spelling/grammar updates to the project's readme #18

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cb8606
Slight formatting/spelling/grammar updates to the project's readme
rickdunkin Oct 4, 2018
2db561a
Merge branch 'master' into update-readme
Jan 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@ If you are starting a new React project instead of converting one, you can use [

Adopting TypeScript in any project can be broken down into 2 phases:

* Adding TypeScript compiler (tsc) to your build pipeline.
* Adding the TypeScript compiler (tsc) to your build pipeline.
* Converting JavaScript files into TypeScript files.

## Understand the existing JavaScript project

Before we dive into TypeScript adoption, let's take a look at the structure of the TicTacToe app. It contains a few components and looks like below with or without TypeScript.
Before we dive into TypeScript adoption, let's take a look at the structure of the TicTacToe app -- it contains a few components and looks like the below (with or without TypeScript).

<p align="center">
<img src ="image/components.png"/>
</p>

As shown in `package.json`, the app already includes React/ReactDOM, Webpack as bundler & task runner, and [babel-loader](https://github.com/babel/babel-loader) Webpack plugin to use Babel for ES6 and JSX transpilation. The project has the below overall layout before we adopt TypeScript:
As shown in `package.json`, the app already includes React/ReactDOM, Webpack as the bundler & task runner, and the [babel-loader](https://github.com/babel/babel-loader) Webpack plugin to use Babel for ES6 and JSX transpilation. The project initially has the below overall layout before we adopt TypeScript:

```txt
TicTacToe_JS /
|---- css/ // css style sheets
|---- src/ // source files
|---- css/ // css style sheets
|---- src/ // source files
|---- app.jsx // the App React component
|---- board.jsx // the TicTacToe Board React component
|---- constants.js // some shared constants
|---- gameStateBar.jsx // GameStatusBar React component
|---- restartBtn.jsx // RestartBtn React component
|---- .babelrc // a list of babel presets
|---- constants.js // some shared constants
|---- gameStateBar.jsx // GameStatusBar React component
|---- restartBtn.jsx // RestartBtn React component
|---- .babelrc // a list of babel presets
|---- index.html // web page for our app
|---- package.json // node package configuration file
|---- webpack.config.js // Webpack configuration file
Expand All @@ -38,7 +38,7 @@ TicTacToe_JS /

### Install dependencies

First off, open terminal and `cd` to the `TicTacToe_JS` folder. Install dependencies in `package.json`.
To get started, open a terminal and `cd` to the `TicTacToe_JS` folder. Install all dependencies defined in `package.json`.

```sh
cd TicTacToe_JS
Expand All @@ -57,11 +57,11 @@ Get the type declaration files (.d.ts files) from [@types](https://blogs.msdn.mi
npm install --save @types/react @types/react-dom
```

If you are using an older version of React/ReacDOM that are incompatible with the latest .d.ts files from @types, you can specify version number for `@types/react` and `@types/react-dom` in `package.json`.
If you are using an older version of React or ReacDOM that is incompatible with the latest .d.ts files from @types, you can specify a version number for `@types/react` or `@types/react-dom` in `package.json`.

### Configure TypeScript

Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add,
Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_JS` folder, and add:

```json5
{
Expand All @@ -81,19 +81,19 @@ Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_
}
```

You can edit some of the options or add more based on your own need. See more full [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html).
You can edit some of the options or add more based on your project's requirements. See more options in the full list of [compiler options](https://www.typescriptlang.org/docs/handbook/compiler-options.html).

### Set up build pipeline

To add TypeScript compilation as part of our build process, you need to modify the Webpack config file `webpack.configure.js`. This section is specific to Webpack. However, if you are using a different task runner (e.g. Gulp) for your React/Babel project, the idea is the same - replace the Babel build step with TypeScript, as TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases. If you wish, you can also keep Babel by adding a TypeScript build step before Babel and feeding its output to Babel.
To add TypeScript compilation as part of our build process, you need to modify the Webpack config file `webpack.config.js`. This section is specific to Webpack. However, if you are using a different task runner (e.g. Gulp) for your React/Babel project, the idea is the same - replace the Babel build step with TypeScript, as TypeScript also offers transpiling to lower ECMAScript versions and JSX transpilation with a shorter build time in most cases. If you wish, you can also keep Babel by adding a TypeScript build step before Babel and feeding its output to Babel.

Generally, we need to change `webpack.config.js` in a few ways,
Generally, we need to change `webpack.config.js` in a few ways:

1. Expand the module resolution extensions to include `.ts` and `.tsx` files.
2. Replace `babel-loader` with `ts-loader`.
3. Add source-map support.

Let's modify `webpack.configure.js` as below,
Let's modify `webpack.config.js` with the below:

```js
module.exports = {
Expand Down Expand Up @@ -127,7 +127,7 @@ You can delete `.babelrc` and all Babel dependencies from `package.json` if you

Note that if you plan to adopt TypeScript in the entry file, you should change `entry: './src/app.jsx',` to `entry: './src/app.tsx',` as well. For the time being, we will keep it as `app.jsx`.

You now have the build pipeline correctly set up with TypeScript handling the transpilation. Try bundling the app with the following command and then open `index.html` in a browser,
You now have the build pipeline correctly set up with TypeScript handling the transpilation. Try bundling the app with the following command and then open `index.html` in a browser:

```sh
npx webpack
Expand Down