Games library, using external API
API used: RAWG Video Games Database API (v1.0)
ΠΠ°Π΄Π°Π½ΠΈΠ΅
- ΠΠ°ΠΌΠΈΡΠ°ΡΠ΅ (ΠΈΠ»ΠΈ ΠΈΠ·Π³ΡΠ°ΠΆΠ΄Π°ΡΠ΅ ΡΠ²ΠΎΠ΅) API ΠΊΠΎΠ΅ΡΠΎ Π΄Π° Π²ΡΡΡΠ° Π½ΡΠΊΠ°ΠΊΠ²Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ.
- ΠΠ·Π³ΡΠ°ΠΆΠ΄Π°ΡΠ΅ HTML ΡΡΡΠ°Π½ΠΈΡΠ° ΡΡΠ΄ΡΡΠΆΠ°ΡΠ° ΡΠΎΡΠΌΠ° Ρ ΠΏΠΎΠ»Π΅ΡΠ° ΠΊΠΎΠΈΡΠΎ ΡΠ΅ ΠΈΠ·ΠΏΠΎΠ»Π·Π²Π°Ρ Π·Π° ΠΈΠ·ΠΏΡΠ°ΡΠ°Π½Π΅ Π½Π° Π·Π°ΡΠ²ΠΊΠ° ΠΊΡΠΌ API-ΡΠΎ ΠΊΠΎΠ΅ΡΠΎ ΡΡΠ΅ Π½Π°ΠΌΠ΅ΡΠΈΠ»ΠΈ Π² Ρ.1. Π’ΠΎΡΠ½ΠΈΡ Π²ΠΈΠ΄ Π½Π° ΡΠΎΡΠΌΠ°ΡΠ° ΠΈ Π½Π΅ΠΉΠ½ΠΈΡΠ΅ ΠΏΠΎΠ»Π΅ΡΠ° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΠ΅ Π²ΠΈΠ΅, Π½ΠΎ Π·Π°Π΄ΡΠ»ΠΆΠΈΡΠ΅Π»Π½ΠΎ Π΄Π° ΠΈΠΌΠ° Π½Π°ΡΠΈΠ½ Π·Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π΅ ΡΠΎΡΠ½ΠΎ Π½Π° ΠΊΠ°ΠΊΠ²Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π΄Π° Π±ΡΠ΄Π΅ Π²ΡΡΠ½Π°ΡΠ° ΠΎΡ Π²ΡΠ½ΡΠ½ΠΈΡ ΡΡΡΠ²ΠΈΡ(ΡΠΎΠ²Π° ΠΌΠΎΠΆΠ΅ Π΄Π° ΡΡΠ°Π½Π΅ Ρ <select> ΠΈΠ»ΠΈ radio buttons ΠΈΠ»ΠΈ checkboxes). ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: ΠΠ°ΠΌΠ΅ΡΠΈΠ» ΡΡΠΌ API ΠΊΠΎΠ΅ΡΠΎ Π²ΡΡΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π·Π° ΡΠΈΠ»ΠΌΠΈ ΠΈ ΡΡΠΎΡΠ²Π΅ΡΠ½ΠΎ ΡΡΠΌ Π½Π°ΠΏΡΠ°Π²ΠΈΠ» ΡΠΎΡΠΌΠ° ΠΊΠΎΡΡΠΎ Π΄Π° ΠΈΠΌΠ° ΠΏΠΎΠ»Π΅ Π·Π° ΡΡΡΡΠ΅Π½Π΅ Π½Π° ΡΠΈΠ»ΠΌ ΠΏΠΎ ΠΈΠΌΠ΅, Π° ΠΎΡ Π΄ΠΎΠ»Ρ ΡΠ΅ ΡΠ»ΠΎΠΆΠ° Π½ΡΠΊΠΎΠ»ΠΊΠΎ checkbox-Π° ΠΊΠΎΠΈΡΠΎ ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡ ΠΊΠ°ΠΊΠ²Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΡΠΊΠ°ΠΌ (Π·Π°Π³Π»Π°Π²ΠΈΠ΅ Π½Π° ΡΠΈΠ»ΠΌ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅, ΠΎΠ±Π»ΠΎΠΆΠΊΠ°, Π°ΡΡΠΈΡΡΠΈ, ΠΆΠ°ΡΠ½ ΠΈ ΡΠ½).
- ΠΡΠΈ Π½Π°ΡΠΈΡΠΊΠ°Π½Π΅ Π½Π° Π±ΡΡΠΎΠ½Π° Π·Π° submit Π½Π° ΡΠΎΡΠΌΠ°ΡΠ° ΡΠ΅ ΠΈΠ·ΠΏΡΠ°ΡΠ° ajax Π·Π°ΡΠ²ΠΊΠ° ΠΊΡΠΌ ΡΡΡΠ²ΠΈΡΠ° ΠΈ Π²ΡΡΠ½Π°ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠ° Π²ΡΠ² ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎΡΠΎ ΠΏΠΎΠ΄ ΡΠΎΡΠΌΠ°ΡΠ°. ΠΡΠΈ Π½Π°ΡΠΈΡΠΊΠ°Π½Π΅ Π½Π° Π±ΡΡΠΎΠ½ ΠΎΡΠ½ΠΎΠ²ΠΎ ΡΠ΅ ΠΏΡΠ°Π²ΠΈ Π½ΠΎΠ²Π° Π·Π°ΡΠ²ΠΊΠ° ΠΈ Π½ΠΎΠ²Π°ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΡΠ΅ ΠΏΡΠΈΠΊΡΠ΅ΠΏΡ ΠΊΡΠΌ Π²Π΅ΡΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΠ²Π°ΡΠ°ΡΠ°. ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ° ΡΠ΅ Π³ΡΠ±ΠΈ ΡΠ°ΠΌΠΎ ΠΏΡΠΈ ΠΏΡΠ΅Π·Π°ΡΠ΅ΠΆΠ΄Π°Π½Π΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°ΡΠ°.
- ΠΠ°Π΄ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΠ°Π½ΠΈ Π½Π° ΠΏΠΎΠ»Π΅ΡΠΎ ΠΊΡΠ΄Π΅ΡΠΎ ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ° Π΄Π° ΠΈΠΌΠ° Π±ΡΡΠΎΠ½ ΠΈΠ»ΠΈ Π±ΡΡΠΎΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ²Π°ΡΠΎ ΠΏΡΠΎΠΌΡΠ½Π°ΡΠ° Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΠΎΠ΄ ΠΊΠΎΠΉΡΠΎ ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π²Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ°. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: ΠΠΊΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡΡΠ° ΠΊΠΎΡΡΠΎ ΠΏΠΎΠ»ΡΡΠ°Π²Π°ΠΌ ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠ° ΠΏΠΎΠ΄ ΡΠΎΡΠΌΠ°ΡΠ° Π½Π° ΠΊΠ²Π°Π΄ΡΠ°ΡΡΠ΅ΡΠ° Ρ ΠΎΠ±Π»ΠΎΠΆΠΊΠ° ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΏΠΎΠ΄ Π½Π΅Ρ ΠΏΡΠΈ Π½Π°ΡΠΈΡΠΊΠ°Π½Π΅ Π½Π° Π±ΡΡΠΎΠ½ΡΠ΅ΡΠΎ ΡΠΎ ΡΡΡΠ°ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π΄Π° ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠ° ΠΏΠΎΠ΄ ΡΠΎΡΠΌΠ°ΡΠ° Π½Π° ΡΠ΅Π΄ΠΎΠ²Π΅ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ Π½Π°ΡΠΈΠ½(ΠΏΠΎΠ³Π»Π΅Π΄Π½Π΅ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΈΡΠ΅ ΡΠΈΠ³ΡΡΠΈ Π½Π° ΠΊΡΠ°Ρ Π½Π° ΡΠ°ΠΉΠ»Π°). ΠΠ° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ°ΡΠ° Π½Π° ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈΠ·ΠΏΠΎΠ»Π·Π²Π°ΠΉΡΠ΅: React.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you canβt go back!
If you arenβt satisfied with the build tool and configuration choices, you can eject
at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject
will still work, but they will point to the copied scripts so you can tweak them. At this point youβre on your own.
You donβt have to ever use eject
. The curated feature set is suitable for small and middle deployments, and you shouldnβt feel obligated to use this feature. However we understand that this tool wouldnβt be useful if you couldnβt customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify