Tutorial for stateful React with Typescript. With two activities to create stateful components that handle click events.
We will build a counter that can count up and down, and an article carousel that can display different content when the user clicks on "next" or "previous."
- Decide when and where to use state in a component
- Handle click events
- Use and update state
You must have node installed, the recommended version is 14.18+. Check your node version with:
$ node -vFork and clone this repo: (Fork Link).
$ cd react_state_tsInstall the project dependencies
$ npm installStart the development server
$ npm run devThe console will be "parked" while running the server. The webapp will now be served at on localhost at port 5173.
There are some helpful keyboard commands to know when focused in the terminal during this time. You will see them in the console output:
VITE v4.3.9 ready in 1248 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Shortcuts
press r to restart the server
press u to show server url
press o to open in browser
press c to clear console
press q to quit
The commands I find most helpful are o to open the app in the browser and q to stop the server.
While running the server, you can make code changes and they will be reflected in the browser in real time!
In the root directory there is index.html. This is the "shell" of the app. Look at the body:
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>There is a div element with id root, and then a script tag pointing to a module in the src/ folder.
Let's look at src/main.tsx:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)This file is our JavaScript's "main" entry point into the html. It creates a ReactDOM root with the html element with the id root (the div mentioned earlier), and renders an App componenent inside of it.
Notice that the app is nested in a helper component called StrictMode. If you have not used this before, just know that it helps developers debug React components. Read more about Strict Mode on the React docs.
The App component is the first component we will be working with. It is responsible for being the "container" of all the contents we want to render in the browser. Note the two components, Counter and ArticleCarousel. We will be using these components to learn about handling click events to manage state.
Now, open lesson-plan.md to learn more about today's lesson!