Join Joe Chellman for an in-depth discussion in this video Incorporating live data via REST APIs, part of React for Web Designers.
- [Instructor] Over the course of the next several videos, we're going to start creating a little status update app for a hotel website, the Landon Hotel. We're going to interface with a small and simple API to retrieve messages and post new ones and we're going to delve a little deeper into React's class components to see more of what's possible. So we're going to take a look at the mock up first. I've loaded the mock up HTML file here in my browser. And if I scroll down, I'll go straight to the status updates. So this is a mock up of what we're going to be building.
We have a little form here that's going to post status updates from various parts of the hotel over here with who it's from and the date and time. So let's look at this and think about the components that we're going to need. We'll have one big component to wrap up everything. We'll call that the status message manager. And then we'll have a post forum over here. Now as we can see this has some form elements. We'll make those controlled form elements to stick with the recommendations of React. And in doing so, we know this component is going to track its own state to keep track of the contents of these elements.
So this is going to be a component that has its own state. Then over here we'll have a status message list, just a list of all the status messages we have available and each one of these will be a component called a status message. So that's part of the planning we need to do, just thinking about the components and how we're going to deal with them. Now we need the API so let's get that installed real quick. In the exercise files for this course, there's a folder called status_api which has just a few PHP files and a MySQL dump.
This is going to serve as the little API for reading and writing status messages that'll be displayed on that page. We already have a local web server installed from previous examples so we're just going to use that now. All we need to do is update the configuration file and load the database. So first let's load the database. Almost any local web server is going to have a copy of PHP my admin or some relatively easy way to import MySQL data files. We'll use PHP my admin here and we're going to go to the import tab and I'm going to choose a file, specifically I'm going to open this database.sql file.
Scroll down and click go and it runs a bunch of queries and creates my database for me. Switching over to my databases tab, it's going to create a database called status_api. So word to the wise, if you happen to have a database already called this on your file system, you'll probably want to open that database schema file and change the name of it. Otherwise, your existing data might get wiped out. So we have this in here, let's take a look inside. It has a table called statuses and I've seeded this database with a few messages just so we have something to work with right away.
Okay, that's the database. Now let's update the configuration file. Here in my editor, I've opened the config_setup file and you might not need to make any changes here at all. But if you know that your connection details for your particular local web server are different from the ones here, you can update them accordingly. This is the host, usually local host, the username and password for most MySQL installations with local web servers are either root and root or root and maybe a blank password and here's the name of the database. These should be the only pieces you need to update.
Once that's all done, you can try loading this up in your server. So I'm going to copy this URL and open a new tab. In my case, everything is installed here in local host ReactJS and then what will be coming next is status_api and we'll load get.php. If everything is working, you'll see something like this in your browser. This is JSON data so depending on which browser you're using, it might apply a little bit of formatting.
But the idea is you're getting back some data. One other thing I want to mention that we're going to see later is that you can also attach a parameter called delay on the end to insert a little bit of delay to pretend that we have some network latency. This can be useful for making sure that your code handles a little bit of latency in the network gracefully. So if I hit this again, you can see this spins for a few seconds and then finishes loading, specifically five seconds. So you can change this to whatever number you want and that will be the delay before it responds.
- Identify notable features about how React works.
- Identify good early steps for any React project.
- Explain why the little PHP app that powers our API has a way to add delay.
- Outline what a lifecycle method is.
- Recall the React convention that must be followed when adding a status message.
- Explain the purpose of React.Fragment.