You are currently viewing Learn Redux Wes Bos course

Learn Redux Wes Bos course

Just looking for a fun, short course to practice and upskill a bit. I haven’t used Redux so I thought the Wes Bos Learn Redux course would be a fit (I actually had but forgot.) Unfortunately, I’m not able to npm install and I might take a look at this later after all. 🙁

Ok, you know how I often say that taking a break is one of the best ways to move forward? That was true today. After Googling the error code: ENOENT: no such file or directory, open ‘/Users/lisasavoie/sites-react/learn-redux-wes-bos-course/package.json’ I found a Stack Overflow question that caused me to look for the package.json file – which wasn’t in the root. 🤦‍♀️ So I cd’d into the folder I’m supposed to be in, learn-redux, and violà! 🎉 Had I read the readme.md or the error message, I would have known. After all that, I may need a nap. 🛌

The Learn Redux course is a free course meant to follow the React.js course. There’s a tiny bit of setup. You’ll need:

I also recommend using the Slack channels for the Wes Bos’ courses. To have access, you do need to have at least one paid course. But I’ve found the Slack channels to be super helpful when taking courses previously. Something I’m making a note of for future me is that there’s a pinned thread where someone has posted an updated package.json and Main.js component. If you’re having issues, you might take a look at the pinned threads. Update: didn’t need the file but if you wanted to update dependencies, take a look. 🙂

Getting started!

So I’ve been able to run npm install 🙌 and I’ve run npm start which gives me access to a web server and shows we’ll be using Webpack for hot reloading. The browser window didn’t open, but the video has a tip for Mac (or iTerm users) to hold down the command key and click on the URL http://localhost:7770. Safari is my default so I copied the URL and opened it up in Chrome. (Note to self, sometimes the server will open up in Chrome automatically. Look up how to make this happen while keeping Safari as a default.)

Styling Changes

The link for the h1’s font-family seems to be broken. I might go in and update the font, but I’m happy with the current font.

Each photo has a “like” and “comment” count. The heart and count for likes had a bit of space between them. The speech bubble and count for comments didn’t. So I added 4px of right margin to the .speech-bubble code block in the style.styl file. Niiice!

What is Redux being used for?

React is a library, not a framework. So there are a few things it isn’t set up to do. One of those things is to create a multi-page app with links to each page. React is set up to create SPA (Single Page Apps) where the single page’s UI updates. It can look like a new page loads but it doesn’t.

It also enables the passing of data not through the component tree. Usually data is passed from one component to it’s nested child, to it’s nested child and so on. Instead, we’re able to pass data to the component that will use it. 🙌

Thoughts

I always like Wes Bos’ courses. He explains concepts very well. The apps we build are well designed and always look nice. There are usually little CSS transitions that are worth diving into. And he shows how he debugs issues which is so helpful to my growth as a developer. The course itself is a bit on the older side, but all of the instuctions work and the app itself works. And I had the opportunity to have some React practice. For me, that’s great!

If you wanted to add to the add, a back button to the photo grid would be nice.