Welcome to the Course

Role of state in web development

The way to build a website has been reshaped and refined over the past twenty years, but the general process of building it hasn’t changed much. We still need to create an HTML file, design the layout, and host it somewhere on a server.

When it comes to the user interface (UI), there’s another topic that can benefit us. That is state. From jQuery and Angular to React, from the web to other non-desktop platforms (such as Electron or React Native), no matter where we go, there’s a technical question that we need to answer now—how does the screen know there’s a change to apply? We never asked this type of question. We generally assumed the computer just worked that way.

Of course, now we know computers work that way because someone designed them. What’s fascinating about the UI is how it changes when the state is involved. Back in the early days, we didn’t talk about state at all. But now the state is everywhere. Suffice to say, state is still a relatively young topic in the web development industry.

In this course, we’ll use React as the underlying technology to explore and learn how states are introduced and implemented. We hope that, in the end, we will have a better picture to answer the question: How is a render engineIt interprets HTML and XML documents along with images that are styled or formatted using CSS, and a final layout is generated, which is displayed on the user interface. driven by states?

Why learn this course?

This course will help aspiring web developers and experienced professionals alike. It equips us with a deep understanding of React’s core concepts and modern web development practices, empowering us to create efficient and feature-rich web applications. We’ll gain expertise in state management, React Hooks, performance optimization, and custom Hook creation, all of which are invaluable skills in today’s competitive development landscape.

This course enhances our React proficiency and provides insights into the broader context of web development, making it a must-learn for anyone aiming to excel in this field.

Core concepts we will cover

In this comprehensive course, we will delve into the core concepts of React and explore the fundamental building blocks of modern web development using React. Starting with an introduction to function components and their role in establishing parent/child relationships, we’ll provide valuable insights on writing efficient function components. As we progress through the chapters, we’ll delve deeper into the world of states in function components, explaining their significance and practical applications, including their role in Single Page Applications (SPAs) and UI development. We’ll also explore React Hooks, their underlying architecture, and common challenges faced in state management, offering solutions through Hook implementation.

The course will cover built-in Hooks like useState and useEffect, accompanied by detailed explanations of their usage and practical examples. Additionally, we’ll discuss performance optimization techniques using useMemo and demonstrate the power of React contexts in sharing values across components. We’ll delve into working with DOM elements using refs and cover the creation of custom Hooks to encapsulate and reuse logic efficiently. Finally, we’ll conclude by examining how React orchestrates web development resources, including ES6 features, CSS-in-JS approaches, and the transformation of HTML-like lines into JavaScript expressions, culminating in the development of a website using React.