novinary/insta-clone-react

Instagram clone using React:

Instagram Clone Using React - Lambda School

A simple application made using react, boostrap, react-strap, styled-components,font-awesome and prop-types.

Introduction

• This project was created while I attended Lambda School. The purpose of was to build on my knowledge of React.

  • Here, I have implemented a lot of the same concepts that I have been in previous non-react projects, in a very similar fashion.
  • The main difference this time around is that I'll be using the create-react-app (CRA) utility to generate my React project.

• This project was worked on throughout one week.

  • Each day as I learned new things, I used that knowledge to build and enhance this project a little more.
  • Throughout the whole week, I added more code, and change things here and there as I learn new principles and techniques.
  • I also communicated any problems I'm having to my Project Manager to ensure to get me un-stuck along the way as soon as possible.
  • The goal is to finish each day's objectives, and have a working project to start with on the next day.
  • The main goal of this project was to see a react application come to life, and see how react works at a higher level.

• For this project, I built 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.

• My React application receives this faux post data and render each as a separate Instagram post.

Day I Objectives

• Demonstrate the the ability to use create-react-app to boilerplate a react application
• Describe and be able to use PropTypes to 'type check' specific data being passed down to a child component
• Demonstrate the ability to use defaultProps in a React component

Day II Objectives

• Understand the concept of React component lifecycles, along with the major lifecycle methods such as render, componentDidMount.

Day III Objectives

• Be able to explain and implement a React Higher Order Component to conditionally render protected content to the screen.

Day IV Objectives

• Be able to use styled-components to add functional styles to their React Components
• Be able to explain why state driven views and components are useful patterns for scalability, composability, and reuse and how React enables those patterns