Searching for react

78 things found (50 shown)

78 matches in 0.04 seconds

How to "onchange" in ReactJS Score 35.785170 Popularity 1.963432 (1) 0 21 October 2015

https://www.peterbe.com/plog/onchange-in-reactjs
…to be a pleasant UI. Problem is, you can't do that in ReactJS. It doesn't work like…
HTML, React components must represent the state of the view at any point in time…

Display current React version Score 31.661324 Popularity 1.449675 (4) 2 7 January 2018

https://www.peterbe.com/plog/display-current-react-version
Usually you know what version of React your app is using by opening…
…the package.json, or poking around in node_modules/react/index.js. But perhaps…

How to create-react-app with Docker Score 31.107899 Popularity 1.577003 (3) 0 17 November 2017

https://www.peterbe.com/plog/how-to-create-react-app-with-docker
Why would you want to use Docker to do React app work? Isn't Docker for server…
…with create-react-app; dev server, running tests and creating build artifacts…

React 16.6 with Suspense and lazy loading components with react-router-dom Score 27.699217 Popularity 1.096898 (8) 4 26 October 2018

https://www.peterbe.com/plog/react-16.6-with-suspense-and-lazy-loading-components-with-react-router-dom
…!" Either way, React v16.6 came out a couple of days ago and it brings…
…was deliciously simple but I was curious; how does that work with react-router-dom…

Displaying fetch() errors and unwanted responses in React Score 26.286580 Popularity 1.306722 (5) 0 6 February 2019

https://www.peterbe.com/plog/displaying-fetch-errors-in-react
React app needs to deal with this. Ideally in a not-too-clunky way. So here is one…
…pulled was to be aware that exceptions, when asked to render in React does…

How to throttle AND debounce an autocomplete input in React Score 26.186850 Popularity 1.600134 (2) -4 1 March 2018

https://www.peterbe.com/plog/how-to-throttle-and-debounce-an-autocomplete-input-in-react
React with a mocked-out network request and mocked out UI for actual drop-down…
…>; })} </ol> </div> ); } } One thing to notice on the React side…

How to deploy a create-react-app Score 23.735575 Popularity 0.886567 (12) 5 4 November 2016

https://www.peterbe.com/plog/how-to-deploy-a-create-react-app
First of all, create-react-app is an amazing kit. It's a zero configuration…
…bundle that gives you a react app boilerplate with a dev server, linting…

An example of using Immer to handle nested objects in React state Score 22.259586 Popularity 0.908894 (11) 3 18 January 2019

https://www.peterbe.com/plog/using-immer-to-handle-nested-objects-in-react-state
…simple React app that displays a "todo list like" thing. The state (aka…
…this.state.tasks) is a pure JavaScript array. The React components that display the data…

Component, component function or plain function in React Score 21.172293 Popularity 0.751564 (15) 6 6 February 2018

https://www.peterbe.com/plog/component-or-function-in-react
…or not. For all other cases, use a function, especially if it's not React specific. Your…
…and rendering some JSX, you have choices. You can write a React component…

useSearchParams as a React global state manager Score 20.886017 Popularity 0.587160 (20) 10 1 February 2021

https://www.peterbe.com/plog/usesearchparams-react-global-state-manager
…tl;dr; The useSearchParams hook from react-router is great as a hybrid state…
…manager in React. The wonderful react-router has a v6 release coming soon…

4 different kinds of React component styles Score 20.502369 Popularity 0.710189 (16) 5 7 April 2016

https://www.peterbe.com/plog/4-different-kinds-of-react-component-styles
I know I'm going to be laughed at for having misunderstood the latest React
React more and more. There's a certain element of confidence about them since…

create-react-app, SCSS, and Bulmaswatch Score 19.707628 Popularity 0.503119 (21) 9 12 February 2019

https://www.peterbe.com/plog/create-react-app-scss-and-bulmaswatch
…1. Create a create-react-app first: create-react-app myapp 2. Enter…
…the browser at http://localhost:3000 That's it! However, the create-react-app…

Webpack Bundle Analyzer for create-react-app Score 19.302332 Popularity 0.588157 (19) 6 14 May 2018

https://www.peterbe.com/plog/webpack-bundle-analyzer-create-react-app
…now use webpack-bundle-analyzer on a create-react-app bundle. Yay! Check out…

A React vs. Preact case study for a widget Score 19.037613 Popularity 0.419219 (22) 8 24 July 2019

https://www.peterbe.com/plog/react-vs-preact-case-study-for-a-widget
…tl;dr; The previous (React) total JavaScript bundle size was: 36.2K Brotli…
But, to make it a bit better for users, I wrote a React widget that renders…

10 Reasons I Love create-react-app Score 18.370066 Popularity 0.382223 (24) 9 4 January 2017

https://www.peterbe.com/plog/10-reasons-i-love-create-react-app
…on create-react-app which I've kinda fallen in love with. Here are my reasons why I…
…love create-react-app: 1. It Just Works That wonderful Applesque feeling…

Public Class Fields saves sooo many keystrokes in React code Score 18.264315 Popularity 0.638555 (18) 2 14 April 2017

https://www.peterbe.com/plog/public-class-fields
…in my view, for React coders; Public Class Fields. The Problem? Very common…
…pattern in React code is that have a component that has methods that are tied…

Some tips on learning React Score 17.617636 Popularity 0.109904 (28) 11 4 August 2015

https://www.peterbe.com/plog/tips-on-learning-react
In the last month I've been playing with React in my spare time. Said time…
…excited about it even though it only scratches the surface of what React can do…

React lifecycle hooks must-have Score 17.529303 Popularity 0.236623 (27) 9 13 August 2017

https://www.peterbe.com/plog/react-lifecycle-hooks-must-have
…! At this point, in my React learning I think I've memorized much…
…of these by heart to be good at React. In fact, there's several of these that I almost…

Whatsdeployed rewritten in React Score 17.397722 Popularity 0.098089 (29) 10 15 April 2019

https://www.peterbe.com/plog/whatsdeployed-rewritten-in-react
…is spaghetti jQuery code. So, instead, he re-wrote it in React. My only…
…requirements were "Use create-react-app and no redux", i.e. keep it simple. We also…

Merge two arrays without duplicates in JavaScript Score 17.094952 Popularity 1.153491 (6) -14 20 September 2018

https://www.peterbe.com/plog/merge-two-arrays-without-duplicates-in-javascript
…list and I don't want to mutate existing arrays because of React state stuff…

How to simulate slow lazy chunk-loading in React Score 16.711979 Popularity 0.330833 (25) 4 25 March 2021

https://www.peterbe.com/plog/how-to-simulate-slow-lazy-chunk-loading-in-react
Suppose you have one of those React apps that lazy-load some chunk. It just…
…downloaded by the browser, it carries on the React rendering with the new code loaded…

Visual speed comparison of AngularJS and ReactJS Score 15.928875 Popularity 0.057888 (30) 8 20 July 2015

https://www.peterbe.com/plog/visual-speed-comparison-of-angularjs-and-reactjs
ReactJS The point of AJAX or Not was not to compare Javascript frameworks but I…
…with ReactJS (version 0.13.3). Anyway, here's the code and it's using the GitHub…

More CSS load performance experiments (of a React app) Score 15.586523 Popularity 0.307807 (26) 3 25 March 2017

https://www.peterbe.com/plog/more-css-load-performance-experiments
…(React in this case) does ALL the DOM rendering, which is practical but suffers…
But that's not trivial. Things like react-router (especially version 4) makes it a lot…

A darn good search filter function in JavaScript Score 15.487727 Popularity 0.988107 (9) -15 12 September 2018

https://www.peterbe.com/plog/a-darn-good-search-filter-function-in-javascript
Demo here. The demo uses React and a list of blog post titles that get…
…less when a search term is entered. That the demo uses React isn't important…

Command-Enter to submit a form when focus is inside textarea with React (TypeScript) Score 15.350637 Popularity 0.383879 (23) -2 4 February 2022

https://www.peterbe.com/plog/command-enter-to-submit-form-focus-textarea-react
…implement that in React: const textareaElement = textareaRef.current; useEffect…

Inline scripts in create-react-app 2.0 and CSP hashes Score 15.275913 Popularity 0.762940 (13) -13 5 October 2018

https://www.peterbe.com/plog/inline-scripts-in-create-react-app-2.0-and-csp-nonces
UPDATE (1) My understanding of how to generate the CSP nonces was wrong. What I initially posted was...

Docker gotcha with building a Dockerfile in sub directory Score 14.869226 Popularity 1.150331 (7) -20 2 March 2018

https://www.peterbe.com/plog/docker-gotcha-with-building-a-dockerfile-in-sub-directory
…believe this project used to do some of the Python stuff with Docker and the React web…

When Docker is too slow, use your host Score 13.995845 Popularity 0.755295 (14) -14 11 January 2018

https://www.peterbe.com/plog/when-docker-is-too-slow-use-your-host
I have a side-project that is basically a React frontend, a Django API server…
…and a Node universal React renderer. The killer feature is its Elasticsearch…

Fastest Python function to slugify a string Score 13.431499 Popularity 0.924214 (10) -19 12 September 2019

https://www.peterbe.com/plog/fastest-python-function-to-slugify-a-string
…help but to react to the fact that it's a list and it's looped over every…

React.memo instead of React.PureComponent Score 13.018926 Popularity 0.688659 (17) -13 2 November 2018

https://www.peterbe.com/plog/memo-instead-of-purecomponent
React Hooks isn't here yet but when it comes I'll be all over that, replacing…
…many of my classes with functions. However, as of React 16.6 there's this awesome…

Comment on How to create-react-app with Docker  2 January 2019

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#c9aae9f
…once you won't need `create-react-app` installed. Right? So you don't need…
…container run -it react:app bash$ npm add create-react-app$ create-react

Comment on How to "onchange" in ReactJS  9 September 2016

https://www.peterbe.com/plog/onchange-in-reactjs#c1fdae9
No, that's because React now binding it by itself. So You don't need to use…
…for example you need to type .bind(null, param1, param2). Just read the updated documentation of React.

Comment on How to create-react-app with Docker  10 May 2018

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#c2ef38f
…`create-react-app` locally before creating the Dockerfile? This means…
…that creating new applications requires the correct version of NPM and create-react-app locally before developing it in docker.

Comment on 10 Reasons I Love create-react-app  7 January 2017

https://www.peterbe.com/plog/10-reasons-i-love-create-react-app#ce05676
…://github.com/facebookincubator/create-react-app/blob/master…
…/packages/react-scripts/template/README.md#post-processing-cssI would be nice…

Comment on An example of using Immer to handle nested objects in React state  13 June 2019

https://www.peterbe.com/plog/using-immer-to-handle-nested-objects-in-react-state#c40bca0
…://github.com/avkonst/react-use-state-x and 2 hooks: useMap and useList from…
react-use package. Disclaimer: I am an author of the first lib.

Comment on 10 Reasons I Love create-react-app  11 January 2017

https://www.peterbe.com/plog/10-reasons-i-love-create-react-app#cd2180b
… I've started using this with react, and have never looked back.

Comment on How to "onchange" in ReactJS  7 June 2016

https://www.peterbe.com/plog/onchange-in-reactjs#ce392c8
Good write-up. You can clean up the code even more by removing `.bind(this)`: `this` always refers to the React component here.

Comment on 10 Reasons I Love create-react-app  7 January 2017

https://www.peterbe.com/plog/10-reasons-i-love-create-react-app#cf8585c
Nice list! However, I disagree that #6 is a reason to love create-react-app. I wish it were easier to opt into using Sass.

Comment on How to create-react-app with Docker  18 February 2018

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#c2b4cdc
…"services:  react:    build…
…:      context: menumy-react

Comment on How to "onchange" in ReactJS  23 October 2016

https://www.peterbe.com/plog/onchange-in-reactjs#cce1b66
…://toddmotto.com/react-create-class-versus-component/…

Comment on Find song by lyrics  27 March 2020

https://www.peterbe.com/plog/blogitem-040601-1#cd1caab
…remember go “and she said, step back I’m about to attack, strap on your goggles and get ready to react.”…

Comment on How to create-react-app with Docker  11 February 2018

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#c044d43
…by environment variable is another fun feature provided by create-react-app.

Comment on How to throttle AND debounce an autocomplete input in React  31 March 2020

https://www.peterbe.com/plog/how-to-throttle-and-debounce-an-autocomplete-input-in-react#c2fc529
…underscore, rxjs, react-debounce-input and what have we. It works as expected…
…of react-select for fetching results from my backend API on nextelection.com.

Comment on My site's now NextJS - And I (almost) regret it already  30 January 2022

https://www.peterbe.com/plog/my-sites-now-nextjs#c465262
I never understand the logic behind NextJS. The whole point of React

Comment on How to create-react-app with Docker  17 February 2018

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#c0057a7
…and the create-react-app DEV server with one command"Thanks again…

Comment on How to create-react-app with Docker  2 March 2019

https://www.peterbe.com/plog/how-to-create-react-app-with-docker#cfebb3d
By executing create-react-app outside docker that's missing the point…

Search Term Debugging

Search TermSearch Term ScoreTitle BoostText Boost
react1.12.21.1