React and Rails Resources

Keep your projects active in Heroku

It is a little obnoxious that your websites go to sleep in Heroku. Makes it seem like your site is a little slow. To counter this you can use this website which will keep pinning your website every 30 mins.

Kaffeine

Rails

Odin Project: very similar structure to Le Wagon challenges. Very in-depth and free! It has a very nice and clear learning path. Feel free to skip the foundations. Your Career in Web Development Starts Here | The Odin Project
This youtube channel has lots of very useful videos (21) Deanin - YouTube
Gorails, haven't used it much but it looks pretty good Learn Ruby on Rails | GoRails
Going over the bootcamp of course! And if you go to the library on kitt you can find some useful things as well.
And of course Rails docs are wonderful Ruby on Rails Guides

Frontend

What framework should I learn

It honestly doesn't matter that much. Just pick the one you like the most/has more job offers. All frontend frameworks do more or less the same thing. I know React (and a little bit of Vue), so that's the one I can speak with more confidence on.

Here's a little breakdown

React: lots of jobs and fairly easy to learn.
Angular: harder to learn and more rigid. But some people like it and there's lots of jobs.
Vue: very fun and easy to learn. Less jobs, but also less competition.

I just want to emphasize that you can't go wrong. Take your time to learn one of them well, and when you want to learn another it will come to you much easier.

Small roadmap about learning React

Quick and dirty, the things you should know

Learn about JavaScript ES6. Specially deestructuring!
How do props work?
How does useState work?
How does useEffect work?
How to create components and import/export components?
How to fetch data from an API in React?
How to create event handlers? (onClick, onSubmit, onHover, etc.)
How to handle links and routing? (Look into React Router)

I think it's very important in this case that whatever resource you end up make sure that they use functional components instead of class components. It's a good indication of how up to date a course is and it makes for a less steep learning curve.

Class components aren't deprecated, but functional components are the norm and hooks are here to stay. You SHOULD know how class components work eventually though.

Once you know this get into NextJS. It will take care of a lots of things for you (routing in particular is much less annoying) and allow you to do more complex things in React easily (lazy loading, server-side rendering, static site generation, etc.).

From there you can learn Redux, TypeScript, Testing (Cypress, Jest, React Testing Library), maybe even Framer Motion for animations. There is so many things to learn! Just go one at a time with those that interest you the most. There's no rush :-)

CSS Frameworks

Please do yourself a favor and use TailwindCSS. It's an utility-first framework, so it doesn't have components. But it gives you a lot of freedom to create things in a quick and flexible way. It's just very intuitive and I always found it the easiest way to make things responsive.

If you want components, there are libraries like DaisyUI and Flowbite. (If you use them in Rails, be prepared to fight with webpack/webpacker)

Also, another popular alternative is ChakraUI. Some people swear by it and it also has a lot of inspiration from Tailwind.

Resources for React

Scrimba course: Very cool! Very practical 10 hours free course where you follow the lecture and do the exercises in their website text editor. It's great because you don't need any set up. Just straight to coding and learning. React Tutorial: Learn React JS - Free 11-Hour Course (scrimba.com)
Brian holt videos from Frontend Masters. A lot more theory, but very clear and concise explanations. Don't worry about getting everything, just take from it what you can which will be a lot. Learn JavaScript, Front-End Web Development and Node.js with Frontend Masters Courses
Odin Project! Again, very high quality free resource with exercises. Your Career in Web Development Starts Here | The Odin Project
I like React docs too Getting Started – React (reactjs.org)

Youtubers

I like watching videos a lot. I love these guys:

You can't go wrong with any of them.

Frontend Masters

I want to give a little shout out to Frontend Masters, one of my favorites resources. They have some incredible teachers on there. And thanks to Le Wagon and the Git Hub Student pack you have a 6 month free trial. Take advantage of it! The lectures are a little more on the theory side, but they will clear up so many important things for you, things that are a little harder to figure out on your own.

Watch the videos by Brian Holt. Watch Sarah Drasner (the AMAZING Sarah Drasner). Watch Kyle Simpson (from You don't know JavaScript), he has some controversial opinions (the use of var for example) but he means well and is one hell of a teacher. Watch Jen Kramer, I learned a lot of CSS from her. Even if it's just flexbox and css grid it will make a huge difference. Watch everything that interests you and ditch it the moment you find yourself bored.

Putting Rails and React together

Once you are more or less comfortable with all these things, look into putting it all together in a Rails/React project. Two separate apps. Rails as an API and a regular React app that fetches data from it. It's honestly simpler than it seems and it's something that I wish I did earlier.

I'll write a small article about it in the future! Take care guys :)

by Diego Nazoa