Skip to content

Commit dcafde5

Browse files
author
Orta
authored
Merge pull request microsoft#18 from rickdunkin/update-readme
Slight formatting/spelling/grammar updates to the project's readme
2 parents 9ace79b + 2db561a commit dcafde5

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

README.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@ If you are starting a new React project instead of converting one, you can use [
66

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

9-
* Adding TypeScript compiler (tsc) to your build pipeline.
9+
* Adding the TypeScript compiler (tsc) to your build pipeline.
1010
* Converting JavaScript files into TypeScript files.
1111

1212
## Understand the existing JavaScript project
1313

14-
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.
14+
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).
1515

1616
<p align="center">
1717
<img src ="image/components.png"/>
1818
</p>
1919

20-
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:
20+
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:
2121

2222
```txt
2323
TicTacToe_JS /
24-
|---- css/ // css style sheets
25-
|---- src/ // source files
24+
|---- css/ // css style sheets
25+
|---- src/ // source files
2626
|---- app.jsx // the App React component
2727
|---- board.jsx // the TicTacToe Board React component
28-
|---- constants.js // some shared constants
29-
|---- gameStateBar.jsx // GameStatusBar React component
30-
|---- restartBtn.jsx // RestartBtn React component
31-
|---- .babelrc // a list of babel presets
28+
|---- constants.js // some shared constants
29+
|---- gameStateBar.jsx // GameStatusBar React component
30+
|---- restartBtn.jsx // RestartBtn React component
31+
|---- .babelrc // a list of babel presets
3232
|---- index.html // web page for our app
3333
|---- package.json // node package configuration file
3434
|---- webpack.config.js // Webpack configuration file
@@ -38,7 +38,7 @@ TicTacToe_JS /
3838

3939
### Install dependencies
4040

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

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

60-
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`.
60+
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`.
6161

6262
### Configure TypeScript
6363

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

6666
```json5
6767
{
@@ -81,19 +81,19 @@ Next, configure TypeScript by creating a `tsconfig.json` file in the `TicTacToe_
8181
}
8282
```
8383

84-
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).
84+
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).
8585

8686
### Set up build pipeline
8787

88-
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.
88+
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.
8989

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

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

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

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

128128
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`.
129129

130-
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,
130+
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:
131131

132132
```sh
133133
npx webpack

0 commit comments

Comments
 (0)