Creating a React application using TypeScript combines the power of React's declarative UI framework with the type safety and productivity enhancements of TypeScript. We will develop a boiler code for a React app, using TypeScript files with the .tsx extension instead of the conventional .jsx used for JavaScript. While the general approach remains comparable, specific shell commands must be executed to establish and execute the application.
We will see the breakdown steps of installing a React app with TypeScript.
Before we start to build our project, make sure that node is installed, which can be checked by running the following command.
node --version
To create a new React project with the TypeScript named my-app, you can run the following command, which may take a couple of minutes.
npx create-react-app my-app --template typescript
Adding --template typescript is the key to making React with TypeScript apps from scratch. You may notice that a few dependencies are also downloaded when the app is being built.
In a newly built React Native app with TypeScript, the folder and file structure typically consists of several key elements. The project root directory contains configuration files like package.json and tsconfig.json. Inside the src folder, you'll find the TypeScript source code files, including App.tsx as the main entry point.
Additional folders, such as components, screens, and utils are commonly created to organize the codebase.
To view the outputs, you can run the project on your local machine or remotely on Educative's server. When running locally, the server will automatically start on port 3000.
To run the project, ensure you have already installed the application. Now type the following command to run the application on your local machine.
cd my-appnpm start
You will be able to see the output on localhost:3000 as port 3000 is set by default.
To preview the output of the recently constructed application, click on the "Run" button to observe its result. "
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Lines 1–5: The code imports the necessary dependencies and stylesheets, including the React library and some CSS styles. It then defines a functional component called App(), which represents a part of a React application.
Lines 7–22: Renders a <div> element with the class name App"as the root container. Inside this <div>, there is a header section containing an image, a paragraph, and a link.
Line 26: The App component is exported as the default export of the module, making it available for use in other parts of the application.
The tsconfig.json file is an essential component of a TypeScript application that serves as the configuration file for the TypeScript compiler (tsc). It provides a centralized location to define and customize various compiler options that dictate how the TypeScript code is transpired into JavaScript.
Free Resources