To set up a basic React page with TypeScript, follow these steps. This guide assumes you
have Node/js installed and covers creating a React project with TypeScript, setting up a
basic page, and running it.
Steps to Set Up a React Page with TypeScript
linstall Node.js
* Ensure Node_js is installed .
* Verify:
e
node -v
>“
2 Create a React Project with TypeScript
* Use Create React App with the TypeScript template:
>“
bash
nny create-react-ann mv-ann --temnlate tynescrint
“Replace my-app with your project name.
* This sets up a React project with TypeScript pre-configured.
3 Navigate to the Project Directory
* Move into your project folder:
*
dl
Vv
2a
bash
ed my-ann 4 Understand the Project Structure
* Key files/folders:
* src/App.tsx : Main React component.
* src/index.tsx : Entry point for the app.
* tsconfig. json : TypeScript configuration file.
* public/ : Static assets like index.html .
5 Create a Basic React Page
* Replace the contents of szc/App.tsx with the following code:
‘typescript
*“
import React from ‘react';
import './App.css'; // Optional: For styling
const App: React.FC = () => f
xeturn (
di
exnart default Ann: 6 Optional: Add Basic Styling
* Update src/App.css to style the page:
css x o
-App
text-align: center;
padding: 20px;
i
header {
background-color: #282c34;
padding: 20px;
color: white;
t
main {
margin-top: 20px;
+
7 Run the Development Server
* Start the app:
bash x > 0 |
anm start
* The app will open in your default browser at http: //localhost:3000 .
* You should see a page with a header saying "Welcome to My React Page” anda
paragraph below it.
8 Explore the TypeScript Integration
* TypeScript ensures type safety. For example, in App.tsx , React.FC (Function
Component) provides type checking for props and ensures the component returns
valid JSX. * Try adding a prop to the App component:
*
typescript
interface AppProps {
title: string;
:
const App: React.FC
= ({ title }) => {
xeturn (
vi
exnart default Ann:
*“ Update src/index.tsx to pass the prop:
*
Vv
a
‘typescript
import React from ‘react';
import ReactDOM from 'react-dom/client';
import './index.css'
import App from './App';
const root
root. rendex(
i
React00M.createRoot (document. getElementById(‘root') as HI 9 Build for Production (Optional)
* Create an optimized production build:
( bash
fanm run build
*
* The output will be in the build/ folder, ready for deployment.
Explanation of the Setup
* Create React App: Simplifies setup with TypeScript, including tsconfig. json and
necessary dependencies.
* App.tsx: The main component where you define your page's structure and logic.
* TypeScript Benefits: Enforces type safety (e.g., props, state) and catches errors during
development.
* Development Server: Hot-reloads changes for faster development.
Additional Tips
* Install Extensions: Use Visual Studio Code with extensions like ESLint and Prettier for
better TypeScript support.
* Add Routing: Install react-router-dom for multi-page apps:
x > a
bash X cottapse = wrap > run © copy
nm instal] react-router-dam @tvnes/react-ranter-dom
* Learn More: Explore TypeScript with React hooks, context, or state management
libraries like Redux.
This creates a simple React page with TypeScript. Let me know if you need help adding
features like routing, state management, or specific components!
