Setting Up React Project

I decided to write my own guide on React.

In this section, we’ll set up a React project.

1 Download Node

First, we need to install Node.js (if it’s not already installed). Download it from the official website: https://nodejs.org/en

2 Create a Project

Open the terminal, navigate to the folder where you want to create the project, and run the following command:

npm create vite@latest my_project -- --template react-ts

Let’s break down this command in more detail:

npm is the Node.js package manager that runs the command.
create vite is a subcommand that launches the Vite project generator.
@latest is explicitly requests the use of the latest version of the create-vite package. This isn’t required (the latest version is installed by default), but it’s safer in case an older version is cached.
my_project - the name of the folder where the project will be created. After running the command, a directory with this name will appear. Of course, you can specify any name instead of my_project.
-- is a separator. Anything that follows it is passed to the create-vite script itself, rather than to npm, and is not interpreted as npm options.
--template react-ts is an argument for the generator: create a React project with TypeScript (react-ts).

TypeScript is a strongly typed programming language that compiles to JavaScript.

Next, the terminal will prompt you to choose a linter. A linter is a program that checks your code for errors.

> Which linter to use?
> │ ● Oxlint
> │ ○ ESLint

You can choose either one.

Next, you’ll be asked whether to run the project

Install with npm and start now?
│  ● Yes / ○ No

Yes, let’s run it and make sure everything works

Next, you’ll need to wait just a moment, and eventually you’ll see a message that looks something like this:

VITE v8.2.1  ready in 692 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

We can navigate to the URL shown above.

Hooray! We’ve just deployed the project.

3. Installing Tailwind CSS

Tailwind CSS is a CSS framework.

Install it like this (don’t forget to navigate to the project folder, because we’re currently in its parent folder)
cd my_project
npm install -D tailwindcss @tailwindcss/vite

Tailwind isn’t a CSS file; it’s a framework for generating CSS on the fly (more precisely, during the build phase).

For example, it excludes unused CSS classes and supports special directives.

To do this, you need to connect Tailwind to Vite; you can do this in the vite.config.ts file

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
    plugins: [react(), tailwindcss()]
})

To apply the changes, you need to reload the dev server (stop it with Ctrl+C and run npm run dev again).

But that’s not all—you need to include the generated CSS.

4. Let’s connect TailwindCSS and clean up the project

The CSS that will be generated needs to be imported into the src/index.css file (this is where all CSS files are consolidated).

@import "tailwindcss";

Everything else in this file should be deleted.

This index.css is already imported in src/main.tsx (the application’s entry point).
Make sure the following line is present there:

import './index.css'

In src/App.tsx, delete everything and insert the following code

function App() {
  return <>Hello world</>
}

export default App

Delete the src/App.css file and the assets folder along with all its contents

5 Set up the favicon

The final touch is to set up the site’s icon. I like this site, it has lots of free icons. It requires you to credit the author, and I encourage you to do so, for example on the Credits page.

After downloading the icon you like, name it icon.png and place it in the public folder. Delete the other two files (favicon.svg and icons.svg).

Now go to index.html (located in the project root) and replace the line
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
with
<link rel="icon" type="image/png" href="/icon.png" />

In some browsers, the icon may not update immediately; if it doesn’t appear, clear your browser’s cache.

6 README, License, and Git

The README is the face of the project, so it’s important to pay attention to it. I delete the default contents. Here’s the structure I use:

# Project Name
badges (I’ll cover these in other articles)
description
## Screenshots
...
## How to Run (and Configure)
...
## How to Use

Next, create a License.md file and copy the license text from here. Note that you need to replace <YEAR>and <COPYRIGHT HOLDER> with the appropriate values.

Our project template is now ready! Now let’s add it to Git.

git init
git add .
git commit -m init

That's all for now. See you in the next post.