140 Matching Annotations
  1. Last 7 days
    1. Using the array index as a key is problematic when trying to re-order a list’s items or inserting/removing list items. Explicitly passing key={i} silences the warning but has the same problems as array indices and is not recommended in most cases

      !

    2. Avoiding direct data mutation lets us keep previous versions of the game’s history intact, and reuse them later

      one need/reasoning why data immutability is good/useful

    3. Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div')

      This is a key point. Its not mandatory to use JSX. One can use React.createElement() instead...

  2. Mar 2019
  3. Jan 2019
  4. Dec 2018
  5. Nov 2018
  6. Oct 2018
    1. React is fast, thanks to the VirtualDOM. Using a diffing algorithm, the browser DOM nodes are manipulated only when there is a state change. This algorithm is computationally expensive. Using webworkers to perform the calculations can make React even faster.
  7. Sep 2018
  8. Sep 2017
  9. Jun 2017
    1. If you access through http://localhost:8080/webpack-dev-server/, WDS provides status information at the top. If your application relies on WebSockets and you use WDS proxying, you need to use this particular url as otherwise WDS logic interferes.

      IMPORTANT CAVEAT - If using Websockets and WDS proxying take note!

    2. HMR allows patching the browser state without a full refresh making it particularly handy with libraries like React where a refresh blows away the application state. The Hot Module Replacement appendix covers the feature in detail.

      Why you should prefer hot module replacement in a React development context: a full refresh, the kind your standard webpack-dev-server defaults to, will obliterate application state in React!

  10. May 2017
    1. <Route path="/" component={ List } /> <Route path="/react" component={ Detail } />

      Note, in newer versions of the router, this won't work because a route can only contain one child. Try wrapping the two routes in a <switch>:</switch>

        <Switch>
          <Route exact path="/" component={ List } />
          <Route path="/react" component={Detail}  />
        </Switch>
      
    1. const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })

      In recent versions, useRouterHistory() throws an error. Assuming you imported createHashHistory as follows:

      import { createHashHistory } from 'history';
      

      Try this:

      const appHistory = createHashHistory()
      
    2. <Router> <Route path="/" component={ Detail } /> </Router>,

      In newer versions of React, this won't work without a history prop and hashHistory. Depending on how you import hashHistory, the code will look something like this:

      let hashHistory = createHashHistory();
      
      <Router history={hashHistory}>
          <Route path="/" component={ Detail } />
      </Router>,
      
    1. var webpack = require('webpack');

      Note you should also add:

      const path = require('path'); 
      

      See following comments for rationale.

    2. path: 'dist'

      Again, this will throw errors. The solution utilises 'path' (see comment above). The code should look like this in new versions of webpack:

      path: path.resolve(__dirname, 'dist')
      
    3. loader: 'react-hot!babel'

      In newer versions of Webpack, this is disallowed. It should be:

      loader: 'react-hot-loader!babel-loader'
      
  11. Dec 2016
    1. SX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

      JSX

  12. Apr 2016
  13. Mar 2016
  14. Feb 2016
  15. Jan 2016
    1. A detailed overview of ECMAScript 6 features.

      React ES5 to ES6

    1. Useful set of benchmarks based on the DBMonster demo for a set of different frameworks - looking at various axes such as GC collection, layout and paint times.

      There are some notable caveats in the comments though that the subjective feel was not always reflected in the metrics, suggesting that the authors believe they have not found the optimal set of metrics that reflect user-perceived performance.

    1. UI components for ElasticsearchThe easiest way to build a great search experience with Elasticsearch.

      UI components for Elasticsearch