Dan Vitoriano 🌈 danvitoriano

How I currently write React Apps (2019 Hooks Edition)

Foreword

Most of my products are very MVP-ish, so I dont focus too much on super clean code and high quality, but there are a few patterns that I reuse quite a bit and find useful. But this is not an exhaustive list and the examples might not be as clean as one would think.

Technology Stack

Usually I am not using any sophisticated state Library anymore, the react hooks useState and useReducer in combination with context is absolutely sufficient, at least for UI-State. Everything else is in data persistence, which is in my case either Firebase or Graphql (= Apollo).

A simple Webpack + Gulpfile configuration wihtout any need for React.js that assumes you have the following project structure:

node_modules/ bower_components/ scripts/

Entry script is in scripts/entry.js

You should run gulp && gulp build-dev and you are good to go.

	/**
	* Script to parse a Postman backupt to Insomnia keeping the same structure.
	*
	* It parses:
	* - Folders
	* - Requests
	* - Environments
	*
	* Notes: Insomnia doesn't accept vars with dots, if you are using you must replace yours URLs manually (see ENVIRONMENTS_EXPORTS).
	*/

	#!/bin/bash

	for clbg in {40..47} {100..107} 49 ; do # background
	for clfg in {30..37} {90..97} 39 ; do # foreground
	for attr in 0 1 2 4 5 7 ; do # formatting
	printf "\e[${attr};${clbg};${clfg}m" # colorization
	printf "\\\e[${attr};${clbg};${clfg}m" # code text prefix
	printf " ░▒▓█▓▒░ " # sample characters
	printf "\\\e[0m" # code text suffix
	printf "\e[0m" # reset color

	{
	"workbench.startupEditor": "newUntitledFile",
	"editor.fontSize": 16,
	"editor.lineHeight": 1.8,
	"javascript.suggest.autoImports": true,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"editor.rulers": [
	80,
	120
	],

	/**
	* Arquivo: calculadora-test.js
	* Author: Glaucia Lemos
	* Description: arquivo responsável por realizar os testes do arquivo: 'calculadora.js'
	* Data: 30/03/2018
	*
	* Documentação: http://chaijs.com/guide/styles/#assert
	*
	*/

	// This is an example of how to fetch external data in response to updated props,
	// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

	class ExampleComponent extends React.Component {
	_currentId = null;

	state = {
	externalData: null
	};

	// This is an advanced example! It is not intended for use in application code.
	// Libraries like Relay may make use of this technique to save some time on low-end mobile devices.
	// Most components should just initiate async requests in componentDidMount.

	class ExampleComponent extends React.Component {
	_hasUnmounted = false;

	state = {
	externalData: null,
	};

	import React, { Component } from 'react';

	import { withRouter } from 'react-router-dom'; // <--- import `withRouter`. We will use this in the bottom of our file.

	class ContactForm extends Component {

	submitForm (e) {
	e.preventDefault()
	this.props.history.push('/thank-you'); // <--- The page you want to redirect your user to.
	}

	import fetch from 'node-fetch';
	import { observable, action, runInAction } from 'mobx';

	export default class GithubStore {
	@observable searchName;
	@observable user;
	@observable repos;
	@observable fetchingData;

	constructor() {