Micro Blog Front End with React
January 22, 2018
Made with: ReactJS
Micro-blog simulator made with ReactJS. Makes use of components and state. Includes a log-in form, an entry form for blog posts, and a list of posts in reverse chronological order.
create-react-app application for all the scaffolding and heavy lifting so that we can focus on the code.
Our app has six components:
- Our main
Greeting.jscomponent, that displays a
Login.jscomponent if the user is not logged in, or the
Profile.jscomponent if our user is logged in.
AddPost.jscomponent to manage the post input field, and
Post.jscomponent which lists the posts in reverse chronological order.
State is concentrated in the main
App.js, and then passed down to the other components via props.
There are three state properties:
- posts: an object with a list of all posts
- user: the information of the user who is logged-in at any given moment
- isLoggedIn: a boolean indicating if somebody is logged in or not
isLoggedIn boolean instruct the
Greeting.js component what to display via a conditional rendering: if false, display a log in form (Login.js). If true, display the current user's profile (Profile.js).
Once logged in, users can write posts and they will immediately appear as the first post of the list.
Finally, there is a second log in button called “Auto LogIn". Once pressed, the app gets the profile info of a default user that is hard coded in a
users.js file so that you won't have to type anything. This is useful when you plan to come back to the app often and want to load your info quickly (sort of an express log in).