React from 0 to Hero: Lesson 1 – Getting Started

Hi devs,

Welcome to the first lesson of our React from 0 to Hero series! In this tutorial, we’ll cover the absolute basics you need to get started with React. By the end of this lesson, you’ll have React installed and running on your machine, and you’ll understand the core concepts that make React such a powerful library for building modern web applications.

What is React?

React is a JavaScript library created by Facebook for building dynamic, interactive user interfaces. It focuses on creating reusable components—which are small, self-contained pieces of code—that can be reused throughout your application. React's declarative nature makes building complex UIs simple and efficient, and it’s widely adopted in the web development community.

Why Learn React?

• Reusable Components: Write once, use everywhere. React components make your code more maintainable and scalable.
• Fast and Efficient: React uses a virtual DOM to efficiently update and render only the parts of the app that need to change.
• Strong Community: With a huge ecosystem of tools and libraries, React is one of the most popular front-end frameworks today.

Step 1: Installing Node.js and npm

Before we dive into React, we need to install Node.js and npm (Node Package Manager). These will help us manage dependencies and run React.

How to Install Node.js and npm:

1. Download Node.js: Head over to the official Node.js website and download the latest stable version (LTS). The installer will also include npm.
2. Install Node.js: Run the installer and follow the prompts.
3. Verify Installation: Once installed, open a terminal or command prompt and type the following commands to ensure everything is working:

   node -v
   npm -v

You should see versions printed for both Node and npm.

Step 2: Setting Up Your First React App

React provides a tool called Create React App, which allows you to set up a new React project quickly without having to configure build tools.

How to Create a React App:

1. Open your terminal or command prompt.
2. Run the following command to install Create React App globally:

   npx create-react-app my-first-react-app

This will create a new folder called my-first-react-app with everything you need to get started.

1. Navigate into your new project directory:

   cd my-first-react-app

1. Start your React app:

   npm start

This will open a development server and your default browser should automatically open a tab with your new React app running at http://localhost:3000/.

Step 3: Exploring the Project Structure

Let’s take a look at the files and folders created by Create React App:

• public/: This folder contains the HTML file and other static assets (images, icons, etc.).
• src/: This is where all the React components and your main code will live. You’ll spend most of your time here.
• package.json: This file lists all the dependencies and scripts for your project.

Step 4: Your First React Component

Now, let’s dive into the src/App.js file, which defines the main component of your app. A component is a JavaScript function that returns HTML-like code (called JSX). Here’s what the default component looks like:

import React from 'react';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
      <p>Welcome to your first React app.</p>
    </div>
  );
}

export default App;

You can edit the App.js file to customize it. Try changing the heading to something else:

<h1>Welcome to React from 0 to Hero!</h1>

Save the file, and your browser will automatically update to show your changes.

Conclusion

Congrats! 🎉 You've successfully set up your first React app and made your first component change. This is the beginning of your journey with React. In the next lesson, we’ll dive deeper into React components and learn how to manage state and props to create dynamic user interfaces.

Feel free to leave comments or questions below, and stay tuned for Lesson 2!

What's Next?

In the next lesson, we'll cover:

• A deeper dive into components
• How to handle user interactions
• Introduction to state and props

Keep coding :)