Paweł Pawłowski
16 October 2023, 8 min read
What's inside
- Understanding JavaScript
- Understanding ReactJS
- Top 8 Resources for JavaScript & ReactJS Mastery
- Summary
Disclaimer: Sunscrapers is not affiliated with anyone mentioned in this post. Opinions stated within this review are solely our own.
ReactJS is a JavaScript library used in web development to build interactive website elements. However, it does not seem like a helpful definition if you are unfamiliar with JavaScript or JavaScript libraries.
Let's break it down.
Understanding JavaScript
| Pros | Cons |
|---|---|
| Versatility: Can be used for both front-end and back-end development. | Single-threaded: Being single-threaded can cause blocking or delay in execution if not handled correctly. |
| Interactivity: Allows for creating dynamic and interactive user interfaces in web pages. | Browser Inconsistencies: Different browsers can interpret JavaScript differently, sometimes leading to inconsistent behaviors. |
| Widely Adopted: Supported by all modern browsers, making it universally applicable for web development. | Security: Being a client-side script JavaScript is more exposed to malicious activities. |
| Ecosystem: Has a rich set of frameworks, libraries, and tools to accelerate development. | |
| Community: Due to its popularity, it boasts a large, active developer community, leading to quick problem-solving and many third-party resources. |
Understanding ReactJS
| Pros | Cons |
|---|---|
| Component-based: React's modular structure (using components) ensures reusability which leads to consistent development and easier maintenance. | Learning Curve: While simpler than some frameworks, React's JSX and architecture might be initially challenging for some beginners. |
| Virtual DOM: React uses a virtual DOM, which optimizes and accelerates the rendering process. | Integration: Integration with traditional MVC frameworks (like Rails) may require additional configuration. |
| Flexible: Easily integrates with various back-end technologies and has a strong foundation for building single-page applications (SPAs) | Too Many Choices: Due to its library nature (as opposed to a full-fledged framework) developers sometimes need to decide on routing, state management, etc. which can be overwhelming. |
| Strong Community and Ecosystem: Backed by Facebook, it has a strong community, and numerous third-party libraries are available. | Fast-paced Updates: The ecosystem evolves rapidly, sometimes making it hard to keep up with best practices and new updates. |
| Hooks & Functional Components: Provides modern approaches to handle state and side effects more cleanly and intuitively. |
React is the most popular way to build user interfaces. In June 2023, over 90,000 developers worldwide decided to share how they learn and level up, which tools they use, and what they want.
According to the Stack Overflow Survey, JavaScript and Python hold their crowns as the most coveted languages. Hoverwer, emerging champions like Phoenix are garnering admiration.
But nestled within the data is a compelling story: the enduring partnership of JavaScript and ReactJS. Their combined prowess in web development remains a force to be reckoned with.
As the digital landscape evolves, mastering these tools becomes an invaluable asset. Plenty of opportunities exist to learn, understand the principles, and practice your coding skills. Some of them are great, some not so much.
So, to save you time, we took a trip around the internet and found some top resources for learning both Javascript and React JS. Without further ado, let’s go!
Top 8 Resources for JavaScript & ReactJS Mastery
ES6 for Everyone
A premium training course to strengthen your core JavaScript skills and master all ES6 has to offer.
Sounds interesting? ECMAScript2015, also known as ES6, is a general-purpose, object-oriented programming language that executes inside a host-provided environment. Therefore, it is unable to function independently.
ES6.io is one of the best courses for the groundbreaking version of JavaScript called ECMAScript. We can read on their website that it is
Updated for ES7/ES2016 and ES8/ES2017 including Async+Await, Babel 7, and more.
It has over seven hours of video materials, but every second is worth watching. Wes Bos - Full Stack Developer, Speaker, and Teacher from Canada - can translate some complicated nuances into something easily understood.
Remember, though, that this is not JavaScript from scratch, so you should have some knowledge before diving into the course.
- The main goal is to
(...) strengthen your core JavaScript skills while preparing and updating you to write modern JavaScript.
“You don’t know JS yet” (book series)
The worldwide bestselling “You don’t know JS yet” is a series of books diving deep into the very core mechanisms of the JavaScript language. It explains concepts related to JavaScript and tricks in a very detailed way.
It doesn’t matter how experienced you are; if you are a beginner or a senior developer, these books are an absolute must if you code in JS.
Books are available to be bought on the Lean publishing website (if you want to pay the author for his hard work) but are also available for free on GitHub.
There are also some courses made by the book’s author available on the Frontend Masters website (check number 4 on our list).
Egghead
Concise Full Stack Courses for Busy Web Developers high-quality video tutorials and curated learning resources with zero cruft.
is how Egghead describes itself.
It is one of the best resources for modern javascript frameworks, typescript, and javascript. Not only is the content really up to date, but they even show how to use some upcoming language/framework functionalities (when it comes to React). Lessons are very condensed and brief - with a usual length of around 2-5 minutes, whole courses take approximately 25-40 minutes. They also have transcripts and code sandbox examples.
If you are a senior or mid-level developer and value your time - there is nothing better than Egghead. As well as, if you are a beginner looking for knowledge, you will find a lot of helpful content.
Frontend Masters
Frontend Masters is an online training platform focused on Web Development. It is perfect if you want a more detailed explanation of the modern frontend stack. Not only does it have excellent and lengthy lessons, but also quizzes and workshops.
But where the website shines is the fact that they recruit actual professionals who teach you their specialties.
If you’d like to learn more about JavaScript, you must go for the already mentioned Learn from Kyle Simpson’s courses
Epic React
Epic React is the most detailed course about React and its APIs.
It goes through details you wouldn’t have a problem finding inside React documentation in an obvious way. It also goes through Hooks, composition patterns, testing, performance, and context API.
It’s quite pricey, but I recommend it if you have to buy only one course.
The only con I could find is that the course material is in JavaScript instead of TypeScript, but the author, Kent.C.Dodds, announced that there would be an upgraded version with Typescript soon.
Testing JavaScript with Kent C. Dodds
Testing JavaScript by Kent C. Dodds is an online course on topics like JEST, mocking, React Testing Library (authored by - guess who? Kent C. Dodds himself), and Cypress.
Basically - it is everything that is “HOT” in the JavaScript testing world. The course explains the philosophy between different testing types and helps you start writing your test immediately.
Codecademy
Codecademy is a web platform that focuses on teaching programming through concrete examples.
If you are a beginner and wonder if coding is for you - this is your place. This platform aims to educate the next generation of IT professionals (but advanced coders also will find something for themselves).
Codecademy lessons, interactive practice, and feedback will significantly help learn React.js.
They have a free React course - learn React, which will teach you React’s concepts like JSX, class and functions components, props, state, lifecycle methods, and hooks.
The lessons are organized around exercises, so learning something is easier when you instantly try it in practice.
As we know - practice makes it perfect.
Khan Academy
Khan Academy is a similar concept to Codecademy. It is a nonprofit organization that aims to provide free, world-class education for anyone, anywhere. It offers instructional videos and practice exercises. You also have access to a personalized learning dashboard that allows you to study at your own pace, wherever you feel.
Summary
To summarize, the listed resources showcase the vast learning options available. Whether you prefer platforms, books, or courses, there's something tailored just for you.
Simply put, while quick tutorials can introduce you to the basics, in-depth courses can elevate you to expert status. Always align your choices with your personal and professional goals.
Embark on this journey with enthusiasm and determination. Best of luck, and enjoy every step of your learning experience!
Reach out to Sunscrapers today, and let's shape the future together! Contact us now.