A presentation at Letní ReactGirls & Outreach meetup in in Prague, Czechia by Jakub Beneš
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
for free. You
can too.