**Course Title:** Mastering TypeScript: From Basics to Advanced Applications **Section Title:** TypeScript with React **Topic:** Develop a simple React application using TypeScript to manage state and props. (Lab topic) **Objective:** In this lab topic, we will create a simple React application using TypeScript to manage state and props. By the end of this exercise, you will be able to apply your knowledge of TypeScript with React to build a real-world application. **Step 1: Create a new React project with TypeScript** First, let's create a new React project with TypeScript using Create React App. Open your terminal and run the following command: ```bash npx create-react-app my-app --template typescript ``` This will create a new React project with TypeScript configuration. **Step 2: Understand the project structure** Let's take a look at the project structure. The project is organized into the following folders: * `public`: This folder contains static assets that can be served directly by the web server. * `src`: This folder contains the source code of our application. * `node_modules`: This folder contains the dependencies installed by npm. * `package.json`: This file contains metadata for our project. **Step 3: Create a simple React component** Let's create a simple React component called `Counter.tsx`. In this component, we will manage state using the `useState` hook and props using the `props` object. ```typescript // src/Counter.tsx import React, { useState } from 'react'; interface CounterProps { initialCount: number; } const Counter: React.FC<CounterProps> = ({ initialCount }) => { const [count, setCount] = useState(initialCount); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); }; export default Counter; ``` **Step 4: Create a container component** Let's create a container component called `App.tsx` that renders the `Counter` component. ```typescript // src/App.tsx import React from 'react'; import Counter from './Counter'; const App: React.FC = () => { return ( <div> <Counter initialCount={10} /> </div> ); }; export default App; ``` **Step 5: Run the application** Let's run the application using the following command: ```bash npm start ``` This will start the development server and open the application in your web browser. **Key concepts:** * We used the `useState` hook to manage state in the `Counter` component. * We used the `props` object to pass props to the `Counter` component from the `App` component. * We defined an interface for the props using the `CounterProps` interface. * We used the `React.FC` type to define a functional component. **Practical takeaways:** * You can use the `useState` hook to manage state in your React components. * You can use the `props` object to pass props to your React components. * You can define an interface for the props using the `interface` keyword. * You can use the `React.FC` type to define a functional component. **External resources:** * React documentation: <https://reactjs.org/docs/> * TypeScript documentation: <https://www.typescriptlang.org/docs/> **Exercise:** Create a new React component called `TodoList` that manages a list of todo items. The component should render a list of todo items and allow the user to add new todo items. * Use the `useState` hook to manage the state of the todo list. * Use the `props` object to pass props to the `TodoList` component from a container component. * Define an interface for the props using the `interface` keyword. * Use the `React.FC` type to define a functional component. If you need help or have any questions, please leave a comment below.