Blog

In the previous tutorial, you learned conditional rendering. Now let’s go deeper into useState and useEffect — the two hooks you will use in almost every React component. useState In Depth You have already seen useState basics. Let’s cover the advanced patterns. Lazy Initialization If the initial state value is expensive to compute, pass a function: // ❌ Runs getInitialTodos() on every render const [todos, setTodos] = useState(getInitialTodos()); // ✅ Runs getInitialTodos() only once const [todos, setTodos] = useState(() => getInitialTodos()); The function is only called on the first render. ...

In the previous tutorial, you learned event handling. Now let’s learn how to show different UI based on conditions and how to render lists of data. Conditional Rendering Conditional rendering means showing different elements depending on a condition. React has several ways to do this. if/else Outside JSX The clearest way is a regular if statement before the return: function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) { if (isLoggedIn) { return <h1>Welcome back!</h1>; } return <h1>Please sign in.</h1>; } This works well when the entire component renders differently. ...

In the previous tutorial, you learned about props and state. Now let’s learn how to respond to user actions — clicks, form inputs, and keyboard events. Handling Click Events The most common event is a click. Use the onClick prop: function ClickMe() { function handleClick() { alert("Clicked!"); } return <button onClick={handleClick}>Click me</button>; } Notice: you pass the function reference (handleClick), not a function call (handleClick()). Passing onClick={handleClick()} would call the function immediately when the component renders, not when the button is clicked. ...

In the previous tutorial, you learned JSX. Now let’s look at the two most important concepts in React: props and state. Props pass data into a component. State is data that the component manages internally. Understanding when to use each one is key to writing good React code. Props: Passing Data Into Components Props (short for “properties”) are how you pass data from a parent component to a child component. Props flow one way: from parent to child. ...

In the previous tutorial, you created your first React app. Now let’s understand JSX — the special syntax that looks like HTML but is actually JavaScript. What is JSX? JSX stands for JavaScript XML. It is a syntax extension that lets you write HTML-like code inside your JavaScript (or TypeScript) files. Here is JSX: const element = <h1>Hello, world!</h1>; This looks like HTML, but it is not. It is JSX. Your browser does not understand JSX directly. Vite (via Babel/ESBuild) compiles it to regular JavaScript before the browser sees it. ...

In the previous tutorial, you learned what React is. Now let’s set up a React project and build your first component. What You Need Before starting, install Node.js (version 20 or higher). Node.js includes npm, the package manager we use. Check your versions: node --version # should be 20+ npm --version # should be 10+ Create React App is Dead — Use Vite The old way to create a React project was create-react-app (CRA). CRA is now deprecated and no longer maintained. Do not use it. ...

React is the most popular frontend library in the world. In the 2025 Stack Overflow Developer Survey, 39.5% of professional developers use React — making it the most widely used frontend framework for multiple years in a row. But what is React? And why should you learn it in 2026? This tutorial explains what React is, what problem it solves, and what is new in React 19. The Problem React Solves Imagine building a web page with vanilla JavaScript. You have a shopping cart. When the user adds an item, you need to: ...

In Part 1, you isolated processes with Linux namespaces. In Part 2, you added filesystem isolation with pivot_root and OverlayFS. Now it is time to finish the container runtime. In this final part, you will: Add cgroups to limit memory and CPU Set up virtual ethernet pairs for container networking Build a CLI with Cobra Run the final container and compare it with Docker Cgroups: Resource Limits Namespaces control what a process can see. Cgroups control what a process can use. Without cgroups, a container could use all the memory on the host and crash everything. ...

In Part 1, you built a process with isolated namespaces. It has its own hostname, its own process tree, and its own network stack. But it still shares the host’s filesystem. That is dangerous. The containerized process can read /etc/shadow, write to /usr/bin, or delete anything on the host. We need to give the container its own filesystem. In this part, you will: Understand chroot and pivot_root Download and set up a minimal root filesystem Implement pivot_root in Go Add OverlayFS for layered filesystems (just like Docker images) Mount /proc inside the isolated filesystem Preparing a Root Filesystem A container needs a root filesystem — a directory that contains everything a Linux system needs: /bin, /lib, /etc, /proc, and so on. ...

Your fastlane pipeline finishes. Every step is green. The build uploads. You feel safe. Then Apple rejects the build. Or your screenshots vanish from the App Store. Or your watchOS app ships as version 1.0 next to an iOS app on version 1.3. A green pipeline is not proof that everything worked. It only proves that no command returned an error code. Some of the worst iOS release bugs happen inside steps that report success while doing the wrong thing. ...