The project for our Composing React Components and Passing Data Via Props lesson was to “build a simple Instagram clone using React”. I’ve never thought of Instagram, Facebook, Twitter or the like as simple, but looking at each of them as an assemblage of components, I can start to see how they’re put together. While we don’t yet know how to write a component for authentication, to login and logout of an application, and we haven’t learned how to create a database or use local storage yet, so that we can have persistent data, we do know enough to build out most of the front-end of a social media application now.
I initially had to do this project in WEBPT10, but I never got to, because at the point that it came up, I was already behind and was trying to catch back up. I had read through the material – enough to pass the sprint challenge – but I hadn’t completed all of the projects, so this is my first time actually working through it, in WEBPT14.
So, we’re provided with some mock data in a dummy-data file. Each object in the file represented a faux Instagram post. We had to read that data and use it to render each post, separately. The description said that the project was broken into two main parts, a search bar and a posts section.
The search bar renders at the top of the page and is a single instance that’s persistent across the application. Below it, the post section renders a post and comment section for every entry in the mock data file. We also had to add and update state for the likes button so that it increments whenever the button is clicked, and style the page using CSS. In this case our .css files each lived in the same directory as the component they served.
Like the previous project, the functionality of this application was driven by the .useState hook and the onClick handler. The former allowed us to render post data, and the two combined to allow us to update the number of likes when the like button (heart) was clicked. What differed was that the components for the football scoreboard project existed within a single file, whereas with this project, we’re importing and exporting from multiple files, passing props downstream and updating state from a parent component which then re-rendered child components as needed.
I added a single entry to the mock data, which was part of a stretch goal and I added my own styles to the application, but I didn’t add new functionality… yet. This was a fun project, so I plan on revisiting it. I’d like to add some of the stretch goals, and something of my own; making the search bar functional and adding the ability to add comments to the posts are stretches I’m interested in. I’d also like to make a small user profile section with just a username and image, but that’ll come later when I make time for a v2 of this project.
REDO FROM START 