Latest Posts
This article shows the steps to create a minimal Expo project. The project uses TypeScript and Jest. Note that this procedure is based on Expo SDK31 and may be invalid in the future.
Install Expo CLI As described in the official doc, let’s install the CLI tool.
$ npm install -g expo-cli Note: I prefer using npx and I use npx in my project, but expo-cli depends on @expo/dev-tools which depends on old graphql.
... Read More
React Hooks Tutorial on Developing a Custom Hook for Data Fetching
29 November 2018
Introduction React Hooks are a new feature coming in React 16.7. It allows us to write stateful function components that were impossible before without class components. The official docs are must-read, so check them out if you haven’t.
https://reactjs.org/docs/hooks-intro.html
Besides stateful function components, this new feature allow us to build a custom hook to share logic between components. This has been possible with High-order Components (HoCs), and although there’s technically no difference what hooks can achieve, hooks simplify it a lot and reduce so called “wrapper hell”.
... Read More
A deadly simple React bindings library for Redux with Hooks API
16 November 2018
There is a follow-up article which describes the implementation details of this library. Please visit here.
Redux is one of the popular libraries for React. Although Redux itself is not tied to React, it’s often used with the official bindings react-redux that allows to connect Redux state to any React components.
In this article, we propose another bindings library to combine React and Redux. This library tries to be simple and easy for beginners.
... Read More
React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state
9 November 2018
In this article, I will first explain minimal code to implement global state with useReducer and useContext which are called “hooks” that will be available in React 16.7. I will then compare it with react-hooks-global-state which is a tiny library that I’ve been developing for global state management primarily for small applications.
Note: Global state is convenient for sharing values among components far apart in the component tree, but it shouldn’t be abused because it would limit the reusability.
... Read More
React global state by Context API for TypeScript
8 November 2018
Note: this post has nothing to do with React Hooks API.
In my previous post, I introduced a library called react-context-global-state. After a while, I have better knowlege of TypeScript (yes, I’m a beginner!), and come up with fairly good type definitions. I just released a new version.
https://www.npmjs.com/package/react-context-global-state
Example code in TypeScript Let me breifly show how the code looks like in TypeScript.
In a file named state.ts, we define a global state and export function components.
... Read More
The library I’ve been developing a library to make use of React Hooks API. The library is for global state mangement with the aim to use it instead of Redux, especially for smaller applications. See the repository for more information and the source code.
https://github.com/dai-shi/react-hooks-global-state
Please also check out my previous posts [1] [2].
Support for Redux middleware Originally, the library was extending useState for global state. Later, reducer is supported.
... Read More
An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)
4 November 2018
Motivation Everyone is excited about the new React Hooks API. So am I. Having been thinking how to manage global state, the Hooks API seems promising. By the way, I like Redux a lot, but I don’t like react-redux a.k.a connect very much. It is too complicated for beginners to use it properly. For example, reselect / memoization is a hard concept to explain. My recommendation is to structure a global state so that mapStateToProps only needs to select a part of the state without any logic.
... Read More
TypeScript-aware React hooks for global state
28 October 2018
React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop “custom hooks” to add a new functionality. Although it’s not released yet, I would like to introduce a new library to support global state. Note that it’s still an experiment.
The library It’s called “react-hooks-global-state” and is available in npm. Please also checkout the GitHub repository.
https://github.com/dai-shi/react-hooks-global-state
... Read More
Motivation Have you heard of React Native, GraphQL and TypeScript? I’m looking for a easy and nice tech stack to develop mobile apps. These three may fit nicely for developing mobile apps for beginners up to intermediates. More precisely, Expo is chosen for building React Native development environment, and React Apollo is for GraphQL. These libraries comes with type annotations, which allow us to code in TypeScript. By “Clean” I mean not only the boilerplate is minimalistic, but also we don’t allow “any” types.
... Read More
React global state by Context API
5 October 2018
I had been trying to find a way to use React without using class. Redux is one solution to achieve this. Although I love the idea of writing everthing in pure functions, Redux is sometimes not suitable for small apps. React v16.3 introduced new Context API officially. Since then, several ideas were proposed to use it for managing global state. So far, I wasn’t able to find something I really liked, hence I made a new one.
... Read More