DEV Community: Layade Victor

"Learning React" Book Review

Layade Victor — Mon, 16 Sep 2024 18:41:37 +0000

In this article, I will summarise the book and explain it might be a good read for anyone looking to learn the basics of React. For me to cover the book I'm going to divide the book into three sections.

First Section

The book starts by providing a brief history of React, addressing why it's considered a library. With JavaScript constantly evolving, beginners often struggle to keep up with the changes and understand the necessary syntax to build React applications. The authors tackle these challenges in the opening chapters, introducing fundamental concepts such as variable declarations, function declaration methods, ES6 syntax, destructuring, and asynchronous functions. The following chapter explores the differences between imperative and procedural programming and explains how React embraces functional programming both its build and usage. It also covers the core principles of functional programming. This section concludes with a detailed explanation of React basics, including the Virtual DOM, React components, and how React code is compiled into JavaScript.

Second Section

The second section of the book which is made of Chapters 6-9 is a deep dive into the use of hooks in React, it provides clear explanations and real-world use cases of these hooks. In Chapter 6, the author introduces useRef, showing how it can be used to interact with the DOM, particularly in handling forms. Chapter 7 follows with a discussion on essential rules for using hooks, explaining the differences between useEffect and useLayoutEffect, as well as useCallback and useMemo. Chapter 8 dives into how useState and useEffect are utilized for data storage and requests, highlighting the importance of combining useEffect with fetch for API handling—a crucial skill for building web applications. Finally, Chapter 9 explores error boundaries and suspense, key concepts for managing errors and handling asynchronous operations in React.

Third Section

The book's final section covers testing in React, the use of React Router for navigation, and how React's limitations have led to the development of meta-frameworks like Next.js and Gatsby.

Pros

One of the book’s strengths is its beginner-friendly approach. It excels at delivering essential programming and JavaScript knowledge required for starting with React without straying off-topic. The book effectively explains the relevant JavaScript syntax used in React and illustrates how React supports functional programming without overwhelming readers with excessive details. Additionally, it provides a nuanced discussion of each hook, highlighting the distinctions between them.

Cons

Two major shortcomings of the book are: firstly, the GitHub repositories for Chapters 6-9 are missing, which are crucial for the practical aspects of the book. Secondly, towards the end, the author begins to rush through the material. A slower pace could have provided a more thorough education for readers instead of hastening to finish the book.

Conclusion

Whether you're learning React or working as a developer, this book is a valuable resource for anyone looking to master the essentials of ReactJS. It equips readers with the crucial knowledge needed to excel in React development, making it a must-read for both beginners and experienced developers seeking a deeper understanding of the framework.

"Learning React" Book Review

Layade Victor — Mon, 16 Sep 2024 18:31:46 +0000

"Learning React" by Alex Banks and Eve Porcello is a project-based guide that looks into the essential concepts of React, ensuring readers gain practical skills in using the framework effectively. From exploring the details of React Hooks to mastering advanced component patterns, this book equips you with the knowledge to build dynamic, efficient web applications. It also covers key libraries within the React ecosystem, providing a comprehensive foundation for developers at all levels.
In this article, I will summarise the book and explain it might be a good read for anyone looking to learn the basics of React.
The book starts by providing a brief history of React, addressing why it's considered a library. With JavaScript constantly evolving, beginners often struggle to keep up with the changes and understand the necessary syntax to build React applications. The authors tackle these challenges in the opening chapters, introducing fundamental concepts such as variable declarations, function declaration methods, ES6 syntax, destructuring, and asynchronous functions. The following chapter explores the differences between imperative and procedural programming and explains how React embraces functional programming both its build and usage. It also covers the core principles of functional programming. This section concludes with a detailed explanation of React basics, including the Virtual DOM, React components, and how React code is compiled into JavaScript.
Chapters 6-9 were a deep dive into the use of hooks in React, it provide clear explanations and real-world use cases of these hooks. In Chapter 6, the author introduces useRef, showing how it can be used to interact with the DOM, particularly in handling forms. Chapter 7 follows with a discussion on essential rules for using hooks, explaining the differences between useEffect and useLayoutEffect, as well as useCallback and useMemo. Chapter 8 dives into how useState and useEffect are utilized for data storage and requests, highlighting the importance of combining useEffect with fetch for API handling—a crucial skill for building web applications. Finally, Chapter 9 explores error boundaries and suspense, key concepts for managing errors and handling asynchronous operations in React.
The book's final section covers testing in React, the use of React Router for navigation, and how React's limitations have led to the development of meta-frameworks like Next.js and Gatsby.
One of the book’s strengths is its beginner-friendly approach. It excels at delivering essential programming and JavaScript knowledge required for starting with React without straying off-topic. The book effectively explains the relevant JavaScript syntax used in React and illustrates how React supports functional programming without overwhelming readers with excessive details. Additionally, it provides a nuanced discussion of each hook, highlighting the distinctions between them.
Two major shortcomings of the book are: firstly, the GitHub repositories for Chapters 6-9 are missing, which are crucial for the practical aspects of the book. Secondly, towards the end, the author begins to rush through the material. A slower pace could have provided a more thorough education for readers instead of hastening to finish the book.
Whether you're learning React or working as a developer, this book is a valuable resource for anyone looking to master the essentials of ReactJS. It equips readers with the crucial knowledge needed to excel in React development, making it a must-read for both beginners and experienced developers seeking a deeper understanding of the framework.

Book Review: Eloquent JavaScript – The Essential Guide for Web Developers

Layade Victor — Sun, 15 Sep 2024 13:31:02 +0000

As one of the most widely-used programming languages, JavaScript powers the web. However, because of its fast-paced evolution, staying current with JavaScript trends can be challenging. Many books on the subject quickly become outdated, but one stands the test of time: Eloquent JavaScript. This book has become a favorite among developers and is steadily growing as the go-to resource for those looking to deepen their understanding of the language. In this article, I will provide a summary of Eloquent JavaScript and explain why it remains a must-read, regardless of your experience level.

The book is structured into 21 chapters, but for the sake of this summary, I'll break it down into three key sections. The first section covers fundamental programming concepts and JavaScript syntax, laying the groundwork for understanding the language. It covers essential topics such as commenting, type coercion, and the differences between var, let, and const. The section also explains how loops function, guiding readers through both functional and object-oriented programming in JavaScript. Additionally, it explores error handling, addressing bugs and exceptions, and concludes with a comprehensive explanation of regular expressions.

The second section begins by explaining the importance of using external code, including when and why it's beneficial. It then introduces the Fetch API and looks into asynchronous programming. From there, it explores how the internet functions and the role JavaScript and HTML play in web development, along with a brief history of the browser wars. The section continues with an in-depth look at the Document Object Model (DOM) and event handling in JavaScript, followed by instructions on using the canvas element to create graphics. It also covers events handling, and the book concludes with a crash course on Node.js.

Throughout the book, there are projects designed to challenge and assess the reader's comprehension of JavaScript. These include five main projects, in addition to occasional exercises found at the end of certain chapters. While I focused on understanding JavaScript syntax and web development concepts, I didn't attempt project. However, the book successfully fulfilled my goal of gaining insights into JavaScript syntax and web development, which was my primary focus.

If you're a beginner wondering whether you should read this book and what you'll gain from it, I would wholeheartedly recommend it. Once you've written your first line of JavaScript and watched an introductory tutorial, this book becomes a valuable guide. While it may seem dense and not initially beginner-friendly, it comprehensively covers everything you need to start in the JavaScript ecosystem. From foundational JavaScript syntax to crucial concepts like event handling, DOM manipulation, modules, and Node.js, it provides essential knowledge for developing modern, high-performance web applications.

As a self-taught developer, one of my challenges has been finding a comprehensive resource that thoroughly explains JavaScript and its environment. Eloquent JavaScript addressed this perfectly by serving as a single, structured source of knowledge for JavaScript and web development.

Additionally, it provided me with a solid foundation in JavaScript and deepened my understanding of its syntax.

While this book primarily targets developers, it's a valuable read for anyone looking to advance their understanding of JavaScript. Whether you aim to gain a comprehensive and insightful perspective on JavaScript and web development or simply wish to deepen your knowledge, this book serves as an excellent starting point. It effectively covers all essential aspects without omitting crucial details, making it an ideal resource for mastering JavaScript quickly and comprehensively.

ReactJS: The Good, The Bad, and The Essential.

Layade Victor — Sat, 29 Jun 2024 18:17:33 +0000

I was super excited when I checked my email to see I had been accepted into HNG internship. HNG internship is an 8-week program for immediate and advanced learners looking to start a tech career. You can sign up for a free or paid version of the internship.

Now let's explore what this article is and what you will gain by the end of this article. In this article, we'll uncover what React solves and what it is. We'll also explore why React remains highly popular, despite its drawbacks.

As Facebook's user base began to grow in its early days, the platform faced the challenge of ensuring fast and consistent updates to its UI. This issue became known as the "Phantom Problem." Let's explore a common example on the Facebook website: a user receives a new message and decides to respond via the notification panel instead of clicking on the chat section. Sometimes, the user still sees the previous message count rather than the app's current state. This issue highlights the lack of synergy between JavaScript and the DOM. React was developed to provide a consistent way of updating the UI, and solving this problem became its core strength.

To understand what is React let's go to the docs. React is defined as a UI declarative library. This definition doesn't say much and it might be a little bit much for a beginner. Now let's begin to unpack UI means user interface, it means the visual aspect of a website. Declarative there means the paradigms react uses. Paradigms are the way a code is written. In computer science, there are two fundamental paradigms: imperative and declarative. Declarative specifies what the result should be, leaving the details of how to achieve it to the underlying system. Imperative specifies how to perform tasks through step-by-step instructions.

React embraces the declarative paradigms because you focus on describing the desired outcome. In React, you describe the desired UI state using JSX (JavaScript XML). This code defines what the UI should look like, and React efficiently updates the DOM (Document Object Model) to match that state. You don't have to write imperative code to modify individual DOM elements.

What makes this possible is the Virtual DOM in React. React has a virtual DOM, that is a lightweight in-memory representation of the actual DOM. When your component's state or props change, React calculates the minimal changes required in the virtual DOM, and then efficiently updates the real DOM to reflect those changes. This reduces the number of DOM operations needed, improving performance. We have talked about how the VDOM renders components. Two other important functions are reconciliation and establishing a uniform approach to event handling.

One of the benefits of the React declarative approach is that it allows developers to focus on building the UI (user interface) and abstracts away repetitive tasks like direct DOM manipulation. In addition, React provides a consistent way and efficient way of rendering UI.

Secondly, React avoiding direct DOM manipulation, helps to reduce the chance of introducing errors related to incorrect element manipulation. Also, React's virtual DOM optimization minimizes unnecessary DOM updates, leading to a smoother user experience.

So far, I have talked about why React was created and explained the basic concept of React along with its importance. Understanding that React at its core is a library and not a framework will be a good transition into one of the main shortcomings of React.

A library is a collection of reusable code focused on solving specific problems or adding particular functionality to an application. It offers flexibility and can be integrated into any part of a project without imposing a strict structure. A framework is a comprehensive, opinionated system that provides a structured and standardized way to build and manage an entire application. It dictates the architecture and offers built-in tools and features.

React is a library because it focuses on building user interfaces and allows developers to use it in their preferred way within their applications. On the other hand, Angular is a framework because it provides a complete solution with built-in tools and patterns for building the entire application. Everything needed to build a robust web application, including a powerful templating system, dependency injection, and integrated tools for routing, state management, and HTTP services has already been provided for developers. React allows developers to make a lot of choices and this is daunting for beginners who find it difficult to choose from multiple competing technologies offering similar solutions.

Another limitation of React is that it only has a one-way binding. There is top-down data flow in React i.e. from parent to child and not vice-versa. This is a problem because as applications grow larger and deeper component trees are formed, passing data through multiple levels of nested components (prop drilling) can become difficult to maintain. This is an area in React called State Management. Luckily for developers, React provides its solutions to this in the form of context API and, there are other external solutions to this such as Redux and Zustand.

In conclusion, React is an excellent choice for developers seeking a minimalist yet powerful solution for constructing and handling complex front-end applications. Its extensive ecosystem and widespread job opportunities further make it appealing in the development community.