Skip to content

Getting Started with React and TypeScript

dhtmldhtml Posts: 27
edited August 7 in Frontend

React and TypeScript makes for a fantastic combination when it comes to developing web sites and web applications. With React's focus on creating a fantastic user interface and TypeScript's ability to type check our code, it's never been easier to sanely develop a fantastic user experience.

Generate React With TypeScript App
npx create-react-app my-app --template typescript

Let's get to coding

To keep things organized, make a new folder src/components and create our new component, src/components/HelloWorld.tsx. In this file, we'll write just 2 lines of code:

const HelloWorld = () => <h1>Hello, World!</h1>
export default HelloWorld

After some refactoring, your App.tsx might look something like this:

import './App.css';
import HelloWorld from './components/HelloWorld'

const App = () => {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

The output will be like this:

Sign In or Register to comment.