React App

├── .github └── stale.yml ├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.css ├── App.js ├── App.test.js ├── assets ├── beers.png ├── new-beer.png └── random-beer.png ├── index.css ├── index.js ├── logo.svg ├── reportWebVitals.js └── setupTests.js /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Configuration for probot-stale - https://github.com/probot/stale 2 | 3 | # Number of days of inactivity before an Issue or Pull Request becomes stale 4 | daysUntilStale: 21 5 | 6 | # Number of days of inactivity before an Issue or Pull Request with the stale label is closed. 7 | # Set to false to disable. If disabled, issues still need to be closed manually, but will remain marked as stale. 8 | daysUntilClose: 7 9 | 10 | # Issues or Pull Requests with these labels will never be considered stale. Set to `[]` to disable 11 | exemptLabels: 12 | - bug 13 | - enhancement 14 | 15 | # Label to use when marking as stale 16 | staleLabel: stale 17 | 18 | # Comment to post when marking as stale. Set to `false` to disable 19 | markComment: > 20 | This pull request has been automatically marked as stale because it didn't have any recent activity. It will be closed if no further activity occurs. Thank you. 21 | closeComment: > 22 | This pull request has been automatically closed. Thank you. 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png) 2 | 3 | # LAB | React IronBeers 4 | 5 | Since beer is one of the most consumed drinks between Ironhackers 🍻 , our mission here is to create an app to showcase some of the best-handcrafted beers, but not just that - to save some as well so the rest of Ironhack community is informed 😌. Our end goal is creating something like this: 6 | 7 |

8 |

9 |

10 | 11 | ## Setup 12 | 13 | - Fork this repo 14 | - Clone this repo 15 | 16 | ```shell 17 | cd lab-react-ironbeers 18 | npm install 19 | npm start 20 | ``` 21 | 22 | ## Submission 23 | 24 | - Upon completion, run the following commands: 25 | 26 | ``` 27 | git add . 28 | git commit -m "done" 29 | git push origin master 30 | ``` 31 | 32 | - Create Pull Request so that your TAs can check up your work. 33 | 34 | ## Introduction 35 | 36 | We will be building a React app so the API (server) needs to be built somewhere for us, right? You are completely right, it's deployed on _heroku_ and the root fo the API is: 37 | **`https://ih-beers-api2.herokuapp.com/beers`**. 38 | 39 | The available endpoints are the following: 40 | 41 | | Method | Endpoint | Response (200) | Action | 42 | | ------ | ------------------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- | 43 | | GET | / | [beers] | Get all the beers from the DB | 44 | | GET | /:id | { beer } | Get the a single/specific beer | 45 | | GET | /random | { beer } | Get a random beer from the DB | 46 | | POST | /new | { message: "New beer successfully saved to database!"} | Create a new beer (the fields are specified in the instructions) | 47 | | GET | /search?q=`{query}` | [beers] | Get beers from the DB whose name contains the search term. For example `/search?q=lager` searches for all beers with lager in the name. | 48 | 49 | On each iteration, we will explain which endpoint you should use! 50 | 51 | The **IronBeers** project will include the following features: 52 | 53 | - A **Home** page with three different options: 54 | - _All Beers_ 55 | - _Random Beer_ 56 | - _New Beer_ 57 | - A **List Beers** page where you should display all the beers 58 | - A **Single Beer** page to display the details of the beer the user clicked on 59 | - A **Random Beer** page to display a Random Beer 60 | - A **New Beer** page to show a form where a user can create new beers 61 | 62 |
63 | 64 | ## Instructions 65 | 66 | :exclamation: At the very beginning we will offer you to shoot for the stars: as a **bonus** focus on **mobile first** design! As we said this is bonus, so it's up to you. :+1: 67 | 68 | 71 | 72 |
73 | 74 | ### Iteration 1 | Home Page 75 | 76 | Create a **Home Page**. This view should include three links to separate pages: 77 | 78 | - `/beers` 79 | - `/random-beer` 80 | - `/new-beer` 81 | 82 | Feel free to design it however you wish, but in case you want to do it the way we did it, you can find the following images in `src/assets` folder: 83 | 84 |

85 |

86 |

87 |
88 | 89 | ### Iteration 2 | Header 90 | 91 | On every view (except for the `home`), we should add a **header** with a `link` to the root of the `app`. 92 | 93 |

94 |

95 |

96 |
97 | 98 | ### Iteration 3 | List all the beers 99 | 100 | On the `/beers` route, we should display all the beers from the database. So, in this case, you need to "hit" the API's route `https://ih-beers-api2.herokuapp.com/beers` and the API will return an **array of beers**. 101 | 102 | _Hint_: The array of beers is array of objects. We strongly advise you to **console log the response** from the API so you can see the structure of it. 103 | 104 | You should display the following from each of the beers: 105 | 106 | - `image` 107 | - `name` 108 | - `tagline` 109 | - `contributed_by` 110 | - **Also, add the link to check the details of each beer. The link should navigate to `/beers/:beerId`.** 111 | 112 |

113 |

114 |

134 |

135 |

152 |

153 |

154 |
155 | 156 | ### Iteration 6 | Create a new beer 157 | 158 | Finally, on the `/new-beer` route (remember, this is you react route, you're displaying the form on this route), we should render a form where user can create new beers. The `form` should include the following fields: 159 | 160 | - **name** - must be type _text_ 161 | - **tagline** - must be type _text_ 162 | - **description** - must be type _text_ 163 | - **first_brewed** - must be type _text_ 164 | - **brewers_tips** - must be type _text_ 165 | - **attenuation_level** - must be type _number_ **!!!** 166 | - **contributed_by** - must be type _text_ 167 | 168 | Why we pointed out the type? Well, since we already console log response from the API, we could notice that all the fields are strings but _attenuation_level_, which is number. Using our knowledge from module II, we can make conclusion that in the _beer model_ all the properties are type _String_ except _attenuation_level_, which is type _Number_. 169 | When you have built the form, you should do a `POST` request to `https://ih-beers-api2.herokuapp.com/beers/new`, passing all the data on the `body` object. If everything went ok, you would receive a **200** response from the server. 170 | 171 | Notice that the fields on the `body` should have those specific **names** so the API can create a new beer. 172 | 173 | _What could go wrong?_: You inputted string instead of number in the _attenuation_level_ field and the server sent you **500** error. 174 | Since we didn't cover how to upload images yet, don't worry about it now - the API will assign a random image to the new beer. :beer: 175 | 176 |

177 |

178 |

179 |
180 | 181 | ### Iteration 7 | Bonus | Filter the beers 182 | 183 | Yes! One endpoint left! On the `/beers` route, add an `input` where users can search for beers. Every time a new letter is typed, you should call to `https://ih-beers-api2.herokuapp.com/beers/search?q={query}` passing the value of the input in the `q` param. 184 | 185 | **We are done!** :trophy: 186 | 187 | Awesome! Grab a beer (if you're not underage :wink: )! Now you are a **React Warrior**, keep training to become the Ninja! 188 | 189 | Happy coding! :heart: 190 | 191 |
192 | 193 | ## FAQs 194 | 195 | 196 |

197 |

I am stuck and don't know how to solve the problem or where to start. What should I do?

198 | 199 |
200 | 201 | If you are stuck in your code and don't know how to solve the problem or where to start, you should take a step back and try to form a clear question about the specific issue you are facing. This will help you narrow down the problem and come up with potential solutions. 202 | 203 | For example, is it a concept that you don't understand, or are you receiving an error message that you don't know how to fix? It is usually helpful to try to state the problem as clearly as possible, including any error messages you are receiving. This can help you communicate the issue to others and potentially get help from classmates or online resources. 204 | 205 | Once you have a clear understanding of the problem, you will be able to start working toward the solution. 206 | 207 |
208 | 209 | [Back to top](#faqs) 210 | 211 |

212 | 213 |

214 |

I got the error: "Cannot find module 'Node.js'". How can I resolve it?

215 | 216 |
217 | 218 | The error "Cannot find module" in a Node.js application means that the module you are trying to import or use does not exist in your project or cannot be found by Node.js. 219 | 220 | There are a few things you can try to resolve the issue: 221 | 222 | 1. **Dependencies are not installed**: Make sure that all dependencies are installed. 223 | To do this, run the command `npm install` in the root folder of your project. 224 | This will install all of the dependencies listed in the project's `package.json` file, and ensure that all of the modules that your Node'js application requires are available. 225 | 226 | 2. **Module is not installed**: Make sure that the *package* you are trying to use is listed in the project's `package.json` and that it is installed. 227 | To do this, run the command `npm install `, replacing the `` with the name of the package. 228 | This will add the package to the list of dependencies in the `package.json` file, and install it in the project. 229 | 230 | 3. **Module is not imported:** Make sure that you've imported the module/package correctly and that the `import` statement is spelled correctly and available in the correct place in your code. 231 | 232 | 4. **Wrong file path:** If you are importing another file as a module, make sure that the file you are trying to *import* is located in the correct folder and that you are using the correct file path. 233 | 234 | 5. **Wrong module/package name:** Check the spelling of the package name you are trying to import. 235 | 236 |
237 | 238 | [Back to top](#faqs) 239 | 240 |

241 | 242 |

243 |

I got the message: "Something is already running at ... Would you like to run the app at another port instead? [Y/n]". What should I do?

244 | 245 |
246 | 247 | This message means that another process is already using the specified port. This could be another instance of your React app, or it could be another application that is using that port. 248 | 249 | To resolve this, you can change the port your React app is running on by typing Y when prompted. This will kill the process and automatically start the server on another port. 250 | 251 | Another approach is to manually terminate the process using the port in question and then try running the app again. 252 | 253 |
254 | 255 | [Back to top](#faqs) 256 | 257 |

258 | 259 | 260 |

261 |

How do I display an image in a React component?

262 | 263 |
264 | 265 | To display an image in a React component, you should first `import` the image in the component and then render it. Here is an example of how to do this: 266 | 267 | ```jsx 268 | import example from "./example.png"; // Import the image file 269 | 270 | function App() { 271 | return ( 272 | example

// Display the image 273 | ) 274 | } 275 | 276 | export default App; 277 | ``` 278 | 279 | In the above example, the `example` variable is assigned the value of the imported image file. The image is then displayed using the `` element, with the `src` attribute set to the `example` variable. 280 | 281 |
282 | 283 | [Back to top](#faqs) 284 | 285 |

286 | 287 |

288 |

I got the warning in my React app:" 'variable' is assigned a value but never used: no-unused-vars". What should I do?

289 | 290 |
291 | 292 | This warning is a linting error thrown by a linting tool in your React project, and it is warning you that the variable is created, but that it is never being used in your code. 293 | 294 | To resolve this issue, you can either use the variable in your code, or you can simply remove the variable if you don't need it. 295 | 296 |
297 | 298 | [Back to top](#faqs) 299 | 300 |

301 | 302 |

303 |

I got the warning: "Each child in a list should have a unique 'key' prop". How can I resolve it?

304 | 305 |
306 | 307 | The warning *"Each child in a list should have a unique “key” prop"* means that you are trying to render a list of elements, but one or more elements is missing the `key` prop. 308 | 309 | To fix this, add a `key` prop to each element you return from the `map()` when rendering the list. The key should be a unique identifier for that element, such as an item ID or the id of the document from the database. 310 | 311 | For example, if you have an array of objects with the following structure: 312 | 313 | ```js 314 | const projects = [ 315 | { id: "127fae", name: "EatBCN", stack: "React, Express" }, 316 | { id: "985afw", name: "Levels", stack: "React, Express" }, 317 | { id: "347eef", name: "IronClub", stack: "React, Java" } 318 | ]; 319 | ``` 320 | 321 |
322 | 323 | Inside your component, you would render the list in the following way: 324 | 325 | ```jsx 326 | { 327 | projects.map((el) => { 328 | return ( 329 |

330 |

{project.name}

331 |

Tech Stack: {project.stack}

332 |

333 | 334 | }) 335 | } 336 | ``` 337 | 338 | In the above example, the objects in the `projects` array all have a common property `id`, which is a unique id string, and therefore we can use it to set the `key` prop. 339 | 340 | When creating lists we must always assign the `key` prop to the outermost (enclosing) element returned from the `map()`, in this case the `div`. We are setting the `key` prop to each `div` element we render in the list. 341 | 342 | **Important**: You should not use *index* of the `map` as *key*. This is considered an *anti-pattern* that may lead to unpredictable results. 343 | 344 |
345 | 346 | For more information, check: [React Docs - Rendering Lists](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key) 347 | 348 |
349 | 350 | [Back to top](#faqs) 351 | 352 |

353 | 354 |

355 |

How to render a list of elements from an array in a React component?

356 | 357 |
358 | 359 | To render a list of elements from an array in a React component, you can use the method `map()` to loop over the `projects` array and return JSX elements to be rendered. 360 | 361 | To render a filtered list, where some items are skipped, you can use the `filter()` method. 362 | 363 | Each element returned should have a *unique* `key` prop assigned to them. It's important to note that the `key` prop should always be assigned to the outermost (enclosing) element returned from the `map()`. 364 | 365 | Here is an example of rendering a list of elements using the `map()` method: 366 | 367 | ```js 368 | const projects = [ 369 | { id: "127fae", name: "EatBCN", stack: "React, Express" }, 370 | { id: "985afw", name: "Levels", stack: "React, Express" }, 371 | { id: "347eef", name: "IronClub", stack: "React, Java" } 372 | ] 373 | 374 | function ProjectList() { 375 | return ( 376 |

377 | { 378 | projects.map((el) => { 379 | return ( 380 |

381 |

{el.name}

382 |

Tech Stack: {el.stack}

383 |

384 | ) 385 | }) 386 | } 387 |

388 | ) 389 | } 390 | 391 | export default ProjectList; 392 | ``` 393 | 394 | In the above code example, we use `map()` inside of the component to loop over the `projects` array, and for each project, return a `div` element with the `project.name` and the `project.stack` as its contents. 395 | 396 | Each object in the `projects` array contains a common property `id` which we use as the `key` prop. 397 | 398 | The `key` prop must be set on the outermost element returned from the `map()`, in this case, the `div` element. 399 | 400 | **Important**: You should not use *index* of the `map` as *key*. This is considered an *anti-pattern* that may lead to unpredictable results. 401 | 402 | For more information, check: [React Docs - Rendering Lists](https://beta.reactjs.org/learn/rendering-lists#keeping-list-items-in-order-with-key) 403 | 404 |
405 | 406 | [Back to top](#faqs) 407 | 408 |

409 | 410 |

411 |

How do I update a state variable in my React component? How do I use the useState hook in my React component?

412 | 413 |
414 | 415 | To update a state variable in a React component, you should use the `useState` hook. This hook returns an array with two elements: the **current value** of the state variable and a **function to update it**. Here is an example of how to use `useState` to update the `count` state variable: 416 | 417 | ```jsx 418 | import { useState } from "react"; 419 | 420 | function MyComponent() { 421 | const [count, setCount] = useState(0); 422 | 423 | const handleClick = () => { 424 | setCount(count + 1); 425 | } 426 | 427 | return ( 428 |

429 | 430 |

Count: {count}

431 |

432 | ) 433 | } 434 | ``` 435 | 436 | In the above example, the `handleClick` function is called when the button is clicked, and it updates the `count` state variable by calling the `setCount` function with the new value: `setCount(count + 1)`. 437 | The component will re-render every time a state variable gets updated. 438 | 439 |
440 | 441 | [Back to top](#faqs) 442 | 443 |

444 | 445 |

446 |

How do I use the useEffect hook in my React component?

447 | 448 |
449 | 450 | The `useEffect` hook (also called the *Effect Hook*) allows you to run your side effects. Data fetching, setting up a subscription, starting a timer, and manually changing the DOM in React components are all examples of common actions (aka *side effects*) that you may want to set up in your components. 451 | 452 | The `useEffect` hook allows you to run side effects during all three lifecycle phases: 453 | 454 | - **Mounting phase** 455 | - **Update phase** 456 | - **Unmounting phase** 457 | 458 |
459 | 460 | ##### Syntax 461 | 462 | The syntax of the `useEffect` is the following: 463 | 464 | ```jsx 465 | // Actual syntax 466 | useEffect(() => {}, []) 467 | ``` 468 | 469 | As you can see `useEffect` takes two arguments: 470 | 471 | ```jsx 472 | // Pseudo code: 473 | useEffect(didUpdate, dependencyArray) 474 | ``` 475 | 476 | - `didUpdate` - a function containing the code (side effect) we want to run. 477 | - `dependencyArray` - the array of values that the effect depends on. React watches this array for any change and when a value in this array changes, the effect will run. 478 | 479 |
480 | 481 | ##### `useEffect` - Mounting phase 482 | 483 | We can set the `useEffect` to **run code in the mounting phase**, **only once** right after the component is rendered for the first time. 484 | 485 | To do so, we use the `useEffect` Hook with the following syntax: 486 | 487 | ```jsx 488 | // Run the effect only once 489 | // during the mounting phase 490 | 491 | useEffect(() => { 492 | // Do something ... 493 | }, []) 494 | ``` 495 | 496 | The empty array `[]` means that “this effect doesn’t depend on anything”, and will therefore run only once, after the initial render. 497 | 498 |
499 | 500 | ##### `useEffect` - Unmounting phase 501 | 502 | Often, *effects* create resources that need to be cleaned up before the component leaves the screen, such as a subscription or a timer, like in the previous example. Before the component *unmounts*, we should cancel all remaining processes to prevent memory leaks. 503 | 504 | To do this, the function passed to **`useEffect` may return a cleanup function**. Example: 505 | 506 | ```jsx 507 | useEffect(() => { 508 | // Do something ... 509 | 510 | // Returned function is known as a "cleanup function", 511 | // which React will automatically run 512 | // right before the component is removed from the DOM 513 | return () => { 514 | // Perform clean up actions here 515 | }; 516 | 517 | }, []) 518 | ``` 519 | 520 |
521 | 522 | ##### `useEffect` - Conditional updates (Update phase) 523 | 524 | The `useEffect` Hook can also be used to run code during the *Update* phase, whenever there is an update of state or props. 525 | 526 | As you may have noticed, `useEffect` takes a second argument `[]` the *dependency array*. A dependency array is used to specify the values that the effect depends on. Additionally, React keeps track of this array to know if it should re-run the effect. Example: 527 | 528 | ```jsx 529 | useEffect(() => { 530 | // Do something ... 531 | 532 | // Effect will run again if either `a` or `b` change or are updated 533 | }, [a, b] 534 | ``` 535 | 536 |
537 | 538 | **Important**: Whenever a value specified in the dependency array updates, React re-runs the effect. 539 | 540 |
541 | 542 | For detailed explanation, check the following documentation pages: 543 | 544 | - [React Docs: Synchronizing with Effects](https://beta.reactjs.org/learn/synchronizing-with-effects) 545 | - [React Docs: `useEffect`](https://beta.reactjs.org/reference/react/useEffect) 546 | 547 |
548 | 549 | [Back to top](#faqs) 550 | 551 |

552 | 553 | 554 |

555 |

I am getting an error: "not defined". How do I fix it?

556 | 557 |
558 | 559 | The "ReferenceError: variable is not defined" error in JavaScript occurs when you try to access a variable or a function that has not been defined yet or is out of scope. 560 | 561 | To fix the issue, check that you have defined the variable or function that you are trying to use and double-check the spelling to make sure you are using the correct name. 562 | 563 | In case the variable or a function is defined in another file, make sure that the file has been imported or loaded correctly. 564 | 565 |
566 | 567 | [Back to top](#faqs) 568 | 569 |

570 | 571 |

572 |

I am unable to push changes to the repository. What should I do?

573 | 574 |
575 | 576 | There are a couple of possible reasons why you may be unable to *push* changes to a Git repository: 577 | 578 | 1. **You have not committed your changes:** Before you can push your changes to the repository, you need to commit them using the `git commit` command. Make sure you have committed your changes and try pushing again. To do this, run the following terminal commands from the project folder: 579 | 580 | ```bash 581 | git add . 582 | git commit -m "Your commit message" 583 | git push 584 | ``` 585 | 586 | 2. **You do not have permission to push to the repository:** If you have cloned the repository directly from the main Ironhack repository without making a *Fork* first, you do not have write access to the repository. 587 | To check which remote repository you have cloned, run the following terminal command from the project folder: 588 | 589 | ```bash 590 | git remote -v 591 | ``` 592 | 593 | If the link shown is the same as the main Ironhack repository, you will need to fork the repository to your GitHub account first, and then clone your fork to your local machine to be able to push the changes. 594 | Note: You may want to make a copy of the code you have locally, to avoid losing it in the process. 595 | 596 |
597 | 598 | [Back to top](#faqs) 599 | 600 |

601 | 602 | 603 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lab-react-ironbeers", 3 | "version": "2.2.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import logo from './logo.svg'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |

7 |

8 |

9 |

10 | Edit src/App.js and save to reload. 11 |

12 | 18 | Learn React 19 | 20 |

21 |

22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /src/assets/beers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/src/assets/beers.png -------------------------------------------------------------------------------- /src/assets/new-beer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/src/assets/new-beer.png -------------------------------------------------------------------------------- /src/assets/random-beer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ironhack-labs/lab-react-ironbeers/a34cc40aec91718558d512469da9e6c8e0bca330/src/assets/random-beer.png -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | 15 | // If you want to start measuring performance in your app, pass a function 16 | // to log results (for example: reportWebVitals(console.log)) 17 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 18 | reportWebVitals(); 19 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------