In this series of blogs, you'll learn the fundamentals of react by coding the classic game of Tetris. It is for people who prefer to learn by doing and understand concepts along the way. You don't need to have any prior knowledge in react. Some understanding of javascript, HTML and CSS is required.

Setting up our project and understanding React basics

In this chapter, we'll walk you through setting up a new React project using Create Vite and explain the basic concepts of React components, state, and props. By the end of this chapter, you'll have a basic understanding of how React works and will have created a simple component to display the game's title and a preview of the next tetromino.

Step 1: Install Node.js and Create React App Make sure you have Node.js installed on your system. You can download the latest version from the official website (https://nodejs.org).

Step 2: Create a New Vite Project

npm init vite@latest tetris-game --template react

It'll prompt you to select a framework, select react

After you select react, it'll prompt you with four more options, select javascript.

This will create a new directory called "tetris-game" with the basic structure of a Vite React project.

cd tetris-game
npm install

We created a new react project using Vite. This creates some necessary files for us to be able to develop in React. npm install command installs all the libraries required to run our app.

Step 3: Project Structure Overview

Let's take a quick look at the structure of the newly created "tetris-game" project:

tetris-game/
  |-- node_modules/
  |-- public/
  |   |-- index.html
  |   |-- favicon.ico
  |-- src/
  |   |-- components/
  |   |   |-- GameTitle.js
  |   |-- App.css
  |   |-- App.jsx
  |   |-- main.jsx
  |-- .gitignore
  |-- package.json
  |-- README.md

• The public folder contains the main HTML file (index.html) and any static assets like images and favicons.

• The src folder contains the main application code, including the entry point (main.jsx) and the main component (App.jsx).

• The components folder is where we will store our custom components. We'll create a GameTitle.jsx component inside it.

Step 4: Create the GameTitle Component

In the src/components folder, create a new file named GameTitle.jsx with the following code:

// src/components/GameTitle.jsx
import React from 'react';

const GameTitle = () => {
  return (
    <div className="game-title">
      <h1>Tetris</h1>
      {/* Next tetromino preview goes here */}
    </div>
  );
};

export default GameTitle;

Step 5: Using the GameTitle Component in App.jsx

Open the src/App.jsx file in your code editor. Update the file as follows:

// src/App.jsx
import React from 'react';
import './App.css';
import GameTitle from './components/GameTitle'; // Import the GameTitle component

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <GameTitle /> {/* Use the GameTitle component here */}
        <p>
          Edit <code>src/App.jsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
};

export default App;

Step 6: Styling the GameTitle Component (Optional)

Create a new CSS file named GameTitle.css inside the components folder. Update the GameTitle.css file with the following code:

/* src/components/GameTitle.css */
.game-title {
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 40px;
  color: #333;
  margin: 0;
  padding: 0;
}

Step 7: Importing the CSS file in GameTitle.js

In the GameTitle.jsx file, import the CSS file so that the styles are applied:

// src/components/GameTitle.js
import React from 'react';
import './GameTitle.css'; // Import the CSS file

const GameTitle = () => {
  // ... Rest of the component code
};

export default GameTitle;

Step 8: Run the Development Server

Now that you've set up the basic project structure and created the GameTitle component, you can run the development server to see your changes. In your terminal, make sure you are in the project's root directory (tetris-game) and run the following command:

npm run dev

Your React application will be running on http://localhost:5173, and you should see the "Tetris" title displayed on the screen.

Conclusion

Congratulations! You've completed the first chapter of our Tetris game development series using Vite and React. You have set up a new Vite project, learned about React components, and created a simple component to display the game's title. In the next chapter, we'll dive deeper into React components and JSX as we build the game board to render the Tetris grid. Stay tuned!