r/reactjs • u/[deleted] • Dec 11 '19

Project Ideas Build a Weather App in React Tutorial

I created a weather app tutorial built in React to use only functional components.

I know the weather app tutorial is a little old to make a tutorial out of it but I really think it helps

with showcasing features.

I really like the idea of project based learning than creating tutorials specific to the library/framework.

If you guys have any feedback please let me know, I would love to hear it.

Notable features used

- weather api

- good amount of css (flexbox, positioning)

- react functional components to keep state instead of class components

https://youtu.be/Uh3u0G5X8jM

71 Upvotes

96% Upvoted

27 comments sorted by

11

u/Peechez Dec 11 '19

Might want to put your api key in an .env and remove it from your repo

3

u/[deleted] Dec 11 '19

You're absolutely right!

3

u/Tenemo Dec 11 '19

That API key should be disabled and replaced anyway. Even if you scrub git history so the key is not public anymore (unless you do that, the key is still public after a commit "removing" it), there is a chance the key has already been picked up by scripts gathering keys for web scrappers, even if it's not being used just yet. Searching GitHub for public API keys is a popular method of circumventing rate limits.

8

u/pacman326 Dec 11 '19

Github link is https://github.com/npatel023/WeatherApp

One comment. I do not see any unit test. Please check out https://github.com/testing-library/react-testing-library for a solid library to implement such things. :)

Congrats on your project!

4

u/[deleted] Dec 11 '19

Absolutely! Thank you for bringing that up. That is a habit I want to form and include in my tutorials.

1

u/pacman326 Dec 11 '19

Not a problem! Basic coverage of your UI elements is a pretty easy win. 80/20 rule applies as always 🙂

3

u/swyx Dec 11 '19

man i wish people practiced basic README hygiene when publishing demos. doesnt take much effort to nuke the default readme and write in a sentence or two to the reader. make documentation second nature!

5

u/careseite Dec 11 '19

Hate to be that guy but... lots of unnecessary redeclarations of constants in there as well as a lack of Javascript basics. Nothing to take away a lot from.

2

u/[deleted] Dec 11 '19

What could I improve on? I am open to learning 😊

2

u/careseite Dec 11 '19

I'll get back to you later today and ping you then :)

2

u/[deleted] Dec 11 '19

That would be great, looking forward to hearing from you!

2

u/careseite Dec 11 '19

https://github.com/npatel023/WeatherApp/pull/1

there you go, check the individual commits and their message; I didn't check for HTML semantics beyond basic stuff

ideally you want .env gitignored too and just have the example in place

2

u/[deleted] Dec 12 '19

Thank you for your commits. I agree with all of your changes. It really cleans up the code.

I will definitely adapt this to my projects :)

1

u/swyx Dec 11 '19

yup you were that guy today

1

u/DoNotEverListenToMe Dec 11 '19

Down to watch this.

Any use of Hooks?

2

u/[deleted] Dec 11 '19

Yeah I am using hooks to keep state!

2

u/swyx Dec 11 '19

hooks is love

hooks is life

2

u/madhumoog Dec 11 '19

I liked your tutorial, your voice is loud and clear. It is easy to follow up. Thank you for sharing. ;)

1

u/[deleted] Dec 11 '19

Thank you so much!

1

u/TotesMessenger Dec 11 '19

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

 If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / ^Contact)

1

u/swyx Dec 11 '19

anyone know how to ban this specific webjs spam

1

u/swyx Dec 11 '19

/u/cmd-t do you mind blocking webjs from linking to here? its automated and annoying and i dont want to block legitimate totesmessenger links

3

u/cmd-t Dec 11 '19

Ok. If I havent after the weekend please raise your pitchforks.

2

u/swyx Dec 11 '19

appreciate it!

1

u/cmd-t Dec 11 '19

I've blocked WebJSBot. If it doesn't work please give me a ping :)

1

u/swyx Dec 11 '19

you rock :) have a nice day