In this exercise we are going to create a new React app and some components.
I recommend you use CodeSandbox (https://codesandbox.io) because that does not require any setup so you can start right away.
Note how this list resembles the parent-child relation between the components.
I recommend placing each component in a separate file.
In this exercise we will pass props between components.
const posts = [
{ username: 'Bouwe', content: 'Hello World' },
{ username: 'Bouwe', content: 'My second tweet :)' }
]
Although not necessary, feel free to change the username to your username (see the table at the bottom of this page) and enter your own content.
Pass the array of post objects as props from App to Timeline.
In the Timeline component, render a Post component for each post in the posts array using the array.map() function. Pass each post object as props to the Post component:
{props.posts.map(post => <Post post={post} />)}
What we have now is an app that passes data to components using props. Each component only receives the data it needs to render its own piece of UI.
In this exercise we make the App component stateful so it can manage all posts on your timeline. Also we create a dummy button that adds random posts to state.
NOTE: We only update the App component in this exercise.
Call useState and pass in an empty array as the initial state.
Make sure you initialize the two variables useState returns.
Remove the posts array we made in the previous exercise.
Pass the posts variable useState returns as props to Timeline. (Although this might already be the case depending on how you named things.)
Create a function within the App component: addPost(content)
In this function create a post object containing the provided content and your username:
Then call setPosts and provide an array containing both the new post object and the current posts.
TIP You might want to check the example code if you're not sure how to do this.
<button onClick={() => addPost("Hello World")}>Dummy</button>
What we have now is an app that is ready for adding posts.
In this exercise we'll create a new component, Compose, which contains a form that allows the user to create a new post.
Create the Compose component that returns something to indicate it's the Compose component.
Render the Compose component inside the App component
In the Compose component:
Introduce a content variable with useState.
In Compose, render the following form:
<form>
<textarea value={content} />
<button>OK</button>
</form>
Replace steps 3 and 4 by uncontrolled inputs if you prefer.
In the App component:
Pass a reference to the addPost function as props to Compose
Remove the dummy button
In the Compose component:
Add an onSubmit event handler to the form which calls the addPost function from props and passes the content.
Clear the textarea value after submitting
What we have now is an app that works! You can add posts that are rendered on the timeline. However, it's all local state... We need to communicate to a backend to persist the posts.
In this exercise we are going to communicate to the REST API so we can persist posts and retrieve the timeline.
TIP I recommend you use the axios library so you can use the example code I've shown you. However, any other HTTP client library will also suffice.
NOTE: the :userId is your username, check the table at the bottom of this page.
Please don't forget the 2nd argument for useEffect: an empty array!
TIP Check the example code for error handling, although you might also skip error handling to keep it simple.
In this exercise we are creating functionality for following and unfollowing other users.
However, I leave it up to you how to solve this. We have learned everything what we need to implement this.
Possible solution:
Show all users
Indicate per user whether or not you are following him/her
Add toggle button per user
Toggling the button calls API to follow or unfollow the user
Check the API documentation: https://github.com/bouwe77/nitwit-api/blob/master/README.md
Name | Username | |
---|---|---|
Berend de Jong | : | berend |
Bouwe Postma | : | bouwep |
Bouwe Westerdijk | : | bouwe |
Dolf Sijbring | : | dolf |
Frank Schepel | : | frank |
Henk Klijn Hesselink | : | henk |
Ingmar Fictorie | : | ingmar |
Jan Peter Tamminga | : | janpeter |
Mark Vos | : | mark |
Martin de Boer | : | m4ndeb2r |
Martin Heck | : | martin |
Martijn Reemst | : | martijn |
Robert den Hartog | : | robert |
Ronald Doevelaar | : | ronald |
Rudie van der Weij | : | rudie |
Sjoerd Hemminga | : | sjoerd |