Introduction to React and NodeJS (Udemy.com)

Bingo. Ok seriously John Purcell always giving good courses, so really I havent even started this course and I am giving a 5 stars rating. But the really reason I am here is because I have already in the process of going through 2 lengthy Javascript courses, a very long Node.JS course, a long React course, and get stucked at various points, or just lost track of things, or just mixed up between different courses, and I want something shorter, simpler, quicker pace, more intuitive, more fun and less struggling, skipping may be the tough topics and bring me from point A to point B in a smoother path to let me see what I can do with Node.JS and React. Then perhaps armed with this level of feel good knowledge I can be more ready to tackle those long long courses. You are expected to know a bit of javascript, mysqld, node.js because there wont be much theoretical discussion, just go straight and create react app, mysql database and tables, create db object to connect to mysql. Everything is direct just do it style. Using module.exports, arrow function, callback function. constructor, super, this, destructuring without even needing to explain what they mean. No lengthy discussion. "Axios is promise based, that means you can use then and catch", and just that few words you are coding promise. It has never occurred to me accessing mysql database need to use async/promise coding. "Lets create a class", is all the introduction you have before you are off to creating a fairly fun class with constructor, with save, get, getAll, update, delete methods. Getter? Well John thought its introduce in 2015 so he used it. This is how a simple good example tend to make me learn and think more than several hours of recorded video. I think like, ok, you create a class for BookRepository, but not book. Why? And that makes me more careful about what class I want to declare in my own project. Very important concept like non-blocking single thread is explained in 3 sentences - not a whole section like in other course. Also, we straight away put SQL query as method inside class, wow, like in other training after may be 40 hours I still havent seen anything like that. (Compare to another famous instructor with 70 hours course, whose class example is really screwy and sort of didnt hit the point, and after a few days tackling hard I have to give up not sure why we need class at all.) And did you see that in video 45 Purcell just casually changed a function into class. Mind blowing stuff. Jackie Chan stuff. Why? That is basically just a form. What advantage does class have over function? Method chaining - just use it - no explanation require because its intuitively understood. Any setback? Yes. React Router - what is that? After a few days I kind of realized the express router is the backend routing, and the React router do the frontend routing. Watching Purcell is a bit like watching my own colleague doing technical sharing sometime I can easily lost track of which folder or tab he is in as he switched between client, server and ReacTutorial folders and files. I need to keep a one page note to outline which /folder/files do what, frontend or backend or just some testing script. For example there are Book.js and books.js it is hard to remember which is which. And learning can be easier if we just name the filename and variables more explicitly. I did that myself e.g. You call it BookLibrary I will call it BookLibraryFrontendComponent. You call it books.js I named it books-sql-queries.js. If it is a state I will explicitly called it bookState to reduce confusion. The client/server folder naming is slightly unfortunate (because both are actually on the server-side) I think it might be better called frontend/backend or something else. Ironically, after loving this 7 hours course, I actually wish John can expand it into a 70 hours course. Ha Ha. But perhaps not really, I think a short course give me more time to think, easier to see the whole picture. There are things like too much html css dom or even javascript itself (who needs to know the hours of fine points of function constructor and class, when all we just need is a 5 minutes example) that you just need to left out if you want to see the whole picture, and I thank Purcell for leaving those things out. In fact it is while doing this course that I sort of have this idea like I wonder if Udemy can come out with AI instructor, where an AI version of Purcell can detect our level of competency and keep fast forwarding the course, making it more compact when we run through the courses many times. Like may be every video has a feedback button, where we choose too hard, too easy, lack details, more theory - and the AI Purcell can modify the course on the run. One of the most magical moment of this course is when I was all ready to write the sql query into all the router.xxxx routes, I keep telling ok so it is in this route area I put in all my sql queries, Purcell suddenly said lets create a separate class file to handle all the sql query code. Completely mind blowing. And this sudden switch makes me see the real usefulness of class. Unlike other course where I always feel uneasy and unconvince with their class example. There is also funny moment like after section 5 Purcell said we have completed the REST service, and I have coded everything thus far and not realize I have completed any REST service. That is also a powerful education moment - REST is not about downloading a library or using a particular keyword or arrow or funny brackets. Its just the normal course of coding. The REST is history!!! The material/ui video is slightly out of date and students need to figure out how to install the new mui core and icon but otherwise the code is still the same. You get this error export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' I think Switch is replaced with Routes. With a bit of adventurous spirit I think I can manage the switch from react router 5 to 6. Like change Redirect to Navigate. Section 10 withRouter depreciated in v6 it can be a bit hard to figure out how to overcome this. I like node.js of using res.json(something) to throw all the database rows in the browser, but with React I seems to need to painstakingly doing something.name, something.address, something.phone etc there must be an easier way. And I learn something, even that simplistic header, which I thought might be just a simple index.html, turns out to be a react component. A React Header! But seriously, I question the wisdom of using books, book-repositories, Book, BookLibrary as filename it makes learning harder. How about (1) books-routing-backend (2) books-sql-query-class-backend (3) Book-Entry-Form.js (4) Book-Listing-React-Component-frontend. This course makes me realize why I failed to master those 40 hours or 70 hours course. In those long courses, I keep moving forward but never build a strong foundation, so that eventually at some point I just get stuck and can no longer progress. With this shorter course, I can go through the course many times, each time I write something different, example instead of books, I do motorcycle, create a different and more complex database; then create a customer service report database and go through the course again, may be testing out new value like datetime instead of just text and number, each time the foundation get stronger, and eventually I believe I will have confidence to tackle bigger course and may be even a serious project. Along the way, I discover little secrets, like, if instead of using the form to submit new book I actually use Postman to submit new book, the React frontend wont pickup the change i.e. not 110% reacting afterall. Purcell has this tendency to explain formidable concept with one sentense so you better dont miss them: useEffect is like componentDidMount, and useState is something that setup state-like properties, in a function - I think thats all the explanation I can gather. Then follow a 5 minutes example. It would be 2 hours video in other courses.

The course definitely is showing its age by now, but that doesn't mean it's not good. For a beginner I would definitely think it might be a bit on the harder side, but seeing the course again and again would probably alleviate such a concern. This is great, and the instructor was amazing!

The course was very clear, easy to follow and gave the necessary jump start to create some react application myself. While doing this, I experienced that there was still a lot to learn, but practice brings knowledge.

I love that his explanations are in the middle of the road so newbies can understand and follow. For me, it is great as I have just received my bachelor's degree in CIT, and this is a refresher course as we begin, and I can build on that with the new information I am unfamiliar with.

The instruct has very good tempo with clear presentation. I enjoyed the class and feel it was very worthwhile. Be aware that if you are taking the course anytime after 2022 that you must be careful to not use the latest versions of React and React Router. The course used react-router-dom 5.2.0 and if you try to use react-router-dom 6.x.x it will not work.

For me, it's so confusing each time he cancels or starts the server and node commands in the terminals... I'm getting the hang of it through trial and error though. But at Section 4 and 5 it was a nightmare ;D

I really like the way the course was taught. Broken up into manageable topics per video. Only difficulty I had was needing to revert to version 5 of react-router-dom from version 6 to follow along.

At times the instructor seems confused. There are a few instances where things have been changed and not included. Some explanations need to be better.

The lessons have been clear and precise, the tone and modulation of the tutor are good for a virtual course.

Amazing Course, well explained, simple and straight to the point. This course shows you how to implement a basic crud app using MySQL,Express and React. This combo is not often found on Udemy as most prefer MERN. It would be even more amazing if the instructor added Sequelize, JWT Authentication and a basic redux implementation.