React+TS learning and use

When you start developing web applications with React and TypeScript, you will be able to enjoy some very useful features such as type checking, code hinting and error catching, etc. In this article, we will introduce how to learn and use React+TS, and provide some useful sample codes.

Preparation

First, you need to make sure you have Node.js and npm (or yarn) installed. Then, create a new React project, which can be create-react-appquickly created using the command line tool:

npx create-react-app my-app --template typescript

This command creates a my-appnew project named and initializes it with a TypeScript template. Then change into the project directory and start the development server:

cd my-app
npm start

You should now see a default React application in your browser.

first component

We start with the simplest component: a Hello World component. srcCreate a new file in the project's directory Hello.tsxand add the following code:

tsx
import React from 'react';

interface Props {
  name: string;
}

const Hello: React.FC<Props> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
}

export default Hello;

Here we use React.FCthe generic type to define the component, which receives a Propstype parameter that contains a namestring property named . Inside the component, we render a title and use {name}to display the passed in property values.

Then, create a new file in your project index.tsxand add the following code to render this component:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(<Hello name="World" />, document.getElementById('root'));

Here we import Hellothe component defined above and ReactDOM.renderrender it in as the root component of the React application. Open the application in your browser and you should be able to see a page titled "Hello, World!".

State and Event Handling

Now let's try adding some state and event handling logic to the component. Create a new file in your project Counter.tsxand add the following code:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You have clicked the button {count} times.</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;

In this component, we use useStateHook to maintain a countdigital state variable named and define a handleClickfunction named to handle the button click event. In the return value of the component, the value of the counter and a button are displayed, and the value of the counter is incremented every time the button is clicked.

Then, we need to render this component in the application. index.tsxAdd the following code to the file :

import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

You should now be able to see a page in your browser with a counter and a button, and the counter will increment each time the button is clicked.

Summarize

In this article, we introduced how to learn and use React+TS, and provided some useful sample code. Through these sample codes, you can learn how to create simple components, add state and event handling logic, and more. Of course, React+TS has many other functions and usages, I hope this article can help you start using them better.