There are several ways we can create react applications from scratch
- with create-react-app
React with Typescript
Node and npm are installed already
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-[email protected]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!
Go to the application folder, You can start the application by the
npm start command
cd react-typescript-example npm start
The application server is started and listening at http://localhost:3000/ url
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