React-Components-Insta-Clone
Composing React Components and Passing Data Via Props
- For this project, you'll be building a simple Instagram clone using React.
- There is a file provided called
dummy-data.js that contains some mock data. Each object in the mock data represents a faux Instagram post.
- Your React application will receive faux post data and render each as a separate Instagram post.
This project was put together using create-react-app (CRA). You will not need to install CRA in order to make this project work. Follow the steps below to setup the project with the proper dependencies.
- Create a forked copy of this project.
- Clone your OWN version of the repository in your terminal
- CD into the project base directory
cd React-Components-Insta-Clone
- Download project dependencies by running
npm install
- Start up the app using
npm start
- Push commits: git push origin
main.
- This app can be broken down to two main sections that you'll need to implement for this project: the Search Bar and the Posts.
- To complete this project there will be a single instance of the Search Bar being rendered at the top of the page, as well as a Posts component that renders an individual Post for every object inside the
dummy-data.js array.
- Use what you learned yesterday to set up state to keep track of the posts.
- You will implement a callback to increase the "likes count" on posts, and hand it through props several levels down into a nested component.
- Look through the code before you start. There are a lot of files. Not all of them need code added to them. Start in the App.js file and read the instructions there.
Your project should end up looking like this
- Create more dummy data in the dummy-data.js file and add search functionality to the search bar. One way to do this is with a filter method.
- Implement the ability to add comments to a post using an input.
- Finish styling all of the application and get your instagram clone to closely resemble the given design spec.
- Submit a link to your repository in Canvas
