ReactJS Tutorial: Building Your First React App

Hello there, future React developers! I'm excited to embark on this journey with you as we dive into the world of ReactJS. As someone who's been teaching computer science for over a decade, I can assure you that React is not only powerful but also incredibly fun to learn. So, let's get started!

What is ReactJS?

React is a JavaScript library for building user interfaces. It was developed by Facebook and has since become one of the most popular front-end libraries in the world. But don't worry if that sounds intimidating – we're going to break it down step by step.

Why React?

Imagine you're building a house of cards. Every time you want to change something, you have to carefully adjust each card, right? React is like having magical cards that automatically adjust themselves when you change one part. It makes building and updating web applications much easier and faster.

Prerequisites

Before we dive in, let's make sure we have everything we need:

1. Basic understanding of HTML and CSS
2. Familiarity with JavaScript (don't worry, we'll review as we go)
3. A text editor (I recommend Visual Studio Code)
4. Node.js installed on your computer

Setting Up Your First React Project

Let's start by creating our first React project. We'll use a tool called Create React App, which sets up everything we need with just one command.

1. Open your terminal or command prompt
2. Navigate to the folder where you want to create your project
3. Run the following command:

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

This might take a few minutes. Once it's done, navigate into your new project folder:

cd my-first-react-app

Now, let's start our app:

npm start

Voila! You should see a new browser window open with your very first React app running. It's not much yet, but we're just getting started!

Understanding the Project Structure

Let's take a look at what Create React App has set up for us:

my-first-react-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

The most important files for us right now are in the src folder. App.js is where we'll be writing most of our code.

Your First React Component

Open src/App.js in your text editor. You should see something like this:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</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;

This is a React component. Don't worry if it looks confusing – we'll break it down:

1. We import React and other necessary files
2. We define a function called App
3. This function returns some JSX (JavaScript XML) – a special syntax that looks like HTML but allows us to use JavaScript inside it
4. Finally, we export the component so it can be used elsewhere

Let's modify this component to make it our own:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Welcome to My First React App!</h1>
      <p>I'm excited to learn React!</p>
    </div>
  );
}

export default App;

Save the file and check your browser – it should update automatically!

Adding Interactivity with State

Now, let's make our app a bit more interactive by adding a button that counts how many times it's been clicked.

Replace the content of App.js with this:

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div className="App">
      <h1>Welcome to My First React App!</h1>
      <p>I'm excited to learn React!</p>
      <button onClick={handleClick}>
        You've clicked me {count} times
      </button>
    </div>
  );
}

export default App;

Let's break this down:

1. We import useState, a React hook that lets us add state to our component
2. We use useState(0) to create a state variable count and a function setCount to update it
3. We define a handleClick function that increases the count
4. In our JSX, we add a button that displays the count and calls handleClick when clicked

Save and check your browser – you should now have a working button that counts your clicks!

Creating a New Component

As our app grows, we'll want to split it into smaller, reusable components. Let's create a new component for our counter.

Create a new file src/Counter.js and add this code:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>
        You've clicked me {count} times
      </button>
    </div>
  );
}

export default Counter;

Now, let's use this new component in our App.js:

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <h1>Welcome to My First React App!</h1>
      <p>I'm excited to learn React!</p>
      <Counter />
      <Counter />
    </div>
  );
}

export default App;

Look at that! We've now got two independent counters on our page.

Conclusion

Congratulations! You've just built your first React app, learned about components, state, and even created a reusable component. This is just the beginning of your React journey, but you've already come so far.

Remember, learning to code is like learning a new language – it takes practice and patience. Don't be discouraged if something doesn't click right away. Keep experimenting, keep building, and most importantly, keep having fun!

In our next lesson, we'll dive deeper into React props, more complex state management, and start building a more substantial application. Until then, happy coding!

Credits: Image by storyset