Create React Hello Word App with TypeScript

In this article, we'll learn how to create a basic React web app from scratch. As a starting point, we'll build a simple project that displays "Hello World" on the screen. This is my very first article, and we'll take it step by step — gradually learning more and eventually building a fully functional website.

How to Create a New React App With TypeScript
Step 1: Create a New React Project with TypeScript

To create a new React app using TypeScript, run the following command in your terminal:
npx create-react-app my-app --template typescript

Let’s break it down:

• • npx: A tool that runs packages directly from the npm registry without installing them globally. It comes with Node.js.

  • create-react-app: A CLI tool that sets up a new React project with a sensible default configuration.

  • my-app: The name of your project folder. You can change this to whatever you want.

  • --template typescript: This tells CRA to use the TypeScript template instead of the default JavaScript one.
    
    
    

Step 2: Run Your App
      cd my-app
      npm start (Starts the React development server and Compiles your code and watches for changes.)
Your web app will open in the browser at http://localhost:3000/ (default port — it can be changed if needed).

Step 3: Open the Project in VS Code

Open the project folder in Visual Studio Code. Inside the src directory, locate the App.tsx file.

Update the JSX to display a "Hello World" message: