React has on my to-learn list for what seems like ages. I’ve tried diving in numerous times over the last few years, but either the time wasn’t right or I couldn’t find the right course or project to work through. Some courses were too hands-on, while others were too hands-off and quickly led to frustration.
So I just sat with my skill set and waited to find the motivation to jump back in.
However, with work projects on the horizon that will most likely be built using React, I decided it was high time to jump on the framework bandwagon.
Now, you all know I’m obsessed with free online courses. 🏫 Sites like Udacity, edX, and Coursera make learning new skills accessible to anyone with an internet connection.
I always hit up these sites first when I want to learn something. As a novice, I do my best learning when I’m following a solid, foundational plan. Otherwise, I’m likely to:
- Become engulfed in a maze of documentation trying to figure out how to prep my development environment for said new technology
- Experience full-on analysis paralysis when deciding on what to build
So when I finally landed on this course, I knew I had to spread the good news. 🎈 I haven’t completed the course yet, but the instructor is awesome and the project you’ll be working through is a great example of how you might use React in the “real world.” 🌎
Course Overview
Front-End Web Development with React is taught by Jogesh K. Muppala, an associate professor at the Hong Kong University of Science and Technology.
There are 4 parts to this course:
- Introduction to React
- React Router and Single Page Applications
- React Forms, Flow Architecture, and Introduction to Redux
- More Redux and Client-Server Communication
While this course is the second part of a 4-course Full-Stack Web Development with React specialization, it’s a great entry point even if you haven’t taken the first course, Front-End Web UI Frameworks and Tools: Bootstrap 4. As long as you understand grid systems and feel like comfortable learning Bootstrap 4 on the fly, feel free to dive right in.
But is it free?
I also want to clarify something about Coursera courses. While you can pay for certificates of completion, you can take any of their courses for free by auditing them.
The Audit option can be easy to miss. If you click on the ‘Enroll’ button for a class, a window pops up that prompts you to start a free trial. Ignore that gigantic call-to-action, and click the ‘Audit the course’ link at the bottom instead.
Course Projects
The course is based around building a single page React app for a restaurant called Ristorante con Fusion. Your app will feature restaurant information, an interactive menu that displays details and customer comments for the user-selected dish, and a form (with validation) that enables users to submit their comments.
A lot of times, getting set up is one of the hardest parts of the development process. Where this course really shines is in its ability to simplify the process of setting up your development environment. You’ll get a handle on everything from setting up Node.js and NPM to using Yarn Package Manager to install dependencies.
Muppala also shows you how to install the Reactstrap component library, which you’ll be using to flesh out your app components. Because you’re using Bootstrap 4, you can really focus in on learning the React without having to take the time to mess with CSS and general beautification of your app. (CSS is my jam 💖, but my brain can only handle one thing at a time!)
Course Improvements
I think a lot of courses leave a lot to be desired in terms of teaching web developers to comply with accessibility guidelines. This is one of them.
I’m currently building out the interactive menu as instructed, and it lacks many accessibility considerations. For starters, the clickable dish cards aren’t accessible to keyboard users. Also, aria-live attributes are lacking so screen reader users aren’t alerted when dish information and comments are printed to the screen.
So if you’re looking for the holy grail of courses that incorporates all the best practices (wait — do those exist?), this seems to be lacking some essential info about making your app a11y-friendly.
However, if you’re looking for a deep dive on React and are willing to learn how to incorporate accessibility into your app on your own time, give the course a shot!
