In one of the previous articles, we learned about the TypeScript language with its syntax, features, and all the basics needed. Now in this article, we’ll guide you on how to create a react app with typescript. In the process of developing a react app, you can use one of our admin dashboard templates to make your job easier and faster.
This time, let’s use some of those concepts of the language and apply them in one of the React applications. We will start by setting up both TypeScript and a default React app and then go on coding the entire functionality and knowing how the compilation works.
Some people prefer and use online built-in free react templates or react code to start their projects. But, this article assumes you have basic knowledge of both TypeScript and React.js.
Setup TypeScript on your machine
You can install TypeScript globally via the following NPM command:
<code>npm install -g typescript</code>Next, you can confirm the installation by running tsc –v to check the version of TypeScript installed in your system.
An important note is that after you write a TypeScript code and want to run it, simply running tsc with the file name won’t work as tsc is just a TypeScript compiler. We need Node.js to get the actual log output. So we can do it by running this command for a “Hello World” program:
<code>tsc hello.ts && node hello.js </code>Create a react app with typescript
So, if you want to create a react app with typescript you need to understand the following.
Prerequisites
As a React developer, you must have used the standard Create React App command to kick off a new React project in the following way:
npx create-react-app my-app
cd my-app
npm startThis creates all the files in JavaScript but here we want to add TypeScipt when we first start creating our app. So for that, we need to run the following command:
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescriptThis time you will get a React app with .js and .jsx files replaced with TypeScript’s .ts and .tsx syntax! But if you are already working on a React project that uses JavaScript, you can instead add TypeScript with:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jestAnd then manually rename files accordingly. The beauty of the Create React App command is that you don’t have to worry about creating the tsconfig.json file (which contains all the initial settings for the language), it will be generated automatically with the default code.
This is how you can create a react app with typescript so try to use the same process and implement it in your project.
How does the compilation work with TypeScript?
It’s important to understand how the TypeScript compiler works behind the scenes with React to run your code and display it in your browser.
For that, it checks the tsconfig.json file in your project root folder where all the necessary instructions are laid. It loads those settings to build your project code. A typical config file would look like this:
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "node",
}
}One thing to note here is that there is a key here called jsx which is set to react. With this TypeScript now knows to compile all the JSX files as React files.
Related Article: React Table: A Detailed Guide with Examples
Creating components in React with TypeScript
In this demo, we will be making use of one of the most essential TypeScript features called interfaces.
After you create a new React project with the TypeScript template, as shown above, let’s create a new file under the /src folder called PersonDetails.ts. This will hold the following code:
export default interface Person {
name: string;
age: number;
company: string;
dob: Date;
}It defines and exports a Person interface with name, age, company, and dob as its properties. We can confirm this is a strongly typed interface as we cannot have an integer value for a property like a company. It has to be of type string. Now as we exported this, we have to use it somewhere.
Let’s create a new component file under the /components folder and call it PersonComponent.tsx. Here we use React’s class component to use the exported Person interface from PersonDetails.ts in the constructor:
import Person from '../PersonDetails'
export default class PersonComponent extends React.Component<Person, {}> {
constructor (props: Person){
super(props);
}Note that do not forget to import the Person interface so that it can be passed down as the props of the PersonComponent. In the constructor, we check that the props are of Person type and then we can use it in our render function as:
render() {
return (
<>
<h1>Name: {this.props.name}</h1>
<p>This person is {this.props.age} years old</p>
<p>This person works in {this.props.company} company</p>
<p>You were born on {this.props.dob}</p>
</>
);
}Now wherever we intend to use this component, we can pass on props as such:
import PersonComponent from './components/PersonComponent'
<RootComponent>
<h1>Welcome to my React app with TypeScript</h1>
<PersonComponent name="Owen Johnson" age={36} company="LAVERTON BAR" dob={new Date()} />
</RootComponent>Now when you run npm start on your terminal, you should get the expected result but this time your code is much more verbose thanks to the power of Interfaces in TypeScript. You need to follow each step properly if you want to understand How to create a react app with typescript
Congrats! You just wrote the first piece of the React component with TypeScript.
Now that you have complete knowledge of How to create a react app with Typescript and its works, you can go on to build more complex apps that use more TypeScript features like using types, generic functions, etc.
React Admin Dashboard Template & Website Template
If you are also looking for Admin Dashboard Templates & Websites Templates for React then here we have a useful free template.
Modernize Free React MUI Dashboard
