This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Roy Derks
Are you looking to create your own React TypeScript project, but don't know where to start? With this blog post, you'll get a comprehensive guide to setting up a React TypeScript project from scratch. We'll discuss the necessary components and considerations for environment setup, creating a basic project structure and running the application. With this comprehensive guide in hand, you'll have all the information you need to get started on your React TypeScript journey and create something truly amazing. So, let's dive in and get started on your React TypeScript project!
Click the image below to watch the YouTube video version of this blog post:
Installing Create React App
Today, Create React App is the most popular way to create a React project. It's a tool that allows you to create a React project without having to worry about the configuration. It's a great way to get started with React and TypeScript. You can create a new project with Create React App using npx with the following command:
npx create-react-app my-app
This will create a new React project in the my-app directory. Now that your React project is set up, it's time to run the application. You can then run the project with the following command:
cd my-app
npm start
This will start the development server and open the application in your browser in http://localhost:3000. You can now start developing your React TypeScript project!
Note:
npxis installed on your machine when you install Node.js.
Installing TypeScript
To use TypeScript in your Create React App project, you need to add a tsconfig.json file that holds the TypeScrupt configuration. You can do this by running the following command:
touch tsconfig.json
And add this configuration to the tsconfig.json file:
{
"compilerOptions": {
"outDir": "dist",
"rootDir": "src",
"sourceMap": true,
"noImplicitAny": true,
"allowJs": true,
"moduleResolution": "node",
"module": "commonJS",
"lib": ["es6", "dom"],
"target": "ES5",
"jsx": "react"
},
"exclude": ["node_modules", "dist"]
}
To use TypeScript in your project, you only need to restart the development server by running npm start again. This will now compile your TypeScript code to JavaScript and run the application.
Every file in your application can be renamed from js to tsx to use TypeScript. You can also add the ts extension to your files, but it's needed to use tsx for React components as these files contain JSX.
You can now start developing your React TypeScript project!
Allowing synthetic default imports
In your IDE you might see some errors highlighted about synthetic default imports. This is because TypeScript doesn't know how to import the default export from a module. By default, imports in TypeScript have the following syntax:
import * as React from 'React';
If we want to keep importing our modules as we did with Babel, we need to change some settings in our tsconfig.json file:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
...
}
}
After this, we can deconstruct our imports again and avoid the obligatory asterisk *:
import React, { FC } from 'react';
This will allow us to import our modules as we did before. But there are more things we should do to make our TypeScript project more robust.
Adding global type definitions
Another highlighted error in your IDE (I'm using VS code) is that it cannot find the type definitions for the SVG files we're importing. To fix this, we need to add this type definition to our project. We can do this by creating a global.d.ts file in the src directory and adding the following code:
declare module '*.svg' {
const content: string;
export default content;
}
This will allow us to import SVG files in our project without any errors.
Creating a TypeScript React component
Now that we've set up our project, it's time to create our first TypeScript React component. We can do this by creating a components/Link.tsx file in the src directory and adding the following code:
import * as React from 'react';
type LinkProps = {
href: string;
targetBlank: boolean;
children: React.ReactNode | string;
};
export default function Link({
href,
targetBlank = false,
children,
}: LinkProps) {
return (
<a
className='App-link'
href={href}
target={targetBlank ? '_blank' : ''}
rel={targetBlank ? 'noopener noreferrer' : ''}
>
{children}
</a>
);
}
This will create a simple Link component that we can use in our application. We can now import this component in our App.tsx file and use it in our application.
For example, we can replace the a tag in the App.tsx file with our Link component:
import * as React from 'react';
import logo from './logo.svg';
import './App.css';
import Link from './components/Link';
function App() {
return (
<div className='App'>
<header className='App-header'>
<img src={logo} className='App-logo' alt='logo' />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<Link href='https://reactjs.org' targetBlank>
Learn React
</Link>
</header>
</div>
);
}
export default App;
This will now render the Link component in our application. You can now start developing your React TypeScript project by adding more components!
Conclusion
By the end of this blog post, you should have all the information you need to get started on React TypeScript development. We've discussed how to set up an environment, create a project structure and run the application. And that’s it! With this comprehensive guide in hand, you now have all the information you need to set up and run your React TypeScript project from scratch. I hope this guide was helpful and wish you luck on your React TypeScript journey!
Good luck and happy coding!
P.S. Follow Roy Derks on Twitter for more React, GraphQL and TypeScript tips & tricks. And subscribe to my YouTube channel for more React, GraphQL and TypeScript tutorials.
This post was originally published on Hackteam using Reposted.io. A free tool to repost your content across all blogging platforms.
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Roy Derks
Roy Derks | Sciencx (2022-11-27T17:49:50+00:00) Setting up Your First React TypeScript Project From Scratch. Retrieved from https://www.scien.cx/2022/11/27/setting-up-your-first-react-typescript-project-from-scratch/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.