First React app - The Greeting App
Before we dive into more deep and challenging topics, we'll have some fun by building an app. Our first React app will present our users with an input and send them a friendly greeting message.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Beginner's Guide to Real World React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Beginner's Guide to Real World React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:10] Lesson 4, our very first React app, the greeting app. In this very first coding example, we'll be building a really simple React app that accepts a name from our user and displays it as part of a nice welcome message.
[00:11 - 00:17] Let's take a look at what we'll be building. This is the finished example we'll be building before we refactor it.
[00:18 - 00:31] Once it's running, you'll see we have a simple title to welcome the user to the app and a set of instructions to invite the user to enter their name and click the update button. If I enter my details and hit the update button, you'll see that the text we haven't been introduced will be replaced with my name, Rob Kendall.
[00:32 - 00:46] It's a really straightforward demo that isn't too complex, but it highlights a number of key React concepts that we'll be building upon throughout the course. In the next lesson, we'll be breaking down the greeting app into its component parts and taking a peek under the hood to see how everything pins together.