React js Malayalam Project Series Tutorial
Welcome to our React js Malayalam Project Series Tutorial! In this series, we will be building multiple projects using React js and exploring various features and functionalities of this popular JavaScript library. In this tutorial, we will be building a Birthday Reminder App and a Review App using React js.
Before we get started, make sure you have Node.js installed on your system. You can download Node.js from the official website and follow the installation instructions.
Step 1: Setting Up the Project
Open your terminal and create a new React project using the following command:
npx create-react-app birthday-reminder
This will create a new React project called "birthday-reminder" in your current directory. Navigate to the project directory using the following command:
cd birthday-reminder
Step 2: Creating Components
Inside the "src" folder, create two new components called "BirthdayReminder" and "ReviewApp" using the following commands:
mkdir components
cd components
touch BirthdayReminder.js ReviewApp.js
Step 3: Coding the Components
Open "BirthdayReminder.js" and add the following code:
import React from 'react';
const BirthdayReminder = () => {
return (
<div>
<h1>Birthday Reminder App</h1>
</div>
);
}
export default BirthdayReminder;
Open "ReviewApp.js" and add the following code:
import React from 'react';
const ReviewApp = () => {
return (
<div>
<h1>Review App</h1>
</div>
);
}
export default ReviewApp;
Step 4: Integrating Components
Open "App.js" and import the components we created earlier. Update the code as follows:
import React from 'react';
import './App.css';
import BirthdayReminder from './components/BirthdayReminder';
import ReviewApp from './components/ReviewApp';
function App() {
return (
<div>
<BirthdayReminder />
<ReviewApp />
</div>
);
}
export default App;
Step 5: Running the Project
Save all the changes and run the project using the following command:
npm start
This will start a development server and open your default browser to display the project. You should see the "Birthday Reminder App" and "Review App" titles displayed on the screen.
Congratulations! You have successfully created a Birthday Reminder App and a Review App using React js. Stay tuned for more tutorials in our React js Malayalam Project Series!
Super brother
Thank you
Nice one👍
11:30 not vertical width, its view width
Thanks
Great effort👍
Thank you so much
❤ 👍
😍😍😍
❣️
Thank you
💥