Descripton: This is the culminating project of the Girl Develop It Intro to React Cohort. I was tasked with creating a mock-up of a few components of Instagram. I will document my progress in my commits and here in this README file.
This cohort cleverly has taken us through a series of exercises which have directly lead to creating the culminating project. The goal of the project was to mock-up a few components of Instagram: a navigation bar, a URL input bar, images of cats, and a like counter/display for each image. I really liked the teaching style of having us experiment on our own, given the practiced exercises and a few additional challenges needing research. This was a great introduction to React!
| Mobile View |
|---|
 |
| Desktop View |
|---|
 |
- Live Site URL: Visit Catagram on Codesandbox!
- Get a cat pic URL here: Pixabay.com
- right click on your picture choice, select "Copy Image Address", then paste the stored URL into the Catagram URL bar and submit.
- Or simply copy and paste my cat gravitar's url: https://robohash.org/c682aa2141573f20200f8792efdb85c5?set=set4&bgset=&size=400x400
- You can paste and submit multiple times to create additional posts.
After class four, I was assigned the challenge of creating a template using React in preparation for developing the Catagram webpage. At first, I was unsure about how to begin. Reviewing the class exercises really helped to guide me, and there was just enough mystery for me to have to figure out on my own to make the assignment an appropriate challenge.
One major thing that I figured out was that the styling for all of the components can go in the CSS.js file. I had started out creating separate CSS files for each component. It was only by chance that I figured out the correction. I had accidentally placed some of my styling into the wrong CSS file and noticed that it still worked! So I deleted the extra CSS files and placed all of the styling in one central location, which is actually a great feature of React!
In addition to creating the template, I used what I had learned in the exercises to add an event handler for the URL bar and to console.log the like count.
6/20/22 - During class five, we learned how useState enables us to actually get the like count functioning, rather than just seeing it through console.log. This is the magical code: const [count, setCount] = useState(0);
Today's challenge was to add the event handler and like count functions, which I had already completed, and to hide the like counter when the count equals 0. This took some research, I had forgotten how to use the display vs. visibility properties. I also needed to figure out the correct syntax to use for the ternary operator (conditional statement). After completing research, I decided to use visibility: count == 0 ? 'hidden' : 'visible' because the footprint of the element remains when it is hidden.
- React
- JSX
- function vs. class components
- JSX
- ternary operator
- props
- one-way data flow
- event handling
- states
- review of display vs. visibility properties
- spread operator
- map() function
- react router
- Avatar URL Generator - The site we used to generate our own cute cat avatars for class 3 exercises!
Faraja Thompson
I'd like to acknowledge my son and mentor DeForestt Thompson. His steadfast support and encouragement keep me motivated! Thanks for forcing me to use the command-line, Son <3 <3 <3.