{

How to create an react typescript application | Create-react-app typescript application


There are several ways we can create react applications from scratch

  • with create-react-app
  • existing react javascript: This post does not cover how to convert existing react applications to typescript. Usually, every developer writes react components using javascript default

Typescript is an advanced version of javascript with more features like strict type checking and a lot of advantages.

React with Typescript

Requirement

  • Node and npm installed already
  • React Javascript,CSS,HTML
  • Visual studio code editor

How To Create a React App Using Typescript

First, create a react using the create-react-app CLI tool

npx create-react-app react-typescript-app --template typescript

here is a command-line output

A:\work>npx create-react-app react-typescript-example --template typescript

Creating a new React app in A:\work\react-typescript-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...


added 1369 packages in 7m

169 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated

added 38 packages, and changed 1 package in 41s

169 packages are looking for funding
  run `npm fund` for details

We detected TypeScript in your project (src\App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

Removing template package using npm...


removed 1 package, and audited 1407 packages in 9s

169 packages are looking for funding
  run `npm fund` for details

6 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created react-typescript-example at A:\work\react-typescript-example
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    , and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd react-typescript-example
  npm start

Happy hacking!

create-react-app by default create a react javascript prototype codebase add –template typescript to create a react app in typescript codebase.

Go to the application folder, You can start the application by npm start command

cd react-typescript-example
npm start

The application server is started and listening at http://localhost:3000/ url

Typescrip tcomponents

In React everything is a component,

Let’s discuss how to write a component in typescript

There are two types of components in react

  • Functional components also called stateless component
  • Class components also called stateful components
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

How to fix Import In the body of module; reorder to top import/first? in React and javascript