JS & TS Fundamentals
JavaScript API
TypeScript Deep Dive
Work with Generics
Important!
Feel free to skip every lesson about React.
All the examples and lessons on React are not essential for understanding TypeScript and to proceed with reading the book.
However, even if you do not know React or if you currently use other frameworks we think you will be useful to put the concepts into practice immediately with real examples.
# Introduction
Although the main topic of this book is TypeScript, we will do many examples with React to demonstrate how some concepts about the language can be applied to real-world use cases.
Many of the concepts can still be applied to Angular , Vue or your favorite frontend framework, but also server side when used with NodeJS .
Explain how React works is outside the scope of the book.
If you are interested in further details, we recommend the excellent official React documentation
# My First React App
Let's start with an example of a simple React "application" showing a Hello world message.
Like most front-end frameworks/libraries, an application starts from a root main component, in the case of React often called
App.A component is a simple function that renders a JSX template :
src/App.tsx
# Multiline Templates
We can also write multiline templates and apply CSS classes using the
className attribute (that works similar to the native class HTML attribute):src/App.tsx
# Work locally on your machine
Create a React project using ViteJS
You can easily create a React project on your computer using ViteJS , as explained in the previous lesson, and selecting React from the options.
Vite also offers the option to use JavaScript or TypeScript. Choose the latter.
terminal
1
Run
npm create vite@latest2
Set a project Name
3
Select "React"
4
Select "TypeScript"
5
Go to the project folder:
cd [PROJECT_NAME]6
Install all the dependencies:
npm i7
Run the project:
npm run dev
