Best free resources to learn React.js
Master React.js in less than a month using these beginner friendly courses
React.js is one of the most lucrative UI libraries in the Web Development world. The rise of React to the peak was because of the surge in demand for interactive single-page applications on the web. It still continues to be the go-to library for web developers starting in front-end development.
Components, Props, and States...
The building block of any React application is called Components. They are small UI pieces (static or dynamic) that can be reused. This reusability is the main feature of React.
React will detect the state change of each component after the interaction and "react" to the new changes. This behavior is the reason why React is named React.
Free resources to learn React
I'm a big admirer of free resources to learn anything and everything in software development. This free course on scrimba.com is structured in a perfect way for beginners. This might be the best free course on React given the quality of content and platform where it is hosted.
The platform has a screencast where the speaker Bob Ziroll writes the code and the user can play around with it on the screen itself. The course also involves many small challenges and quizzes for users to test their knowledge immediately after learning. The course emphasizes the importance of completing the challenges, revisiting tricky parts of the course, and taking frequent breaks to remain focused and fresh while learning. The active Scrimba Community on Discord is also very engaging.
The course starts off with creating simple static pages and adding a bit of CSS styling. The second section focuses on "props" which is a very important concept. The challenges along the way help us understand how props are set in levels from parent to child components.
The third section focuses on "states" and the "useState()" hook in React. This is the heart of React as states help detect user interaction. Event Handlers also play a major role in making React more robust. Conditional rendering, making API calls, dealing with forms, and passing around data present in states is all covered in great detail. This section deals with intermediate-level topics like the "useEffect()" hook, derived states, and controlled states.
The last section has two simple projects. The first one is a "Note Keeping" application where learners have to understand an existing code base and add features to it. The second one is a dice game "Tenzies" which is created from scratch. Both these projects help test the gained knowledge and do wonders for the confidence of a beginner.
The best part about this course is the short duration of video lessons. They keep the attention span high and improve productivity. The speaker encourages learners to try small challenges in the lessons to learn on the go. The topics are introduced in a correct chronology to maximize concept clearance.
Apart from React, I learned...
how to approach and understand a new code base
how to tackle any coding problem by breaking it down
how to write clear and concise code
how to master any coding skill (short answer... practice ☺)
Bonus course
YouTube is a great source of web-development content. One channel that stands out particularly is FreeCodeCamp. This YouTube video by John Smigla is great for an overview of basic and advanced React. The course covers all the basic level code of React topics.
The author shares a GitHub repository that the learners have to fork and run on their local machine. The repository contains all the setup code for topics like props, states, all the React hooks, React Router, context API, etc. The course is divided into smaller parts with small pieces of code related to all the topics. The course also talks about deploying React apps on Netlify.
The course is good for even intermediate-level developers who want to revisit and brush up their React skills. I found it very value-adding in my own journey to start React development.
The fastest way to learn any skill is to get understanding of it and start to apply it. We oftentimes get stuck in the imaginary Tutorial Hell where we keep binge-watching content and fail to make use of it.
The most important thing is to jump into creating React projects as soon as you get a working idea of crucial topics in React. "Learn by Doing" will definitely speed up your learning curve. For this I'm attaching a tweet for some React projects to try from Mohammed Junaid Ap
Thank you for reading till the end. I wish you all luck for your development journey ahead and let's keep sharing content and growing together!