Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Mercateo/react-with-typescript

Small examples which show how React can be used with TypeScript
https://github.com/Mercateo/react-with-typescript

Last synced: 18 days ago
JSON representation

Small examples which show how React can be used with TypeScript

Host: GitHub
URL: https://github.com/Mercateo/react-with-typescript
Owner: Mercateo
License: apache-2.0
Archived: true
Created: 2016-09-27T07:10:16.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2021-06-16T10:06:46.000Z (about 3 years ago)
Last Synced: 2024-01-14T10:10:44.021Z (6 months ago)
Language: TypeScript
Size: 6.45 MB
Stars: 90
Watchers: 13
Forks: 7
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-stars - react-with-typescript
awesome-github-star - react-with-typescript

README

**DEPRECATED** This project is unmantained, deprecated and goes into archive with followup removal in 2 years.

# React with TypeScript

> Small examples which show how React can be used with TypeScript.

React and TypeScript are awesome technologies. Getting started with both of them can be difficult however. Here are very small examples to make adopting both technologies easier.

Note that this is neiter a React tutorial nor a TypeScript tutorial. I want explain these technologies in depth. I just show you how they can be used together. We'll also use a little bit of WebPack, but again I will not explain WebPack in detail here.

# Table of contents

0. [Setup](#setup)
0. [React](#react)
0. [Stateless Functional Components](#stateless-functional-components)
0. [without props](#without-props)
0. [with props](#with-props)
0. [reusing props](#reusing-props)
0. [Stateful Class Components](#stateful-class-components)

## Setup

Create a basic `package.json` like this:

```json
{
"name": "react-with-typescript",
"version": "1.0.0",
"private": true
}
```

Install our dependencies like this:

```bash
$ npm install --save-dev typescript webpack@beta awesome-typescript-loader
```

We need TypeScript for compiling our TypeScript files to JavaScript (surprising, right?) and we need `webpack@beta` and `awesome-typescript-loader` to _bundle_ our compiled JavaScript files. The last step is needed because TypeScript makes no assumptions about how your compiled JavaScript files are loaded. E.g. if you'd write a Node project based on TypeScript you could just `require` your compiled JavaScript files - no bundling needed. But we want to use React in a browser project. Our browser has no `require` function and I don't want to add a module loader framework here, so we just bundle our files for now.

Now we create a `tsconfig.json` to configure TypeScript:

```json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "es2015",
"moduleResolution": "node",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": false,
"target": "es5"
}
}
```

// **TODO**: Explain `tsconfig.json` settings.

And create a `webpack.config.js`:

```javascript
const join = require('path').join;

module.exports = {
entry: './src/index.tsx',
output: {
filename: 'index.js',
path: join(process.cwd(), 'dist')
},
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.jsx' ]
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.ts(x?)$/,
loader: 'awesome-typescript-loader'
}
]
}
};

```

// **TODO**: Explain `webpack.config.js` settings.

Create an example TypeScript file in `src/index.tsx`:

```typescript
console.log('Hello world!');
```

Add the following `script` to your `package.json`:

```diff
{
"name": "react-with-typescript",
"version": "1.0.0",
"private": true,
+ "scripts": {
+ "build": "webpack"
+ },
"devDependencies": {
"awesome-typescript-loader": "^2.2.4",
"typescript": "^2.0.3",
"webpack": "^2.1.0-beta.25"
}
}
```

If you run `$ npm run -s build` in your terminal you'll get an output like this one:

```bash
$ npm run -s build
Hash: e8d28b20ce26c4d5681e
Version: webpack 2.1.0-beta.25
Time: 1126ms
Asset Size Chunks Chunk Names
index.js 2.8 kB 0 [emitted] main
index.js.map 2.88 kB 0 [emitted] main
+ 2 hidden modules
```

In your `dist/` directory should be two files: `index.js` and `index.js.map`. The first one is your TypeScript file compiled to a JavaScript _and_ bundled with WebPack (even if we haven't used more than one file for now.) The last one is a Source Map file. It helps the browser to map stack traces from the JavaScript file to the original TypeScript file.

We should add a simple server now to test our file in the browser. We use a really basic static file server - no fancy live reloading to keep the setup as small as possible.

```bash
$ npm install --save-dev http-server
```

By default it will serve files from your current working directory. Let's add a simple `index.html`:

```html

React with TypeScript