Express more tests via public API · Issue #11299 · facebook/react · GitHub

  • Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
  • Already on GitHub?
  • Sign in to your account

react – A declarative, efficient, and flexible JavaScript library for building user interfaces.
Continue reading “Express more tests via public API · Issue #11299 · facebook/react · GitHub”

Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox #ReactJS

  • No more , , , , or any other arbitrarily named and spec ed components to layout your apps.
  • No more , , , or any other arbitrarily named and spec ed props to layout your apps.
  • It might be a good idea to see your components and know how they are laid out without jumping between css files or arbitrary, layout-exclusive components specifications.
  • Since, well, flexbox is a complete solution to build layouts.
  • If you need to use a tag other than for the layout, like or , you can pass an extra prop to the component:

    which will render to this:

    Take a look at Flexbox PropTypes.

flexbox-react – Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox.
Continue reading “Unopinionated, standard compliant flexbox component. No propietary APIs. Nothing but flexbox #ReactJS”

Optimizing React Rendering (Part 1) – Flexport Engineering

Optimizing React Rendering (Part 1)  #Reactjs #Javascript #Webdev

  • PureComponent does a shallow object comparison on the props, and since you are passing in the same object reference, shouldComponentUpdate will return false and the updated data will not be rendered.This means that if any part of your app mutates data that needs to be rendered, PureComponent puts you at risk of displaying stale data.
  • This is by far the biggest blocker because it results in incorrect UI behavior, and it is outside the control of your component.Fix: Never mutate values used as React props or state.
  • Even if some ancestor component triggers a re-render, PureParent will not re-render because neither its state or props has changed.This gotcha also leads to incorrect UI behavior, but the issue is scoped to the component itself, making it easy to fix.Fix: Extract data dependency into state or props, and update state or props when the data changes.Object copyingQ: What happens when Parent is re-rendered with an unchanged props.dataList?A: PureChild is re-rendered wastefully because filter returns a new object, which tricks PureChild into thinking that the prop has changed.This problem is triggered by calling any function that creates a new object or using an inline object literal in render.Fix: Cache your derived data calculations.
  • A: PureChild is re-rendered wastefully because arrow functions and Function.prototype.bind return new function instances, which tricks PureChild into thinking that the onClick handler has changed.Fix: Don’t use arrow functions and bind in render.
  • When those props change, PureChild will re-render wastefully.Fix: Unless you’re writing some sort of higher-order-component, don’t be lazy and be explicit about the props that you are passing.ConclusionTurns out our app is littered with every single one of these gotchas, and is especially dependent on mutation side-effects.

We migrated our web app to React almost 3 years ago, and since React performs extremely well out of the box, optimizing performance was not something we had to worry about. However, as our…
Continue reading “Optimizing React Rendering (Part 1) – Flexport Engineering”

React Native’s new FlatList component – Hacker Noon

React Native’s new FlatList component explained:

  • React Native’s new FlatList componentIncluding: How to migrate from ListView (soon to be deprecated), and how to try it in your own app without building React Native from source.The demo video posted on Facebook by Ahrens.
  • Everything below is still up-to-date and accurate.Update: There are now multiple new components: FlatList, SectionList, VirtualizedList, and VirtualizedSectionList.
  • Update: The original ListView is planned to be deprecated.Earlier in February, Spencer Ahrens published an experimental new React Native component called FlatList.
  • Copy this whole command into your terminal:This will download the latest version of FlatList and its related dependencies into your app’s node_modules so you can refer to it as in the examples above, without needing to checkout React Native’s master and build it from source.You could, for example, add the above command to your package’s postinstall script to make sure the files exist for every developer and build pipeline on your team (thanks to Bruno Lemos for this tip).
  • There’s a more extensive FlatListExample in React Native’s repo if you want to get a feel for the full set of props and how powerful the new component can be.

Including: How to migrate from ListView (soon to be deprecated), and how to try it in your own app without building React Native from source.
Continue reading “React Native’s new FlatList component – Hacker Noon”

cans: A framework for building React MobX application

cans: A framework for building #ReactJS #MobX application:  #JavaScript

  • cans: A framework for building React MobX applicationI’ve used MobX for a long time.
  • Every UI component can write as a function of state ((state) = UI), which let you test the UI more easy, just pass different state and expect the return value.Using MobX and React means you get all of it.
  • And then my framework cans came out.What is canscans is a framework for building React MobX application.
  • Note that you can also pass a high order function that return a observable.app.model({ namespace: ‘counter’, observable: app = observable({ /** … **/ })})In this case, you are able to access the app instance, in order to access other models or plugins.viewThe way to react the React component is using mobx-react.
  • The different part is it will be bind in app.plugins, and return not only observable in observable key:ConclusionThe main idea of cans is always to organize your stores.

I’ve used MobX for a long time. It is awesome when I just want a simple state manager for my React application. I always think about how to organize my React MobX application. Because MobX is too…
Continue reading “cans: A framework for building React MobX application”