https://www.bencode.io/tags/react/ Recent content in React on Benny Simmonds Hugo -- 0.149.1 en-us Fri, 28 Nov 2025 17:13:03 +1000 https://www.bencode.io/posts/react-build/ Sat, 21 Aug 2021 22:05:15 +0000 https://www.bencode.io/posts/react-build/ <p>Your React app is ready to ship. Congratulations!</p> <p>Packaging for production is (and should) be different from your development configuration.</p> <p>In the case of <a href="https://create-react-app.dev/">Create React App</a> the toolchain is rich, includes development productivity conveniences such as hot reloading, source maps and <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/">custom environment variables</a>.</p> <p>This toolchain is mind blowingly productive as you develop the app, <code>npm start</code> and watch the magic unfold.</p> <p>At this point, its possible to put the React app one big (~1.7GB) happy container:</p> https://www.bencode.io/posts/redux/ Wed, 29 Apr 2020 12:04:16 +0000 https://www.bencode.io/posts/redux/ <p>Once you start working with <a href="https://www.bencode.io/posts/react/">React</a> in anger, there is a tipping point to be aware of where:</p> <ul> <li>the complexity of data flows piles up</li> <li>the same data is being rendered in multiple places</li> <li>the number of state changes blow out</li> </ul> <p>Being able to tackle these problems in a single place is where Redux fits in.</p> <h1 id="contents">Contents</h1> <ul> <li><a href="#contents">Contents</a></li> <li><a href="#the-problem">The Problem</a> <ul> <li><a href="#option-1-lift-the-state">Option 1 lift the state</a></li> <li><a href="#option-2-react-context">Option 2 react context</a></li> <li><a href="#option-3-redux">Option 3 Redux</a></li> </ul> </li> <li><a href="#a-chat-with-redux">A chat with redux</a></li> <li><a href="#container-vs-presentation-components">Container vs Presentation Components</a></li> <li><a href="#the-redux-principles">The Redux Principles</a> <ul> <li><a href="#actions">Actions</a></li> <li><a href="#the-store">The Store</a></li> <li><a href="#immutability">Immutability</a></li> <li><a href="#reducers">Reducers</a></li> </ul> </li> <li><a href="#react-redux">React-Redux</a> <ul> <li><a href="#react-redux-provider">React-Redux Provider</a></li> <li><a href="#react-redux-connect">React-Redux Connect</a> <ul> <li><a href="#mapstatetoprops">mapStateToProps</a></li> <li><a href="#mapdispatchtoprops">mapDispatchToProps</a></li> </ul> </li> </ul> </li> <li><a href="#redux-setup">Redux Setup</a></li> <li><a href="#async-and-apis">Async and APIs</a> <ul> <li><a href="#mock-api">Mock API</a></li> <li><a href="#api-client-wrappers">API Client Wrappers</a></li> <li><a href="#redux-middleware">Redux Middleware</a></li> <li><a href="#redux-async-libraries">Redux Async Libraries</a></li> <li><a href="#thunks">Thunks</a></li> </ul> </li> <li><a href="#conditional-mapstatetoprops">Conditional mapStateToProps</a></li> <li><a href="#polish-the-finer-things">Polish (the finer things)</a> <ul> <li><a href="#spinner-component">Spinner component</a></li> <li><a href="#status-api-and-feedback">Status API and feedback</a></li> <li><a href="#server-side-validation">Server side validation</a></li> <li><a href="#client-side-validation">Client side validation</a></li> <li><a href="#optimistic-deletes">Optimistic deletes</a></li> </ul> </li> <li><a href="#testing">Testing</a> <ul> <li><a href="#redux-connected-components">Redux Connected Components</a></li> <li><a href="#action-creators">Action Creators</a></li> <li><a href="#thunks-1">Thunks</a></li> <li><a href="#reducers-1">Reducers</a></li> <li><a href="#store">Store</a></li> </ul> </li> </ul> <h1 id="the-problem">The Problem</h1> <p>Imagine a fairly deep component hierarchy, starting with your top level <code>App</code> component. Deep down the tree, there are two child components that need to access a common piece of data (e.g. customer data). How should these components access the data they require?</p> https://www.bencode.io/posts/react/ Sun, 05 May 2019 22:08:10 +1000 https://www.bencode.io/posts/react/ <ul> <li><a href="#react">React</a> <ul> <li><a href="#react-no-frills">React No Frills</a></li> </ul> </li> <li><a href="#tools">Tools</a> <ul> <li><a href="#npm">npm</a></li> <li><a href="#prettier">Prettier</a></li> <li><a href="#eslint">ESLint</a></li> <li><a href="#vite">Vite</a> <ul> <li><a href="#vite-proxy">Vite Proxy</a></li> </ul> </li> <li><a href="#typescript">TypeScript</a></li> <li><a href="#bleeding-edge-and-alternative-tools">Bleeding Edge and Alternative Tools</a></li> </ul> </li> <li><a href="#jsx">JSX</a> <ul> <li><a href="#dom-control">DOM control</a></li> <li><a href="#styling">Styling</a></li> <li><a href="#rendering-lists">Rendering Lists</a></li> <li><a href="#handling-events">Handling Events</a></li> <li><a href="#passing-parameters-to-event-handlers">Passing Parameters to Event Handlers</a></li> <li><a href="#passing-jsx-as-props">Passing JSX as Props</a></li> </ul> </li> <li><a href="#react-hooks">React Hooks</a> <ul> <li><a href="#usestate">useState</a></li> <li><a href="#useeffect">useEffect</a></li> <li><a href="#custom-hooks">Custom Hooks</a></li> <li><a href="#usecontext">useContext</a></li> <li><a href="#useref">useRef</a></li> </ul> </li> <li><a href="#forms-and-user-input">Forms and User Input</a> <ul> <li><a href="#push-cart-to-server">Push Cart to Server</a></li> </ul> </li> <li><a href="#react-ecosystem">React Ecosystem</a> <ul> <li><a href="#tanstack-router">TanStack Router</a> <ul> <li><a href="#vite-setup">Vite Setup</a></li> <li><a href="#routetreegents">routeTree.gen.ts</a></li> <li><a href="#router-setup">Router Setup</a></li> </ul> </li> <li><a href="#tanstack-query">TanStack Query</a></li> </ul> </li> <li><a href="#resources">Resources</a></li> </ul> <h2 id="react">React</h2> <p>React is a JavaScript <em>library</em> for building component based interactive UI&rsquo;s.</p>