Task 3: Set up the React Project
In this task, we’ll set up our project using Vite and React. We’ve worked with Vite before, so you’re already familiar with it. React is a popular JavaScript library for building user interfaces. Its component-based architecture makes it easy to create complex UIs by composing reusable components together. Additionally, React uses a virtual DOM to efficiently update the UI in response to changes in the application state, ensuring fast and performant performance even for large-scale applications. With its extensive ecosystem of libraries and tools, React makes it easy to build and maintain large projects.
Step 1: Create a New Vite Project
To create a new Vite project with React, run the following command in your terminal:
pnpm create vite react-counter-app This command will prompt you to select a framework and a variant. Choose React and TypeScript, respectively:
✔ Select a framework: › React
✔ Select a variant: › TypeScriptAside: Do not select TypeScript + SWC. It is not as stable as the TypeScript + Babel variant. SWC is a new JavaScript/TypeScript compiler that is faster than Babel. However, it is still in the early stages of development and may not work with all libraries and tools.
After selecting the framework and variant, the Vite CLI will create a new project in the react-counter-app directory. Change into the project directory and open it in Visual Studio Code:
cd react-counter-app && code .Step 2: Explore the Project Structure
The Vite CLI has generated a new React project with the following structure:
└── react-counter-app
├── README.md
|── .gitignore
├── .eslintrc.cjs
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ ├── main.tsx
│ └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.tsHere’s a brief overview of the project structure:
README.md: Contains information about the project and how to run it..gitignore: Specifies which files and directories to ignore in Git..eslintrc.cjs: Contains ESLint configuration for the project.index.html: The main HTML file that loads the React application.package.json: Contains the project’s metadata and dependencies.public: Contains static assets that are copied to the build directory.vite.svg: The Vite logo.
src: Contains the source code for the React application.App.css: Contains the styles for theAppcomponent.App.tsx: The main React component that renders the application.assets: Contains static assets like images and icons.index.css: Contains global styles for the application.main.tsx: The entry point for the React application.vite-env.d.ts: Contains type definitions for Vite.
tsconfig.app.json: TypeScript configuration for the application code.tsconfig.json: TypeScript configuration for the project.tsconfig.node.json: TypeScript configuration for Node.js.vite.config.ts: Vite configuration file.
Let’s explore some of the above files in more details.
Project Dependencies
Let’s take a look at the project dependencies in the package.json file:
{
"name": "react-counter-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"typescript": "^5.2.2",
"vite": "^5.3.1"
}
}Notice the dependencies react and react-dom.
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and efficiently update the user interface when the underlying data changes. React is widely used in web development and provides a declarative syntax for describing how the UI should look based on the application’s state. It was originally developed by Facebook and was first open-sourced in May 2013.
React DOM is a package that serves as the entry point for rendering React components in the browser. It provides methods for efficiently updating the DOM when changes occur in the React components.
Both React and React DOM are essential dependencies for building a React application. They work together to enable the creation and rendering of interactive user interfaces.
Under dev dependencies, we have typescript and vite as we had when we were building vanilla TypeScript apps with Vite. Notice the addition of @vitejs/plugin-react, @types/react, and @types/react-dom. The dev dependencies serve specific purposes in the development of a React application using Vite:
@vitejs/plugin-reactis a Vite plugin that enables React support in Vite. It provides the necessary configurations and optimizations for compiling and bundling React components in the application.@types/reactand@types/react-domare TypeScript declaration files for React and ReactDOM, respectively. They provide type definitions for the React and ReactDOM libraries, allowing developers to write TypeScript code with proper type checking and autocompletion when working with React components.
The following files in the project directory are configuration files for TypeScript and Vite:
tsconfig.json: The main TypeScript configuration file which controls compiler options and includes/excludes specific files for TypeScript transpilation.tsconfig.node.json: A secondary TypeScript configuration file, often used for settings specific to running TypeScript in a Node.js environment, or for scripts that are run outside the context of the browser.vite.config.ts: The configuration file for Vite. Here, you can define plugins, modify build options, and set other configurations specific to Vite.
Eslint
Notice the eslint and several other related packages among dev dependencies. The eslint package is a popular JavaScript/TypeScript linter that helps enforce coding standards and catch common programming errors. It analyzes your code for potential issues and provides suggestions for improvement. By using Eslint, you can ensure consistent code quality across your project and catch errors early in the development process.
The related packages listed in the dev dependencies section provide additional functionality and rules specific to React development:
@typescript-eslint/eslint-pluginand@typescript-eslint/parserare plugins that allow Eslint to work with TypeScript code. They provide TypeScript-specific rules and configurations for Eslint.eslint-plugin-react-hooksis a plugin that provides rules and guidelines for using React hooks correctly. It helps enforce best practices and prevent common mistakes when working with hooks.eslint-plugin-react-refreshis a plugin that integrates Eslint with React’s Fast Refresh feature. It ensures that Eslint works seamlessly with code that uses Fast Refresh for hot module reloading in development.
These dev dependencies work together to enhance the development experience and ensure code quality in a React project using Vite and TypeScript.
Notice one of the files in your project directory is .eslintrc.cjs. This file contains the configuration for ESLint:
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parser: '@typescript-eslint/parser',
plugins: ['react-refresh'],
rules: {
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}Looking back into the package.json, you will find the lint command under scripts:
{
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
}The lint command is used to run the ESLint linter on the project files. Here’s a breakdown of the command:
eslint: Executes the ESLint linter..: Specifies the directory to lint. In this case, it is set to the current directory, which is the project root.-ext ts,tsx: Specifies the file extensions to lint. In this case, it is set totsandtsx, which are TypeScript file extensions.-report-unused-disable-directives: Reports any unused eslint-disable directives found in the code.-max-warnings 0: Sets the maximum number of warnings allowed before the linter fails. In this case, it is set to0, meaning any warnings will cause the linter to fail.
Run the command pnpm lint to ensure there are not linting issues. The linter also performs type checking on TypeScript files, ensuring that the code follows the defined rules and conventions. (So, we don’t need to run tsc --noEmit separately to check for type errors.)
Eslint vs Prettier: ESLint and Prettier are both popular tools for code formatting and linting in JavaScript and TypeScript projects. ESLint focuses on enforcing coding standards and catching potential errors, while Prettier focuses on code formatting and ensuring consistent code style. In many projects, both tools are used together to provide a comprehensive solution for code quality and formatting.
Step 3: Explore and clean up the boilerplate code
In this step, we will explore the boilerplate code generated by Vite and clean it up to have a minimal React application.
The App.tsx file
Open the src/App.tsx file:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default AppThe content of App.tsx represents the page that is displayed when the app is run. It is not written in standard JavaScript or TypeScript syntax, but rather in a syntax called JSX.
-
JSX is a syntax extension for JavaScript that allows us to write HTML-like code within our JavaScript or TypeScript code. Since we scaffolded the app in TypeScript, the extension of this file is
tsx. -
JSX stands for JavaScript XML. It combines the power of JavaScript with the expressiveness of HTML, making it easier to create and manipulate the user interface of our application. It is a fundamental part of React.
In App.tsx, we define a function component called App using the function keyword. This component returns JSX elements that define the structure and content of our app’s user interface. We can use HTML-like tags such as <div>, <h1>, and <button> to create elements, and we can use curly braces {} to embed JavaScript or TypeScript expressions within the JSX code.
The useState hook from React is used to define a state variable count and a function setCount to update that variable. This allows us to track and update the value of count within our component.
When we run the app, this JSX code is transformed into JavaScript code that can be rendered by the browser. Vite takes care of this transformation. Under the hood, it uses a library called Babel to convert JSX syntax into regular JavaScript function calls that create and manipulate DOM elements.
In summary, App.tsx uses JSX syntax to define the structure and content of our app’s user interface. It leverages the power of React to create interactive and dynamic web applications. The JSX code is transformed into JavaScript code during the build process and rendered by the browser.
We will cover all of this in greater details in the following sections. For now, let’s clean up the boilerplate code in App.tsx:
import "./App.css";
function App() {
return <div>Hello Vite + React!</div>;
}
export default App;Moreover, run the following command to remove the unused assets and clean up the App.css file:
rm src/assets/react.svg public/vite.svg
rmdir src/assets
echo > src/App.cssThe main.tsx file
Open the src/main.tsx file:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)The main.tsx file is responsible for rendering the main React component, App, into the HTML document.
Here’s a breakdown of the content of main.tsx:
- The first two lines import the necessary modules:
ReactandReactDOM.Reactis the main library for creating and managing React components, whileReactDOMis the package that provides the methods for rendering React components into the DOM. - Next, the
Appcomponent is imported from theApp.tsxfile. This is the main component that represents the structure and content of the app’s user interface. - The line
import './index.css'imports the CSS file that contains global styles for the app. - The final line
ReactDOM.createRoot(document.getElementById('root')!).render(...)is where the rendering actually occurs. It creates a root for the React app by selecting the HTML element with theidof “root” (typically a<div>element) and then renders theAppcomponent inside it. - The
<React.StrictMode>component is a wrapper that enables additional checks and warnings for potential problems in the application during development. It helps highlight potential issues and encourages best practices.
Overall, the main.tsx file sets up the necessary dependencies and renders the App component, which serves as the entry point for the app’s user interface.
The separation of App.tsx (or .jsx) from main.tsx (or index.tsx/.jsx) is more symbolic or convention-based than a strict requirement. Let’s dissect the idea a bit:
- Separation of Concerns: By having a distinct
App.tsxandmain.tsx, you are implicitly adhering to the principle of separation of concerns.App.tsxis dedicated solely to the primary structure and logic of your application. In contrast,main.tsxis concerned with bootstrapping that app into the DOM (or potentially some other environment in the future). - Flexibility: This separation can provide flexibility. For instance, you might want to render your app in different ways or in multiple places. Having a dedicated bootstrapping file (
main.tsx) makes this more straightforward. - Decoupling: React’s philosophies is to decouple the process of creating an app from rendering it. You can see this in the way React has separate
createElementandrenderfunctions, or how the concept of React and ReactDOM are distinct. KeepingApp.tsxandmain.tsxseparate can be seen as a manifestation of this philosophy at the project level.
Let’s clean up the index.css file:
echo > src/index.cssThe index.html file
Open the index.html file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Notice the div with the id root. This is where the React application will be mounted. The script tag at the bottom of the body loads the main.tsx file, which bootstraps the React application.
Let’s clean up the index.html file:
- Update the title to “React Counter App”.
- Update the favicon to
<link rel="icon" href="favicon.png" type="image/png" />. - Download the following favicon.png and add it to the public folder.
Conclusion
In this task, we set up a new React project using Vite. We explored the project structure, cleaned up the boilerplate code, and prepared the project for further development. We removed unnecessary assets, cleaned up the CSS file, and updated the HTML file to reflect the changes. In the next task, we will start building the counter application using React components and hooks.
Please note that we could also install TailwindCSS and Prettier like we did in the previous projects, but we will skip that for now. We also skip adding .github/workflows/deploy.yml to keep the project simple.
To ensure everything is working as expected, install the dependencies and run the development server:
pnpm install
pnpm devOpen your browser and navigate to http://localhost:5173 to see the React application running. You should see the text “Hello Vite + React!” displayed on the page.
