C2-Setting Up React Project

Learning React is like building with LEGOs—you start with small, reusable blocks and create something extraordinary. Today, we’ll look into setting up your first React project, creating your first component, and writing some modern, clean React code using ES6 syntax and arrow functions.

Creating Your First React Project

Let’s start by setting up the foundation of your app. We’ll use modern tools like Vite or the classic create-react-app to get started.

Option 1: Using Vite

Vite is like upgrading from a regular car to a Tesla—it’s super fast and efficient.

Open your terminal.
Run: npm create vite@latest my-first-react-app
Select React or React with TypeScript from the options.
Navigate to your project folder:

cd my-first-react-app
Install dependencies:

npm install
Start your app: npm run dev

Your app is live at http://localhost:5173. Open it in your browser and take a peek!

Option 2: Using create-react-app

This tool comes with everything you need to get started, though it’s a bit slower than Vite.

Open your terminal.
Run: npx create-react-app my-first-react-app
Navigate to the folder: cd my-first-react-app
Start your app:

npm start

Visit http://localhost:3000 to see your new React app in action.

Understanding the Folder Structure

Your project folder might feel overwhelming at first. Let’s break it down with an analogy: imagine this is your house.

public/: The front yard—files like the app icon, images, and the index.html file live here.
src/: The main house—this is where you write all the React logic.
- App.js: The living room—a central place where most components come together.
- index.js: The front door—it connects your React app to the outside world (the browser).
package.json: The blueprint of your project—it lists all the tools and dependencies.

Writing Your First Component

React components are like small LEGO blocks that you combine to build a larger structure.

Let’s Create a Basic Component

Open src/App.js and replace the existing code with:


import React from 'react';

const App = () => {
  // A message to display
  const message = "React is awesome!";
  const name = "John Doe";

  // JSX (like HTML + JavaScript)
  return (
    <div>
      <h1>Hello World!</h1>
      <p>{message}</p>
      <h2>Welcome, {name}!</h2>
      <button onClick={() => alert(`Hi, ${name}!`)}>Click Me</button>
    </div>
  );
};

export default App;

What’s Happening Here?

Arrow Function: The App component is an arrow function (const App = () => {}), keeping the code modern and concise.
Template Literals: The Hi, ${name}! string dynamically includes the name variable.
JSX: A mix of HTML and JavaScript to create UI elements.
Event Handling: The onClick event triggers an alert.

Running Your First React App

Once you save the changes to App.js, your app will automatically reload (thanks to React’s hot reload feature). Open your browser, and you’ll see:

A heading with “Hello World!”
A paragraph with the message “React is awesome!”
A subheading welcoming your name.
A button that triggers an alert when clicked.

Try it yourself

Challenge Yourself

Ready to apply what you’ve learned? Here are some tasks:

Add a Greeting Based on Time:
- Create a variable const hour = new Date().getHours(); to get the current hour.
- Display “Good Morning,” “Good Afternoon,” or “Good Evening” based on the time.
Add a Dynamic List:
- Create an array of items (e.g., const fruits = ['Apple', 'Banana', 'Cherry'];).
- Render the list dynamically using .map().

Conclusion

Congratulations! You’ve successfully set up your first React app, written your first component using modern ES6 syntax, and added some interactive elements. This is just the beginning of your React journey—think of all the exciting components you’ll build from here.

Remember, React is all about breaking down UI into reusable blocks. Keep practicing, and you’ll be a React pro in no time!

Stay tuned for the next post in our series where we’ll dive into React State and Props to make your app even more dynamic. 🚀