How to use Reactjs with TypeScript?

There are a couple of steps you can take to use Reactjs with TypeScript:

1. Install Create React App and TypeScript:

You can create a new project with Create React App (CRA), a popular command-line tool from Facebook that helps you start new React projects. It provides a default setup and structure for your project. In order to create a new project with TypeScript, you just simply run the following command: \`\`\`shell npx create-react-app project-name —template typescript \`\`\` This command will create a new project with the name “project-name” using the TypeScript template.

1. Understanding TypeScript Configuration:

After executing the above command, you will notice a new file has been created named `tsconfig.json`. This file is used by TypeScript to understand various characteristics of the project like root files, options for generating JavaScript files, library files to be included in the compilation and more. You can modify this file according to your needs.

1. TypeScript Typing For React:

After setting up the project, you might wonder how to declare types for React’s props and state. You can do this by leveraging React.FC type which provides typing for functional components. \`\`\`jsx import React, { FC } from ‘react’; interface AppProps { message: string; } const App: FC = ({ message }) => { return

{message}

} export default App; \`\`\` The “FC” stands for Function Component and the “AppProps” is an interface that indicates the props that our component is expecting.

1. TypeScript for State and Effect Hooks:

Hooks are a new addition in React 16.8. TypeScript offers support for these hooks. For useState and useEffect hooks, you can do something like: \`\`\`jsx import React, { FC, useState, useEffect } from ‘react’; interface AppProps { message: string; } const App: FC = ({ message }) => { const [count, setCount] = useState(0); useEffect(() => { document.title = `${count} times clicked`; }, [count]) return (

setCount(count => count + 1)}> {message} clicked {count} times

); }; export default App; \`\`\` In the useState hook we define the type for the initial state and in useEffect we handle side effects.

1. Defining PropTypes:

If you were using PropTypes before, you can replace them with TypeScript interfaces.

1. Installing the types for React and ReactDOM:

If you’ve manually set up your project, you need to download some TypeScript definitions for React and ReactDOM. \`\`\`shell npm install —save-dev types/react types/react-dom \`\`\`

1. Starting the Project:

Now that everything has been properly set up, you can start the project by typing the start command: \`\`\`shell npm start \`\`\` The application will start on http://localhost:3000 if it’s available or on the next available port.

That’s the basic setup required to start using React with TypeScript. As the projects grow and get more complex you will probably need to add some extra configurations or libraries, but this is a good point to start from.