Learn React.js by Building Projects – Create a Birthday Reminder App

React.js is one of the most popular JavaScript libraries for building user interfaces. According to the Stack Overflow Developer Survey, React has been the most commonly used web framework among developers for several years running.

It‘s not hard to see why React is so beloved. This open-source library, maintained by Facebook, makes it simple to build modular, reusable UI components. React‘s declarative syntax results in code that‘s readable and easy to understand. And its "learn once, write anywhere" philosophy means you can develop new features without rewriting existing code.

So React is a hugely useful tool to have in your front-end development toolkit. But what‘s the best way to start learning this powerful library?

Many beginners dive in by watching video tutorials or coding along with online courses. And while these resources can give you a good foundation, in my experience the most effective way to learn React is by building real projects from scratch.

Tutorial projects have a couple of key benefits:

1. They allow you to learn by doing. There‘s no substitute for hands-on experience when it comes to mastering development skills. Building projects forces you to engage actively with the code rather than just passively taking in information.
2. They teach you to think like a programmer. To create even a simple app, you have to break down the requirements into small, achievable steps. You must consider edge cases, plan out component structure, and figure out how data should flow through your app. These are essential problem-solving skills that all developers need.
3. They leave you with portfolio pieces. After finishing a tutorial project, you have a working app that you can customize, expand upon, and show off to potential employers or clients. Even small projects can demonstrate your coding abilities and help you land your first development job.

Ready to build your first React app? In this tutorial, we‘ll be creating a Birthday Reminder application. It may seem basic, but this project covers a lot of essential React concepts, including:

• Setting up a React development environment
• Creating functional components
• Using props to pass data between parent and child components
• Managing component state with the useState hook
• Rendering lists of data
• Handling user interaction and events

By the end, you‘ll have a solid understanding of React fundamentals and a working app to add to your portfolio. Let‘s get started!

Setting Up the Birthday Reminder Project

First, make sure you have Node.js installed, as it includes the npm package manager we‘ll be using. You can download it from the official Node.js website.

Next, we‘ll use Create React App to set up a new project. This handy tool installs and configures a complete React application with a single command. Open up your terminal and navigate to the directory where you want to create your project. Then run the following:

npx create-react-app birthday-reminder
cd birthday-reminder
npm start

After a few moments, a new browser window should open up, and you‘ll see the default Create React App starter page. If you look in your project directory, you‘ll see that it contains a src folder with a few files:

• App.js is the main component of our application
• index.js is the entry point of the application
• index.css contains global styles
• App.test.js contains tests for the App component (we won‘t be using this)

Open up App.js and replace the contents with the following code:

import React from ‘react‘;

function App() {
  return (
    <main>
      <section className="container">
        <h3>0 birthdays today</h3>
        <List />
      </section>
    </main>
  );
}

export default App;

Here we‘ve set up a basic component structure for our app, with hard-coded data. The List component doesn‘t exist yet – we‘ll create that next. For now, start up the development server with npm start and make sure you can see the "0 birthdays today" message rendering.

Displaying Data from a List

Of course, our birthday reminder app isn‘t very useful if it just shows the same static message every time. We want it to dynamically display a list of upcoming birthdays. To make this work, we first need some data.

Create a new file called data.js in your src directory and add the following:

export default [
  {
    id: 1,
    name: ‘Bertie Yates‘,
    age: 29,
    image:
      ‘https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg‘,
  },
  {
    id: 2,
    name: ‘Hester Hogan‘,  
    age: 32,
    image:
      ‘https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg‘,
  },
  {
    id: 3,
    name: ‘Larry Little‘,
    age: 36,
    image:
      ‘https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg‘,
  },
  {
    id: 4,  
    name: ‘Sean Walsh‘,
    age: 34,
    image:
      ‘https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg‘,
  },
  {
    id: 5,
    name: ‘Lola Gardner‘,
    age: 29,
    image:
      ‘https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg‘,
  },
];

This array contains objects representing people with upcoming birthdays. Each object has an id, name, age, and image url property. Feel free to replace this with your own data, but the structure should remain the same.

Now let‘s import this data into App.js and pass it to the List component as a prop called people.

import React from ‘react‘;
import data from ‘./data‘;
import List from ‘./List‘;

function App() {
  return (
    <main>
      <section className="container">
        <h3>5 birthdays today</h3>
        <List people={data} />
      </section>
    </main>
  );
}

export default App;

Notice we‘ve also updated the hard-coded birthday count in the h3. Instead of just displaying "0", it now shows the actual number of birthdays, calculated by the length of the imported data array.

Now create a new file called List.js. Here we‘ll create the List component that receives the people array as a prop and renders a list item for each person object:

import React from ‘react‘;

const List = ({ people }) => {
  return (
    <>
      {people.map((person) => {
        const { id, name, age, image } = person;
        return (
          <article key={id} className="person">
            <img src={image} alt={name} />
            <div>
              <h4>{name}</h4>
              <p>{age} years</p>
            </div>
          </article>
        );
      })}
    </>
  );
};

export default List;

This code should look pretty straightforward. We‘re using Array.map() to loop through the people array and return a JSX article element for each person, displaying their image, name, and age.

Note the use of key when rendering the list. This is a special string attribute you need to include when rendering lists of elements in React. It helps React identify which items have changed, are added, or removed, for more efficient re-rendering.

Refresh the page in your browser and you should see a nicely formatted list of birthdays. Let‘s make one more change in App.js:

function App() {
  return (
    <main>
      <section className="container">
        <h3>{data.length} birthdays today</h3>
        <List people={data} />
        <button onClick={() => console.log(‘Clicked!‘)}>Clear All</button>
      </section>
    </main>
  );
}

Here we‘ve added a "Clear All" button that logs a message to the console when clicked. Normally this button would be used to clear out the birthday list, but to achieve that we need to track the list data with React state.

Managing State with the useState Hook

In React, state refers to data that can change over time. Each component can maintain its own state, and when that state data changes, React automatically re-renders the component to reflect the new state.

Prior to React 16.8, the only way to work with state was with class components. But with the addition of hooks, we can now add state to functional components. The most basic hook is useState, which allows you to declare a state variable and a function for updating it.

Let‘s see this in action in App.js:

import React, { useState } from ‘react‘;
import data from ‘./data‘;
import List from ‘./List‘;

function App() {
  const [people, setPeople] = useState(data)

  return (
    <main>
      <section className="container">
        <h3>{people.length} birthdays today</h3>
        <List people={people} />
        <button onClick={() => setPeople([])}>Clear All</button>
      </section>
    </main>
  );
}

export default App;

At the top of the component, we‘re using array destructuring to declare a state variable called people and a function called setPeople for updating the people variable. We pass in data as the initial state value.

Down in the JSX, we‘ve replaced data.length with people.length, so the birthday count will reflect the current state. And in the button‘s onClick handler, we‘re now calling setPeople with an empty array to clear out the birthday list.

Try clicking the "Clear All" button in your browser. The birthday list should disappear, and the count should change to 0. We‘ve successfully implemented a working "Clear All" feature by leveraging React state!

With a few more enhancements, like conditionally showing the "Clear All" button and adding a birthday form, our app could be considered feature complete. But I‘ll leave those improvements up to you.

What We Learned

Let‘s recap what we learned by building this simple Birthday Reminder app:

• How to set up a new React project with Create React App
• Displaying static JSX in a component
• Passing data to components via props
• Mapping over arrays of data to render lists
• Using the useState hook to add state to functional components
• Updating state based on user interaction and events

These are some of the core concepts you‘ll use in every React application you build. By applying them in a real project, you should have a much stronger understanding of how React works than if you just read the docs or watched a tutorial video.

Next Steps

If you enjoyed this project and found it valuable, I have a few suggestions for what you can do next:

1. Add more features to the Birthday Reminder app. Some ideas:

• A form for adding new birthdays
• Ability to remove individual birthdays
• Search or filter functionality
• Persist data with local storage

2. Style the app. The CSS in this tutorial is very basic. Take some time to personalize the look and feel of the project. If you‘re looking for inspiration, check out the UI Design Daily website, which publishes slick UI designs you can recreate with React.

3. Build more React projects! The more you practice, the more comfortable you‘ll become with React. A few beginner-friendly ideas:

• Expense tracker
• Movie database
• Weather app
• Tic-Tac-Toe game

If you get stuck, don‘t worry. Coding is hard, and everyone struggles sometimes. The React community is welcoming and there are tons of free resources available. Some of my favorite learning resources are the official React documentation, Egghead.io courses, and the React subreddit.

Go Forth and React!

React is a powerful, in-demand skill that can take your web development abilities to the next level. I hope this tutorial has shown you that React doesn‘t have to be scary or complicated. By breaking things down into small, approachable projects, anyone can start learning and building with React.

So what are you waiting for? Get out there and start creating! I can‘t wait to see the amazing things you‘ll build with your new React skills. Happy coding!