Co možná nevíte o React Dev Tools

Co možná nevíte o React Dev Tools

Jakub Beneš Software Engineer @ Outreach • jukben.codes • github.com/jukben

Agenda 1. (Ne)zábávná teorie 2. Live demo

Čenglish

Bůh dal lidem kód, ďáběl debugger. — ChatGPT 3.5

function MyButton() { return <button>I’m a button</button>; } debugger;

efektivní debugování = profit

function somethingCrazy() { let result = “”; for (let i = 0; i < 5; i++) { if (i === 0 || i === 1) { for (let j = 0; j < 2; j++) { console.log(“tady jsem”); result += i === 1 ? “e” : “r”; } } else if (i === 2) { result += “a”; } else if (i === 3) { result += “c”; } else if (i === 4) { result += “t”; } } return result; }

Někdy je třeba trochu tězkotonážnější technika

Co pro to potřebujeme? • Bežet aplikaci v Dev mode • Defaultní podpora v Create React App, Next.js,… • ESBuild (jsxDev) • Babel (@babel/preset-react) !

React Dev Tools

Trochu React teorie

Úvod do JSX function App() { return <h1>Hello World</h1>; }

import { jsxDev as _jsxDev } from “react/jsx-runtime”; function App() { return _jsxDev( “button”, { children: “I’m a button” }, void 0, false, { fileName: _jsxFileName, lineNumber: 1, columnNumber: 1, }, this ); } https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Render a Commit

https://react.dev/learn/render-and-commit

• Triggering a render (delivering the guest’s order to the kitchen) • It’s the component’s initial render. • The component’s (or one of its ancestors’) state has been updated. Re-renders when state updates

• Rendering the component (preparing the order in the kitchen) • On initial render, React will call the root component. • For subsequent renders, React will call the function component whose state update triggered the render.

• Committing to the DOM (placing the order on the table) • For the initial render, React will use the appendChild() DOM API to put all the DOM nodes it has created on screen. • For re-renders, React will apply the minimal necessary operations (calculated while rendering!) to make the DOM match the latest rendering output.

(React) Dev Tools to nekončí

Díky! Q&A

Resources • React Developer Tools • Chrome DevTools • LocatorJS • Create React App • https://react.dev/learn/render-and-commit • https://react.dev/learn/react-developer-tools • https://github.com/jukben/todo-react