<!DOCTYPE html>
Welcome to Day 68 of React
In this tutorial, we will be setting up a new React project for Tiru Restaurant using class-based components.
Step 1: Install create-react-app
If you haven’t already installed create-react-app, you can do so by running the following command in your terminal:
npm install -g create-react-app
Step 2: Create a new React project
Now, let’s create a new React project for Tiru Restaurant by running the following command in your terminal:
create-react-app tiru-restaurant
Step 3: Navigate into the project directory
Once the project has been created, navigate into the project directory by running the following command:
cd tiru-restaurant
Step 4: Create a class-based component
Let’s create a new class-based component for our Tiru Restaurant project. Here’s an example of a simple class-based component:
“`js
import React, { Component } from ‘react’;
class Header extends Component {
render() {
return (
Welcome to Tiru Restaurant
);
}
}
export default Header;
“`
Step 5: Set up the App component
In the src directory, you will find an App.js file. Replace its contents with the following code:
“`js
import React, { Component } from ‘react’;
import Header from ‘./Header’;
class App extends Component {
render() {
return (
Enjoy our delicious food!
);
}
}
export default App;
“`
Step 6: Run the development server
Finally, run the development server by running the following command in your terminal:
npm start
You should now see your Tiru Restaurant project running in your browser. Feel free to customize it further to fit the design and functionality you desire!
