https://github.com/ahmed-hamdy101/react-my-photo-app

This is a simple React app that allows users to like a photo. The app uses useState to track the state of the like button, and it uses the AiFillHeart and AiOutlineHeart icons from react-icons to render the like button.
https://github.com/ahmed-hamdy101/react-my-photo-app

application front-end jsx react

Last synced: about 1 month ago
JSON representation

This is a simple React app that allows users to like a photo. The app uses useState to track the state of the like button, and it uses the AiFillHeart and AiOutlineHeart icons from react-icons to render the like button.

• Host: GitHub
• URL: https://github.com/ahmed-hamdy101/react-my-photo-app
• Owner: Ahmed-Hamdy101
• Created: 2023-10-09T17:37:21.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-23T07:47:48.000Z (about 1 year ago)
• Last Synced: 2023-11-23T08:44:55.482Z (about 1 year ago)
• Topics: application, front-end, jsx, react
• Language: CSS
• Homepage:
• Size: 417 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  

![](./tab.png)




# Like My Photo

This is a simple React app that allows users to like a photo. The app uses useState to track the state of the like button, and it uses the AiFillHeart and AiOutlineHeart icons from react-icons to render the like button.

## Getting Started

To get started, clone the repo and install the dependencies:

```

git clone https://github.com/your-username/like-my-photo.git

cd like-my-photo

npm install

```

Once the dependencies are installed, you can start the app by running:

```

npm start

```

The app will be available at http://localhost:3000.

## Code Explanation

The code for the app is located in the `src/app/LikeMyPhoto.jsx` file. The file starts by importing the necessary React and react-icons libraries.

```js

import React, { useState } from "react";

import Title from "../components/Title";

import {

  AiFillSmile,

  AiFillHeart,

  AiOutlineHeart,

  AiOutlineComment,

} from "react-icons/ai";

import girl from "../girl.jpg";

```

The `LikeMyPhoto` component is then defined. The component uses useState to track the state of the like button. The initial state of the like button is set to `false`.

```js

const [like, setlike] = useState(false);

```

The component also defines a `toggleLike` function. This function is called when the user clicks the like button. The function toggles the state of the like button.

```js

const toggleLike = () => {

  // if like is not true

  if (!like) {

    setlike(true);

  } else {

    setlike(false);

  }

};

```

The `render` method of the component returns the HTML for the app. The HTML includes a title, a card, and a like button.

```js

return (

  

    


      {/* titel component */}

      

      

      {/* card tages */})

```