Livecoding: A choropleth in React.js

#Livecoding: A #choropleth in #Reactjs   by @dzone

  • You’re looking at a choropleth map of median household incomes in the United States that I built with React and D3v4.
  • Buffalo County in South Dakota is the poorest county in the US with a median household income of $21,658.
  • More about that later when we compare this median household data to that dataset of salaries in the software industry.
  • After loading our datasets – a TopoJSON of US counties and states (geo info) and a table of median household incomes per county – we start with a component.
  • It looks like this:

    With some setup and a bit of data loading, those two components create a choropleth map of median household incomes in the United States.

In this tutorial, you’ll learn how to normalize datasets in React.js, by creating a choropleth map of US counties, organized by median income. Read on for more!
Continue reading “Livecoding: A choropleth in React.js”

7 tips of using MobX – Huiseoul Engineering

7 tips of using MobX  #javascript #react #mobx #reactjs

  • These are the very basic building blocks of MobX:observable: is the data that you are expecting to changeobserver: is a component that you want to be re-rendered depending on the observable datacomputed values: are functions returning values based on calculation of observable valuesreactions: many different types of functions that can be executed based on observable values2.
  • In large applications this might cause confusion and make it hard to track down where the data are being changed.Strict mode will give you peace of mindSo MobX provides a strict mode where you can only change your data inside of functions marked as actions can change observable values.In strict mode, only action functions can change observable values5.
  • MobX document suggests:one store for app-wide UImultiple stores for each domainStore states in storesIt means that you might want to have UiStore or AppStore for your app-wide, UI data, and other domain stores for each of your domain like UserStore, ProductStore, BrandStore, etc.7.
  • Having MobX, and introducing new concepts and using separated stores might get your app overly-complicated otherwise simple react components talking to each other.So if you start from scratch you might try to solve the problem of state management without MobX first then start to use it if you see the clear benefit for all of your colleagues.Even after introducing MobX in your app, consider using local states for simple view-only states like isLoading or isDisabled.
  • It might be better solution than MobX if you are working with explicitly time-based data among other situations.Redux is a predictable state container for JavaScript appsHappy coding!

MobX is a convenient tool that you can use in React projects to manage states across components. Here are 7 tips we have learned along the way we have built our app at Huiseoul using MobX for our…
Continue reading “7 tips of using MobX – Huiseoul Engineering”

Resize local images with React Native

  • You can use an image from the camera roll or a base64 encoded image.
  • For example, base64 support for images or updates to support latest React Native versions were done by the community.
  • To resize local image files, we created react-native-image-resizer .
  • Our package helps you with this situation by allowing image resizing directly from React Native.
  • Whenever your app requires the user to take a picture with the camera , or from the camera roll, the image is so heavy that it takes ages to upload it on the server.

Rescale local image files in your React Native app, to reduce their size and upload them to a server.
Continue reading “Resize local images with React Native”