r/learnjavascript • u/[deleted] • Apr 01 '21
Six months after I started learning Javascript, I made my first React app!
31
u/exxy- Apr 01 '21
Looks great! I'd suggest adding some transitions to really take this to the next level.
9
Apr 01 '21
Thanks so much for the feedback, I'm actually doing that as we speak! Learning transitions has been on my to-do list for a few weeks, and I knew this would be a perfect project to use them. Will be sure to post updates when I've added some transitions and extra features.
Thanks so much!
7
u/forresthopkinsa Apr 01 '21
Try react-spring
4
Apr 01 '21
I’ve just had a quick look at it, and I LOVE it! I’m going to learn how to use it tomorrow. Thanks for the pointer, I’m excited!
3
u/Slomoose Apr 01 '21
Nice work mate! Wondering how you did those shapes in the background?
6
Apr 01 '21
Thanks a lot mate! At the moment they’re all just images that change onClick, but I’m looking at making them SVG images that are layered behind the app.
3
u/captmomo Apr 02 '21
Do you mind sharing how you designed that UI? cos it looks fantastic. What is your workflow?
1
Apr 02 '21
Hey! Sure, it’s influenced by the BBFC interface (shapes and colours) and I just tried to think about how I could put a spin on it but make it familiar. As it’s meant for teenagers to use, I wanted it to be colourful and simple, am happy with how it came out!
1
3
u/Markohanesian Apr 02 '21
How did you do the colored blob backgrounds? Are they different svgs? Looks great!
1
Apr 02 '21
Hey! At the moment they’re just images that change on click, but I’m going to redo them with SVGs and see if I can imagine them a bit more dynamically.
2
u/Tri11ionz Apr 01 '21
Hi,
Did you have any previous coding experience?
4
Apr 01 '21
Hey! I’d played around with HTML/CSS for a few years but only the basics (I knew how to do divs, classes, but that’s about it). No programming at all until 6 months ago though.
3
u/Tri11ionz Apr 01 '21
That's awesome. How did you learn?
I'm currently doing the JS course on w3 schools but sometimes it gets a little boring.
4
Apr 01 '21
Thanks a lot! I used teamtreehouse.com and think the curriculum really helps you learn in a structured way. Their react course is quite outdated though, so I learned a lot of the basics from YouTube and then solving problems along the way while creating this.
2
u/zetaBrainz Apr 01 '21
Looks great actually. I agree with one of the posters, there should be a slow transition to the next slide. Its really jarring when the screen suddenly changes.
Another thing is if you used any css style libraries. I think your styling looks great. If you do, let me know what is is. I want to try it out.
Otherwise project looks great ☺️
1
Apr 02 '21
Thanks for the comment, I totally agree about the animation. I’m going to work on that today, another post showed me react-spring so will check that out.
It’s running on bootstrap (for basic styles) with an Adobe font. Lots of flex box going on, and some original images ✌️
1
u/Ok-Entertainer1092 Apr 02 '21
I’ve been learning around 6 months and still don’t fully understand the basics 🤣
0
Apr 01 '21
[deleted]
6
Apr 02 '21
Thanks a lot! I did about 4 months of JS, at least two hours a day, and made sure I had a really solid understanding of all of the basics (variables, arrays, objects, loops, etc).
I actually built a basic version of this in Vanilla JS first, then decided to go and learn React and rebuild it.
Make sure you’re really comfortable with JS first because all of the logic involved in this is JS, React just handles the states etc.
2
u/ElormD Apr 04 '21
Hello there! I would like to know which resource you used in learning javascript within that 4 month period?
And the React as well?
2
Apr 04 '21
Hey! I learned using teamtreehouse.com. The videos are awesome and it’s a well structured curriculum. I committed around 2 hours+ per day (every day) for 6 months. For React, I used YouTube videos and just started building as soon as I could, and learned as I went.
1
0
0
19
u/[deleted] Apr 01 '21
Six months (to the day) since I started learning Javascript, I've made my first React app.
I'm a filmmaking teacher, and I'll be using this app with my students to help them find out what age rating their film would be given by the BBFC (the film classifiers).
I've not deployed it yet, but I'm pretty proud of it! Thanks for all the help from this sub!
The repo can be found here.