![](https://private-user-images.githubusercontent.com/135168991/329734361-411e28f1-4dd0-4c6c-8758-1ddeff414195.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTE0MjAsIm5iZiI6MTcyMzk5MTEyMCwicGF0aCI6Ii8xMzUxNjg5OTEvMzI5NzM0MzYxLTQxMWUyOGYxLTRkZDAtNGM2Yy04NzU4LTFkZGVmZjQxNDE5NS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOFQxNDI1MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MzZmMTM0NDkzZTQyODk1M2YxMjYwMzgyNzRlNDljNzdhNTBjZTJhYWE5ZjhhZmIyZDdlMDYxMjBlMTlhNjI1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.jIBwxPjk7mMSyqaSq4hB_dwp_YtCw-codMkaeimpNVU)
- People nowadays can look straight in the future... You don't believe me? In order to knock you out I am presenting you my new project named React Weather App. My application allows you to predict the unpredictable and travel safely. Hourly-forecast with the essential data for the day is what I am offering you. The main purpose behind the project is my course work at Orbis and also to get familiar with JS framework, in my case with React.
- Functionality Live Demo
- Feedback
- Knowledge stack
- Setup/Installation
- Screenshots
- Status
- Credits
- License
trimmed.online-video-cutter.com.mp4
- In case you want to share your thoughs about my project you are free to do so at [email protected]
![react core concepts](https://private-user-images.githubusercontent.com/135168991/329727400-7b864aeb-9cf4-49a4-905e-ec10290f2932.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTE0MjAsIm5iZiI6MTcyMzk5MTEyMCwicGF0aCI6Ii8xMzUxNjg5OTEvMzI5NzI3NDAwLTdiODY0YWViLTljZjQtNDlhNC05MDVlLWVjMTAyOTBmMjkzMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOFQxNDI1MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mMzdhNmNmYmIxZjhmYWVmNzM5YTgyZjYwOTc1NGQ1N2QwZTc4ZmIwZmEzMWQzNWY3ZGUzZDYwYjEzMThhYmZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.yoMHbSLJWxuTzosoLI_oC5qokW7T6ucGj8mGuATR3J0)
βοΈ Lets begin with the JSX syntax that is something specific for this framework.
Another crucial concept I have used in action are the components. They involve working with HTML, CSS and JS in order to being develop.
π So where I have received this weather data from? The answer is - OpenWeatherAPI. For the RESTapi requests I have been using Axios which
provides excellent opportunity to handle requests and their reponses.
π Some components have state and change dynamically. Other are rendered conditionality, but in the end, props is what is making them reusable and quite useful. In order to use my state across many components without prop-drilling I have used custom hooks and useContext to derive the state everywhere I need it. Other hooks that were implement in my project are useState, useEffect, useMemo and useCallback.
- Core:
React, JavaScript, HTML
- Additional libraries:
Axios, Sass
- First make sure that you have
node
andnpm
installed on your machine. - After that,
clone
therepo
somewhere locally. - Open it in your favourite
code editor
and type this in the terminal:
npm install
With this command you install all packages that you need to run the React project.
- After the node_modules folder is being install type:
npm start
![search history tab](https://private-user-images.githubusercontent.com/135168991/329809437-d52288ef-b740-41aa-bd4e-17e785bb7974.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM5OTE0MjAsIm5iZiI6MTcyMzk5MTEyMCwicGF0aCI6Ii8xMzUxNjg5OTEvMzI5ODA5NDM3LWQ1MjI4OGVmLWI3NDAtNDFhYS1iZDRlLTE3ZTc4NWJiNzk3NC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODE4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxOFQxNDI1MjBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MmI5YjY4ZWU3Y2Q0ZWEzMjNhYWNjNjQzZWU0NmE2N2Q2ZTYzMjgwM2I3NGM1MmRjMmNhMjk2ODNkMzcwMDc0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.PYyCCQO4Bexfly1gTxyzGFZYxwR1fAeq2V4laQch_C4)
- All tasks that were given to me for this project are completed. β
Although, I am not satisfied completely because there is always a thing or two to improve.
Stay tuned for more! π
- Here I want to express my gratitude for my menthor Mr. Serafimov. π
He was always by my side and without him and his responsive help this project could never be finished.
Along with that, thanks to the other workers in the companany that welcomed me warmly.
Last but not least, acknowledgement to Mr. Kovachev that gave me the change to show my skills and determination and what I am capable of!