While we've worked on basic React sites that are static, real world applications interact with servers and databases over the internet. In ths homework, we'll be tieing together the frontend and the backend aspects of this course.
- Further practice with React syntax
- Introduce Axios
- Use HTTP methods to access RESTful services
- Create your first custom hook
- Use fetched data to create a dynamic application
The starter code for this homework is here: https://github.com/fullstack-decal/sp22-assignment8-starter
Take a look around the codebase and try to understand how it's put together.
Task 1 - Start the Backend
Before we start building anything, we have to set up our server first. For this instance we will be using Express. The server will already be pre-built for you, feel free to look to examine the code and don't stress if you don't understand it. You'll only be worrying about the React side of things:
- cd into the directory:
- Install dependencies:
- Run the server:
You should see output that looks something like this:
❯ npm start
> firstname.lastname@example.org start
> node index.js
Block Server listening at http://localhost:3002
Task 2 - Start the Frontend
Congrats! The backend server is now running at
localhost:3001. Now for a
production application, we'd also often be running a database such as MongoDB,
but if you examine the code, you'll see that we've hard-coded the data you're
For this task, we'll introduce fetching data from a server from our frontend.
As you know, we can use HTTP requests to send and receive data over the
internet. In fact, opening a website like
google.com is an HTTP GET request!
Servers are similar, they have various routes that contain HTTP endpoints that
you can trigger.
By default, browsers have the
fetch API built in to give your frontend
about Fetch here.
While fetch is incredibly powerful, it's also a bit more barebones and complex, so we'll be using a wrapper around Fetch called (Axios)[https://axios-http.com/docs/intro].
First, lets install Axios:
npm install axios
And now lets start the app:
Make sure that your express server and React app are on different ports.
Task 3 - Write an API request
Now that your frontend and backend are working, lets write a HTTP request.
Right now, our blocks are pretty bland and hard coded, lets spice this up with an API fetch.
First, lets see how Axios works in an example:
In this example, our function
getPostsData calls the API using a
request. This function is called in a
useEffect hook on first render. We then
wait for the promise resolve using a
.then, and once resolved, set our state
data to the returned data. We also catch the error if the promise
returns an error.
Confused by the hooks? As a reminder,
- useEffect hooks run the function passed into the first parameter if any
variable in the array passed in as the second parameter changes.
- In this example, there are no variables passed in the second arg, so this will run when the component first mounts (is rendered)
- useState hold pieces of state, and a
setStatecall will trigger a component re-render
Cool, now that you know any example of how we might fetch data, how might you use this data to render out posts in our application?
Fetch data from our server (
http://localhost:3002/posts) and render out each
array item using the
Post component inside of the
- Make sure your server URL is passed in the get logic correctly
- Where would the fetch logic be placed?
Task 4 - Creating a new post
Now that we can view posts from our server, you'll notice that there's a form at the bottom to create a new post. We've already built the logic to get the form data, you'll be using a post request to add this data to our server.
Axios post requests are very simple, as an example:
.post(url, data) // `url` is the url to post to, `data` is the data to send in the body of the HTTP request
.then((response) => console.log(response))
.catch((error) => console.log(error));
POST request to create a new post.
- To create a new post, you'll have to
Task 5 - Working with Comments
At this point, you should be able to view and create new posts. Now, we'll do the same for comments.
comments field on the server data, and if you
/post/:id/comment, you'll be able to add a new comment.
Create a new
Comments component to view all the comments on a single post.
Also create a new form for users to add a new comment. After adding a comment,
it should be rendered on the frontend.
After you finish, push these changes into your WDB-education repository.
Turn your code into a GitHub pages link, and upload the link to your page to Gradescope. The Gradescope can be found on the syllabus, and instructions for creating a GitHub page link can be found at the end of homework 0.
Demo of Solution
When finished, your website should be able to run like the follow:
Note the UI doesn't have to be the same.