DEV Community: Renato Rocha

Introduction to React Native Animations

Renato Rocha — Sat, 23 May 2020 03:46:55 +0000

According to statista, today, the number of smartphone users surpasses the number of three billions. So in the last years, we have seen an increasing number of applications for mobile devices being developed.

This application can be seen in many areas, like: music (Spotify), travel (Tripadvisor, Uber) and social network (Facebook, Instagram). When we are using some of this apps or another one, our experience improves as the application provides smoother transitions and interactions.

Thus in this post we will see an introduction of how to uses the React Native Animation library for improves the user experience in application and we will uses the Nubank interface as example.

Animation library basics

The React Native Animated library provide us two types of values tha we can use to animate our components:

Animated.Value
Animated.ValueXY

Since we have one of this values or both, we can trigger them with our component and use some function, provided by React Native, to drive the animation:

Animated.spring() -> provides a basic spring physics model.
Animated.timing() -> animates a value over time.

Example:

const value = new Animated.Value(0);

Animated.spring(value, {
  toValue: 0,
  speed: 5,
}).start();

Animated.timing(value, {
  toValue: 300,
  duration: 500,
}).start();

In the rest of this post we will use this Animated values and functions to animate our app example.

Horizontal animation

As we can see, when the app initialise, the first animation that occur is a horizontal moving of card and bottom buttons. Bellow we have the code and image app without any animation:

So our first step will be create a horizontal animation for the card and bottom buttons after the app has ben initialized.

React Native provide us some animatable components and only this can be animated. So to animate bottom buttons we need change the View that wrapper the BottomButtons Component by an Animated.View:

<View>
  <BottomButtons />
</View>;

to;

import {Animated} from 'react-native';
<Animated.View>
  <BottomButtons />
</Animated.View>;

and we need create a Animated Value that will be used toghether the Animated Component previously created:

import React, {useRef, useEffect} from 'react';
import {Dimensions, Animated} from 'react-native';

const {width} = Dimensions.get('screen');
const bottomButtonsAnimated = useRef(new Animated.Value(-width)).current;

<Animated.View
  style={{
    right: bottomButtonsAnimated,
  }}>
  <BottomButtons />
</Animated.View>;

In the above code we get the screen width to initialy put our bottom buttons component outside the screen and after animate it go back to screen. We also saw the useRef, whitout it every rerender will reset the bottomButtonsAnimated to the initial value.

So at this time we have an Animated Value (bottomButtonsAnimated) to be used with the <Animated.View /> that wrapper the <BottomButtons /> component. However we still need animate this value and it can be do using Animated.spring():

useEffect(() => {
  Animated.spring(bottomButtonsAnimated, {
    toValue: 0,
    speed: 5,
  }).start();
}, []);

When the Animated.spring initialise it will increment the bottomButtonsAnimated from -width to zero. As the <Card /> component has the same animation, we can use the bottomButtonsAnimated to animate it also:

<Card horizontalShift={bottomButtonsAnimated} />

and we will get the first animations:

Vertical animation

Now, as the first gif, our aim is create the vertical animations and for it we will use the PanResponder, once the PanResponder works with Animated API to build gestures in the UI.

The PanResponder provide us a create methodthat accept as parameter an config object with all responder callbacks. Each one callback receive as parameter a native event:

  changedTouches: Array of all touch events that have changed since the last event
  identifier: The ID of the touch
  locationX: The X position of the touch, relative to the element
  locationY: The Y position of the touch, relative to the element
  pageX: The X position of the touch, relative to the root element
  pageY: The Y position of the touch, relative to the root element
  target: The node id of the element receiving the touch event
  timestamp: A time identifier for the touch, useful for velocity calculation
  touches: Array of all current touches on the screen

and gestureState object:

  stateID: ID of the gestureState, persisted as long as there at least one touch on screen
  moveX: the latest screen coordinates of the recently-moved touch
  moveY: the latest screen coordinates of the recently-moved touch
  x0: the screen coordinates of the responder grant
  y0: the screen coordinates of the responder grant
  dx: accumulated distance of the gesture since the touch started
  dy: accumulated distance of the gesture since the touch started
  vx: current velocity of the gesture
  vy: current velocity of the gesture
  numberActiveTouches - Number of touches currently on screen

With the above information, as the first step, we must create a Animated Value to vertical moving:

const cardAnimatedValueY = useRef(new Animated.Value(0)).current;

and pass this value as parameter to Card component:

<Card
  horizontalShift={bottomButtonsAnimated}
  verticalShift={cardAnimatedValueY}
/>

Once we have the Animated Value to vertical moving, we can use the PanResponder to recognize the gestures:

import {StatusBar, Dimensions, Animated, PanResponder} from 'react-native';

const panResponder = React.useRef(
  PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
    onPanResponderGrant: (evt, gestureState) => {},

    onPanResponderMove: (evt, gestureState) => {
      cardAnimatedValueY.setValue(gestureState.dy);
    },

    onPanResponderTerminationRequest: (evt, gestureState) => true,
    onPanResponderRelease: (evt, gestureState) => {},
    onPanResponderTerminate: (evt, gestureState) => {},
    onShouldBlockNativeResponder: (evt, gestureState) => true,
  }),
).current;

In the above code we use the onPanResponderMove to set the cardAnimatedValueY and we need to pass the PanResponder callbacks to Card component:

<Card
  horizontalShift={bottomButtonsAnimated}
  verticalShift={cardAnimatedValueY}
  {...panResponder.panHandlers}
/>

and internally the card component handles the parameters:

<WrapperSwiper
  style={{
    right: horizontalShift,
    transform: [{translateY: verticalShift}],
  }}
  {...rest}>
  {renderCard()}
</WrapperSwiper>

where the WrapperSwiper is a Animated.View.

The above gif demonstrates the results for vertical the moving, however we still have two issues with it gif:

1 - The opacity related to another components;
2 - When we release the card and touch it again the card position became to the initial.

Components opacity

When we slide the card, we need change the opacity from another components. So that the menu options under the card need initialise with zero opacity and growth to one as the card slide down. We need also that the <BottomButtons /> opacity initialise with one opacity and go to zero as the card slide down.

At this point we have creating our animations applying changes to animated variables cardAnimatedValueY straightly. However we can obtain another animated values as our animated variables cardAnimatedValueY changes, example:

cardAnimatedValueY	Result
0	0
1	0.1
2	0.2
...	...
415	1

So to do that and use the result with the opacity of our components we will use the AnimatedVariable.interpolate function. It will receive as parameter a configuration object:

{
    inputRange: number[];
    outputRange: string[] | number[];
    extrapolate?: ExtrapolateType;
}

Thus this function will map the inputRange to outputRange and we can use extrapolate property to inform what action to take if the inputRange extrapolate the range. In our case we alway want a opacity value between 0 and 1, so we will "clamp" the outputRange in case the extrapolete inputRange occurring.

Now we can make our opacity animations:

import {Dimensions} from 'react-native';

const {width, height} = Dimensions.get('screen');
const MAX_SLIDE = Math.floor(height * 0.623);
const MIDDLE_SLIDE = Math.floor(height * 0.33);

const opacity = cardAnimatedValueY.interpolate({
  inputRange: [0, MIDDLE_SLIDE, MAX_SLIDE],
  outputRange: [0, 0.3, 1],
  extrapolate: 'clamp',
});

const opacityBottomButtons = cardAnimatedValueY.interpolate({
  inputRange: [0, MIDDLE_SLIDE, MAX_SLIDE],
  outputRange: [1, 0.6, 0],
  extrapolate: 'clamp',
});

the MAX_SLIDE value is the distance from the inital card component position to under the button SAIR DA CONTA.
Now we will be apply the opacity variable to:

<Menu opacity={opacity} />
<Logout opacity={opacity} />

and the opacityBottomButtons to:

<BottomButtons opacity={opacityBottomButtons} />

Fix card position after release and touch again

If we put a console.log statement inside the onPanResponderMove method and print the gestureState.dy value, we can see that the variable that contain the vertical displacement became zero always that we release the card and touch again.

So to solve this we need save the last gestureState.dy value to maintain the card position. To do it, we create a variable that will accumulate vertical displacement on each release inside onPanResponderRelease method that will be executed after the touch release.

export default function App() {
  let offSet = 0;

  const panResponder = React.useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
      },

      onPanResponderMove: (evt, gestureState) => {
        cardAnimatedValueY.setValue(gestureState.dy);
      },

      onPanResponderTerminationRequest: (evt, gestureState) => true,

      onPanResponderRelease: (evt, gestureState) => {
        offSet += gestureState.dy;
        cardAnimatedValueY.setOffset(offSet);
      },

      onPanResponderTerminate: (evt, gestureState) => {},
      onShouldBlockNativeResponder: (evt, gestureState) => true,
    }),
  ).current;

Auto vertical displacement

At the post begin we saw a gif in which when we touch the card, move it move until certain point and release the card, it auto displacement to bottom or top. So our last step will be create this behavior.

As we saw, the method that catch the event related to release the touch is: onPanResponderRelease. Thus we will change this method to make our feature.

export default function App() {
  let offSet = 0;
  let down = true;

  const panResponder = React.useRef(
    PanResponder.create({
      .
      .
      .

      onPanResponderRelease: (evt, gestureState) => {
        offSet += gestureState.dy;
        cardAnimatedValueY.setOffset(offSet);

        const restOffSet = 415 - offSet;

        if (down && offSet >= 100) {
          Animated.timing(cardAnimatedValueY, {
            toValue: restOffSet,
            duration: 500,
          }).start(() => {
            cardAnimatedValueY.setOffset(415);
            cardAnimatedValueY.setValue(0);
            offSet = 415;
            down = !down;
          });
        }
      },

      .
      .
      .
    }),
  ).current;

In the above code snippet we add the down variable that will contain the direction that the card will be take. The restOffSet represents the units that the card can slide to the bottom. So if the direction is down and the card offset is bigger than or equal to 100 units, the card will slide restOffSet.

Now what we need is make the reverse path, to the top:

export default function App() {
  let offSet = 0;
  let down = true;

  const panResponder = React.useRef(
    PanResponder.create({
      .
      .
      .

      onPanResponderRelease: (evt, gestureState) => {
        offSet += gestureState.dy;
        cardAnimatedValueY.setOffset(offSet);

        const restOffSet = 415 - offSet;

        if (down && offSet >= 100) {
          Animated.timing(cardAnimatedValueY, {
            toValue: restOffSet,
            duration: 500,
          }).start(() => {
            cardAnimatedValueY.setOffset(415);
            cardAnimatedValueY.setValue(0);
            offSet = 415;
            down = !down;
          });
        } else if (!down && offSet <= 355) {
          Animated.timing(cardAnimatedValueY, {
            toValue: restOffSet - MAX_SLIDE,
            duration: 500,
          }).start(() => {
            cardAnimatedValueY.setOffset(0);
            cardAnimatedValueY.setValue(0);
            offSet = 0;
            down = !down;
          });
        }
      },

      .
      .
      .
    }),
  ).current;

The else clausule define the reverse path to the top.

This post was a little introduction about React Native Animated and we saw how tp apply some animations in an app. However we can explorer another libraries that improve the animations performance running on UI thread without having to go through the bridge on every frame: React Native Reanimated and React Native Gesture Handler.

Source code

JavaScript Generator Functions

Renato Rocha — Sun, 29 Mar 2020 03:27:00 +0000

When starting the studying about React, we need learning some concepts like: components, properties and state. So, we see that a component has a internaly state and when that state change the component is rerendered. However some times we need share some information between our components, like user information or a shoopping cart and, for that we can use a manager state like Redux.

Redux is a state container for JavaScript apps, that to lead with assyncrounous operations needs a middleware, Like Redux Thank or Redux Sagas as example.

In the Redux Sagas getting start we can see an example of a saga:

export function* helloSaga() {
  console.log("Hello Sagas!");
}

As a documentation say: the only thing that can be weird is *. This symbol is a way we can creating a Generator.

Generator

Generators are functions that their processing can be stoped and resumed. When we create and execute a generator function, that do not work as a normmal function. The normal, when executed can return a single value or nothing.

function normalFunction() {
  return singleValue;
}

However when we call a generator function we will receive an object that can be used to control the process.

function* generateFunction() {
  yield "first";
  yield "second";
  return "third";
}

const objectGeneratorControl = generateFunction();

The object to control the generator processes has a method called next, this method when called initialize the generator flow:

function* generateFunction() { /* (INIT) Call of generateFunction() */
  console.log("First next() call");  
  yield "first"; /* (1) First call objectGeneratorControl.next() */
  yield "second"; /* (2) Sencond call objectGeneratorControl.next() */
}

const objectGeneratorControl = generateFunction(); /* Generator creating*/

console.log(objectGeneratorControl.next());
console.log(objectGeneratorControl.next());
console.log(objectGeneratorControl.next());

In the initial moment, when we call generateFunction(), the generator flow is initialized and a pointer is stoped at top (INIT mark). Thus, the console.log("First next() call") is not executed yet.

The console.log inside the generator function will be executed when we call for the first time the next method. So, the execution will runs until the "first" yield and return an object with the shape:

{
  "value": "first",
  "done": false
}

In this object, the property value, represents the yielded value and the done property say that the function not yet finished. Calling the next method again, it will produce:

{
  "value": "second",
  "done": false
}

However, whether we call next method again the result will be:

{
  "value": undefined,
  "done": true
}

This object tells us that the function has come to the end and without any value. However, we can specify a value by include a return statement:

function* generateFunction() {
  yield "first";
  yield "second";
  return "end";
}

Generator as Iterables

Iterables objects, in JavaScript, are objects that have a next() method returning an object like:

{
  "value": any
  "done": boolean
}

We can iterate over this objects easily using the for ... of statement, as an example we have that arrays are iterables.

const it = [1, 2, 3, 4, 5];

for (const iterator of it) {
  console.log(iterator);
}

So when we need iterate over a object, its iterator method is called, however only some built-in objects have the iterator method. Thus, if we need iterate over an object that do not has the iterator method, we can add it easily with generator.

const object = {
  begin: 1,
  end: 5,

  [Symbol.iterator]: function*() {
    for (; this.begin <= this.end; this.begin++) {
      yield this.begin;
    }
  }
};

for (const iterator of object) {
  console.log(iterator);
}

Generator as Data producer and consumer

As we see previously, a generator can produce values with the yield. However, for consume some data, this is made through the next method call. That is, it method accept a paramater wich will be the internal return of yield statement.

objectGeneratorControl.next("value");

However, the first call of next method will only "initialize" the generator flow. That is, this value passed to generator will be verified from the second next method calling.

function* generateFunction() {
  let valuePassedCameFromNextMethod;

  console.log(`First next method call:`);
  valuePassedCameFromNextMethod = yield "first";
  console.log(`Second next method call: ${valuePassedCameFromNextMethod}`);
  valuePassedCameFromNextMethod = yield "second";
  console.log(`Third next method call: ${valuePassedCameFromNextMethod}`);
  return "end";
}

const objectGeneratorControl = generateFunction();

console.log(objectGeneratorControl.next("Initializing"));

Executing the above code we will see the yielded object: { value: 'first', done: false }. But, the flow will stop at this point and thus the value passed to next method will be viewd inside the generator from the second call.

console.log(objectGeneratorControl.next("Now go"));

Will result:

Second next method call: Now go
{ value: 'second', done: false }

In this post, sought to carry out a little introduction about Generators that is a powerful tool to lead with multitasks due the possibilite of pause and resume the Generator. So, that feature gives the possibility of greater control of tasks, as we can see the reason of Redux Saga uses Generator.

Sources

https://github.com/gajus/gajus.com-blog/blob/master/posts/the-definitive-guide-to-the-javascript-generators/index.md
https://exploringjs.com/es6/ch_generators.html#sec_generators-as-observers
https://2ality.com/2015/03/es6-generators.html
https://javascript.info/generators
https://davidwalsh.name/es6-generators
https://github.com/redux-saga/redux-saga/issues/1373
https://github.com/redux-saga/redux-saga/issues/987#issuecomment-301039792
https://tc39.es/ecma262/#sec-generator-function-definitions

Redux setup in a fast way

Renato Rocha — Thu, 20 Feb 2020 17:12:53 +0000

When we begining the development of our applications initialy each component become with their own state, do not needing share any informatiom across the application. However, as our application gets bigger, some information can become required for more than one component, as an example, a shopping cart informations.

At this time, we can lay hands of Redux for managing the state of our application. Well, due to the freedom that the Redux gives us, some difficults are pointed:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"

So was proposed the Redux Toolkit to helping us our Redux code.

Redux Toolkit

At the time that we need configuring the Redux for managing the state of our application, we can using the Redux core library, that leaves us free to decide anything about that setup. This can be good, due the flexibility but, some times we want to a fast way to get start. Redux Toolkit is a opinionated toolset that make easier to write good Redux applications and speeds up development.

Slices

In a typical redux configuration we creating our reducers that are passed in to a combineReducers function and the return of combineReducers are used by createStore function.

createStore(rootReducer)

       ^
       |

const rootReducer = combineReducers({
  todo: todoReducer,
  other: () => ({}),
});

       ^
       |

export default function todoReducer(
  state = initialState,
  action: TodoActionsTypes
): TodoState {
  ...
}

When we access the application state in our view component,

  ...

export default function Home(): ReactElement {
  const data = useSelector((state: RootState) => state.todo.data);

  ...
}

and stay on top of the state we can see the object returned by combineReducers that representing the application state.

  CombinedState<{
    todo: TodoState;
    other: {};
    ...
  }>

So state.todo is a slice and todoReducer is a slice reducer that is used to update a slice (state.todo) of state.

Immutably

The Reducers that we creating are pure functions, that receiving a previous state and returns the next state. So one of their characteristics is the (immutability)[https://redux.js.org/basics/reducers/#handling-actions].

So when we creating our reducer, we can get something like:

export default function todoReducer(
  state = initialState,
  action: TodoActionsTypes
): TodoState {
  switch (action.type) {
    case CREATE_TODO_REQUEST:
      return {
        data: [...state.data, action.payload.todo]
      };

    ...

    default:
      return state;
  }
}

in that way we returns a new state and staying the immutability of state. however, some libraries, like immer, creating a temp state for us, so that, we can writing them in a more readable way. So the above code can be represented as:

export default function todoReducer(
  state = initialState,
  action: TodoActionsTypes
): TodoState {
  return produce(state, draft => {
    switch (action.type) {
        case CREATE_TODO_REQUEST:
          draft.data.push(action.payload.data);
          break;
        ...
    }
  });
  }
}

so draft.data.push(action.payload.data) is more friendly than [...state.data, action.payload.todo].

A great news is that, Redux Toolkit uses immer internally, what allows us "mutate" the state, updating it in a more clearly way.

Example

Now we have a little background with some aspects of Redux Toolkit we can implement a counter example using TypeScript and Redux Toolkit.

When we uses the Redux core library, to configure our store we have the flux:

createStore(rootReducer);

       ^
       |

const rootReducer = combineReducers({
  todo: todoReducer,
  other: () => ({}),
});

       ^
       |

export default function todoReducer(
  state = initialState,
  action: TodoActionsTypes
): TodoState {
  ...
}

Using the Redux Toolkit we changing the createStore() function by configureStore function and the Redux Toolkit provide your owne combineReducers() function.

When we creating our reducer, todoReducer, we use types that we define them in a separate file. As well as we define our actions creators in the same way, that is, in a separate file. However, will we use the createSlice() function from Redux toolkit that will generates a slice reducer with corresponding action creators and action types.

counterSlice

To use the createSlice() function we need to pass the following parameters: a set of reducer functions, a slice name, and an initial state value.

import { createSlice, PayloadAction } from "@reduxjs/toolkit";

export interface Integer {
  value: number;
}

const initialState: Integer = {
  value: 0
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment(state, action: PayloadAction<Integer>) {
      state.value = state.value + action.payload.value;
    }
  }
});

export const { increment } = counterSlice.actions;

export default counterSlice.reducer;

In the above code, createSlice() create for us, an action creator named increment, action types and a reducer. If we execute console.log(increment), we see that the action type has the format: "counter/increment" that is the same that "slice name/reducer name".

Now with our slice reducer created the Redux config flux result in:

import { configureStore } from '@reduxjs/toolkit'
configureStore({reducer: rootReducer});

       ^
       |

import { combineReducers } from '@reduxjs/toolkit'
const rootReducer = combineReducers({
  counter: counterReducer,
});

       ^
       |

import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state, action: PayloadAction<Integer>) {
      state.value = state.value + action.payload.value
    }
  }

})

export const {
  increment
} = counterSlice.actions

export default counterSlice.reducer

So we could saw a little bit how the Redux tool kit can facility redux configuration, save us from creating actions types, actions creators manually and helping us to manipulating the state in a more fashion way. However Redux toolkit has more special charactistichs like, Redux-thunk native integration. Thus for more details and more examples, we can see in Redux Toolkit offcial docs that was very well written.

Source code

Understanding the this keyword in JavaScript

Renato Rocha — Tue, 04 Feb 2020 16:56:15 +0000

When we are learning about handling events in React.JS, we found that to pass a function as a callback we need bind this function before using it:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this);
  }

  render() {
    return <button onClick={this.handleClick} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

when the button is clicked, we can see that, the this points to instance of the App Component.

But, what happens when we remove the bind line?

As we can see on the above image, the this became undefined. However, whether we put a console.log(this) on App's render method, we will see again, the this point to the App instance.

JavaScript function

In JavaScript environment we have a global object that is defined in a global context and the value associated to the this is defined according to the context of execution. Such that, if we inspect the this variable in a global context (outside of any function) its values will points to the global object.

As an example, in the browser, if we type this in the console, we get the window object as the associated value. In an another way, in Node CLI, we will get an object that will have all globally used function like console, process etc.

Function call

When we call a function, the internal method Call is executed, receiving as parameters: the this value and the list of function's arguments.

doSomeThing();

can be seen as

doSomeThing.call(thisValue, arguments);

When we call a function in a short way (doSomeThing();), we can not especify the thisValue. So, if the function is called in a global context, its value will be associated with the global object.

Thus, in our example with React Class, it turns out that, when we pass the handleClick function as a callback its execution context change and the this value became undefined.

Okay, but why was the this value undefined? This happen because when we run the React App, our class is transpiled and run on strict mode [1][2].

As an example lets see the this value of a function in strict mode and one not.

function doSomeThing() {
  console.log(this);
}

function doSomeThing() {
  "use strict";
  console.log(this);
}

As a solution to that, we can use Function.prototype.bind, as was done in the contructor method of the first example. But, the bind function can be implemented using closures.

function doSomeThing() {
  "use strict";
  console.log(this);
}

closured = function(thisValue) {
  return doSomeThing.call(thisValue);
};

So, in this post we saw briefly how the this keyword works in JavaScript, however, without a detailed approach of the Execution Context that contains the associated value to the this.

How to use React forwardRef

Renato Rocha — Thu, 30 Jan 2020 18:39:23 +0000

When we are creating a React application, some times, we need access properties of a Element created through jsx. As an example, a simple case where we want to set focus on a input text. In this case we can do that using the React hook useRef in a straight away.



import React, { useRef, useEffect } from "react";

function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
    console.log({ inputRef });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <input type="text" ref={inputRef} style={style} />
    </div>
  );
}

export default App;

The useRef hook returns an object that contains a reference to the corresponding DOM node whenever that node changes.

However, what if we are using a pretty cool Input Component from a third party and go along with the same way, using the useRef hook?



import React from "react";

const Input = () => <input type="text" style={style} />;

export default Input;



import React, { useRef, useEffect } from "react";
import Input from "./Input";

function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }

    console.log({ inputRef });

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div>
      <Input ref={inputRef} />
    </div>
  );
}

export default App;

So we will receive the warning message and also can see that the reference to Input Component is null:

In this case, the error was because the Input Component is a children of App component and the "ref" cannot pass from App Component to Input. On this case, we need to change the Input Component to use the forwardRef.



import React, { forwardRef } from "react";

const Input = (props, ref) => <input ref={ref} type="text" style={style} />;

export default forwardRef(Input);

And another example where we may need to use forwardRef is in conjunction with the High Order components.

React Redux with TypeScript

Renato Rocha — Tue, 28 Jan 2020 17:46:44 +0000

When we are writing a React Application and using React Redux to manage the application state we use a plain JavaScript. So its implies some difficulties, like: (i) code complete not available, that is, we do not have a suggestion about de code, parameters, properties and etc; (ii) static type checking is not working, making it impossible fast error detection and so on.

Install of dependencies

Thus the first step is configuring a React Project whit TypeScript. Now, we need install the React Redux dependencies:

yarn add redux react-redux

and the react-redux type definitions

yarn add @types/react-redux -D

State Types

To have the benefits of static type checking we need creating the types that will be used for state and actions creators.

Types definitions

/*  types.ts */

export interface Todo {
  id: number;
  description: string;
  checked: boolean;
}

export interface TodoState {
  data: Todo[];
}

export const CREATE_TODO_REQUEST = "@todo/CREATE_TODO_REQUEST";

interface CreateTodoRequest {
  type: typeof CREATE_TODO_REQUEST;
  payload: { todo: Todo };
}

export type TodoActionsTypes = CreateTodoRequest;

Now that we have a interface defining how must be the format of our action, we can create it.

/* actions.ts */
import { TodoActionsTypes, Todo, CREATE_TODO_REQUEST } from "./types";

export function createTodo(todo: Todo): TodoActionsTypes {
  return {
    type: CREATE_TODO_REQUEST,
    payload: { todo }
  };
}

In next step we will creating a Reducer to manage the state and export the combineReducers together with the RootState type.

/* reducer.ts */

import { TodoState, TodoActionsTypes, CREATE_TODO_REQUEST } from "./types";

const initialState: TodoState = {
  data: []
};

export default function todoReducer(
  state = initialState,
  action: TodoActionsTypes
): TodoState {
  switch (action.type) {
    case CREATE_TODO_REQUEST:
      return {
        data: [...state.data, action.payload.todo]
      };

    default:
      return state;
  }
}

/* combineReducers.ts */

import { combineReducers } from "redux";
import todoReducer from "./todo_list/reducer";

const rootReducer = combineReducers({
  todo: todoReducer
});

export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

Access the state and dispatch action in a view

To access the state we can use the useSelector hook passing to it the RootState type so that we can saw our state structure

import { useSelector } from "react-redux";
import { RootState } from "../../store/modules/combineReducers";

const data = useSelector((state: RootState) => state.todo.data);

and using the useDispatch hook to fire our action.

import { useDispatch } from "react-redux";

import { createTodo } from "../../store/modules/todo_list/actions";

const dispatch = useDispatch();

dispatch(
  createTodo({
    id: lastId(),
    description,
    checked: false
  })
);

In this quick post, using some code snippets, we saw a way to improve our code using TypeScript to static typing verifying of state on React Redux.

source code

Flux, Redux and React Redux overview

Renato Rocha — Mon, 20 Jan 2020 13:39:23 +0000

Flux

Flux pattern was proposed by Facebook for building client-side web applications. This pattern, according to Facebook, is divided in parts: dispatcher, stores, and the views.

The Flux documentation warns that this pattern do not be confused with MVC once controllers do exist in a Flux application, but they are controller-views.

Flux vs MVC

Flux pattern has a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected.

Dispatcher

In application all data flow through the dispatcher that manages it. It is a simple mechanism for distributing the actions to the stores. Each store registers itself and provides a callback. When an action is dispatcher, all registered stores receive the action.

Stores

Stores contain the application state and logic. Registers itself with the dispatcher and provides it with a callback. This callback receives the action as a parameter. Within the store's registered callback, a switch statement based on the action's type is used to interpret the action and to provide the proper hooks into the store's internal methods.

This allows an action to result in an update to the state of the store, via the dispatcher

Controller-Views

Normally in the top of the view hierarchy, controller-views, listen for events that are broadcast by the stores. After receive the broadcast it requests the new data to the stores. Then calls its own setState() causing its render() and your descendants.

Actions

An action is a function wich the dispacher will trigger it to the stores. This function may receive params and return an object with a type an perhaps a payload.

function doSomeThing() {
  return {
    type: "DO_SOME_THING",
    payload: { data }
  };
}

Redux

Redux is a state container for JavaScript apps that implements some parts of the Flux pattern and is founded on three principles.

Core Principles

Single source of truth: there is a single object that maintains the entire state of the application.
State is read-only: the state can not be changed directly, to this an action need be be emitted expressing intention.
Changes are made with pure functions: when an action is emitted it is received by reducers that are pure functions. The reducer will take as parameters the previous state, an action and will returns the next state.

JavaScript example

As Redux is a state container for JavaScript application, we can try it without another libray such as React.

Install

  mkdir redux_test && cd redux_test && yarn init -y

  yarn add redux

and from the redux documentation we following a simple exemplo:

const redux = require("redux");
const readline = require("readline");
const { promisify } = require("util");

const reader = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

reader.question[promisify.custom] = question => {
  return new Promise(resolve => {
    reader.question(question, resolve);
  });
};

const INITIAL_STATE = 0;
/**
 * -- reducer --
 * @param {number} state
 * @param {{type: string, payload: number}} action
 */
function counter(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + action.payload;
    default:
      return state;
  }
}

// Create a Redux store holding the state of your app.
const store = redux.createStore(counter);

// You can use subscribe() to update the UI in response to state changes.
store.subscribe(() => console.log(`store.subscribe: ${store.getState()}`));

const question = promisify(reader.question);

/**
 * Dispatch an action to store: store.dispatch
 */
async function read() {
  while (true) {
    await question("Next inc number\n")
      .then(inc => store.dispatch({ type: "INCREMENT", payload: Number(inc) }))
      .catch(err => console.log(err));
  }
}

read();

and we can run with:

node script_name.js

typing some positive and negative number to see the results.

React-Redux

As Redux is a state container for JavaScript applications, this can be used with any UI framework that has a binding library for the Redux.

The React Redux is the official Redux binding for React applications. This is maintained directly by the Redux team keeping updated with any changes in the Redux.

Example

With the store and reducer created at Redux we need pass the store through the component tree and we can use hooks to access it.

import React from "react";
import ReactDOM from "react-dom";
import Counter from "./Counter";

import { Provider } from "react-redux";
import store from "./redux/store";

ReactDOM.render(
  <Provider store={store}>
    <Counter />
  </Provider>,
  document.getElementById("root")
);

In the counter component:

import React from "react";
import { useSelector, useDispatch } from "react-redux";

export const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);

  return (
    <>
      <span>`counter: ${counter}`</span>
      <button onClick={() => dispatch({ type: "INCREMENT", payload: 1 })}>
        Increment
      </button>
    </>
  );
};

In this article, an overview of Flux, Redux and React Redux was taken: the first (Flux) is a pattern proposed by Facebook that separates business logic from visualization; second (Redux), which is a library that implements some parts of Flux and, finally, React Redux, a library used as a link between React applications and Redux library.

Setup a React.JS Project with TypeScript, ESLint and Prettier without create-react-app

Renato Rocha — Tue, 14 Jan 2020 20:14:11 +0000

When we initializing the study of react and searching by a tutorial in many cases the create-react-app is used to create de application. However, some people cite some negatives in this approach like: hard configuration, maintainability and soon.

So in this post we will desmonstrates how to setup a React project without the create-react-app.

For this task we need install and configure: a JavaScript compiler (transpiler) to convert our source code in a way that the browser understand; a model bundler to loading and compile modules to a single file.

JavaScript compiler (babel)

We use Babel is a to convert new JavaScript code into compatible version that the browsers can understand. As an alternative we can use sucrase.

Plugins and presets

All transformations that Babel apply are informed to it through plugins and an array of plugins can be informed as a preset.

Install Babel, plugins and presets


mkdir your_project_folder && cd your_project_folder

yarn init -y

yarn add @babel/core @babel/cli @babel/preset-env
@babel/preset-react @babel/plugin-transform-typescript -D

yarn add @babel/polyfill core-js

Now at root of project, create the file babel.config.js with the content:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-transform-typescript"]
};

Model bundler (webpack)

Webpack is a module bundler for JavaScript applications. Webpack will mapping all modules dependencies creating a bundle file.

Install webpack

yarn add webpack webpack-cli -D

Now we need create a file called webpack.config.js at root project. Inside that file we will see some configurations:

resolve: help to find models that are required by the application.
devServer: use to configure the webpack-dev-server
entry: says to webpack what is the entry point.
module.rules: an array of rules that determine the loader to each file.

Install loaders and dev sever

yarn add babel-loader style-loader css-loader file-loader source-map-loader ts-loader webpack-dev-server eslint-loader -D

Put in the webpack.config.js file the content:

const path = require("path");

module.exports = {
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  devServer: {
    contentBase: path.join(__dirname, "public"),
    compress: true,
    port: 3000
  },
  entry: path.resolve(__dirname, "src", "index.tsx"),
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: ["babel-loader", "eslint-loader"]
      },
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [{ loader: "ts-loader" }, { loader: "eslint-loader" }]
      },
      {
        test: /\.css$/,
        use: [{ loader: "style-loader" }, { loader: "css-loader" }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/i,
        use: ["file-loader"]
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader"
      }
    ]
  }
};

ESLint, Prettier and TypeScript

For that install and configuration we can use How to setup a React.JS Project with typcript, ESLint and Prettier

The .eslintrc.json, .prettierrc, tsconfig.json, custom.d.ts are:

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "react/prop-types": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "import/prefer-default-export": "off",
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-var-requires": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "public",
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src", "custom.d.ts"]
}

custom.d.ts;

declare module "*.svg" {
  import React = require("react");
  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

declare module "*.png" {
  const src: string;
  export default src;
}

The finally packages to install are:

yarn add react react-dom

The project structure is:

To complete we need create:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ReactJS</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./bundle.js"></script>
  </body>
</html>

src/index.tsx

import React from "react";
import { render } from "react-dom";

import Index from "./pages";

render(<Index />, document.getElementById("root"));

src/pages/index.tsx

import React from "react";

export default function src() {
  return (
    <div className="container">
      <h1>Hello World!</h1>
    </div>
  );
}

Now add in package.json:

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  }

And at root folder run:

yarn dev

source code

Simple Image Gallery using React, typescript and styled-components

Renato Rocha — Mon, 13 Jan 2020 15:10:02 +0000

In this post will be demonstrates an idea used to build a simple responsive image gallery on a React project using typescript and styled-components and without using media query.

For size values, percentage measures are used to maintain responsiveness.

The gallery's structure was made with a main container that using 100% of page width. Over the main container, we have two clickable labels, one on left and another on the right side. This labels will be used to move between the images.

When the component is rendered passing to it n images, then the structure bellow will be created n-1 over the main container.

So each one that structure has an id associated and the left label has an id for the previous and right label has an id for the next one. When one label is clicked the component state will be updated with the next or prev image id occasioning the rerender and apply the css to specific clicked label.




  function handleCheck(name: string) {
    setChecked(name);
  }

  function createInputRadio(index: number) {
    const id = `_${index}`;

    return styled.input.attrs({
      name: 'images',
      id,
      type: 'radio',
    })`
      &:checked {
        ~ #__${index} {
          visibility: visible;
          animation: scroll 1s ease-in-out;
        }
      }
    `;
  }

  function renderInputRadio(index: number) {
    const id = `_${index}`;
    const InputRadio = createInputRadio(index);

    return (
      <InputRadio
        key={index.toString()}
        checked={checked === id}
        value={checked}
        onChange={() => handleCheck(id)}
      />
    );
  }

Source code

How to setup a React.JS Project with TypeScript, ESLint and Prettier

Renato Rocha — Mon, 06 Jan 2020 14:18:38 +0000

During the software development proccess is important keeping the code well organized and readable, following a development quality standard that will facilitate future maintenance. However, performing this formatting manually or even having to standardize old code can be tedious.

Thus, this article aims to present the configuration of a React.js project with typescript using eslint and prettir to standardize the source code.

Project creation

yarn create react-app todo_list

At the root of the project:

Typescript dependencies

yarn add typescript @types/node @types/react @types/react-dom @types/jest -D

ESlint and prettier installation

The eslint package will inform us when some code is not following the development pattern.
The prettier package will aplly the pattern.
yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D

After installations, run: yarn eslint --init and following the steps:

To check syntax, find problems, and enforce code style
JavaScript modules (import/export)
React
Does your project use TypeScript? y
Browser
Use a popular style guide.
Airbnb: https://github.com/airbnb/javascript
JSON
Y

As I'm using yarn as package manager, then, I will removing package-lock.json and run: yarn on the project root to update the yarn cache.

So when we installing ESLint it came with a parser called espree that creating a data structure following the rules of standard JavaScript. Thus, we need a parser typescript-eslint that creating a data structure for typescript, that is a javascript superset. The packages for this parser was installed following the dependencies steps (@typescript-eslint/parser @typescript-eslint/eslint-plugin).

Configuring the project

editor config

At the root of the project, create the .editorconfig file with the content:

root = true

[*]
end_of_line = lf
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

eslint config

At the root of the project, change the content of .eslintrc.json file to:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

prettier config

At the root of the project, create the .prettierrc file with the content:

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Loading svg logo in App.tsx

The import svg logo in App.tsx will initialing fail. To fix that create custom.d.ts whit the content:

declare module '*.svg' {
  import React = require('react');
  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

and now reference this file in tsconfig.json like this:

"include": ["src", "custom.d.ts"]

Editing the vscode config (settings.json)

"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
"[javascriptreact]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    }
},
"editor.formatOnSave": true,
  "[typescript]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    }
},
  "[typescriptreact]": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true,
    }
}

Finally, rename any file to be a TypeScript file (index.js to index.tsx and App.js to App.tsx) and restart your server.

Source code