Rafael Santos Sá fael

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

From zero to microservice with 𝚫 now

The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.

It uses Open Source tools that are widely available, tested and understood:

Node.JS
NPM
Express

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

	/**
	* Basic proof of concept.
	* - Hot reloadable
	* - Stateless stores
	* - Stores and action creators interoperable with Redux.
	*/

	import React, { Component } from 'react';

	export default function dispatch(store, atom, action) {

	/*
	New Relic GPT ad monitoring code
	//
	This snippet captures PageActions containing references to Google publisher tag ads
	Should you have any questions about this, please reach out to me at [email protected]
	Please note that you must be using New Relic's SPA browser agent.
	//
	*/
	//
	//first, make sure the newrelic object exists properly

	import React, { Component } from 'react';
	import PropTypes from 'prop-types';
	import { connect } from 'react-redux';

	import {
	extractClockTimestamp,
	} from './reduxClockReducer';

	import {
	ACTION_CLOCK_SUBSCRIBE,

	export class MyComponent extends React.Component {
	componentWillMount() {
	const styleid = 'MyComponentStyles'
	if (document.head.querySelector(`#${styleid}`) !== null) {
	const styles = document.createElement('style');
	styles.id = styleid;
	styles.append('[foo]{ color: blue; }');
	document.head.appendChild(styles);
	}
	}

	import { useState, useMemo, useEffect } from "react";
	import { interpret } from "xstate/lib/interpreter";

	export default function useMachine(machine, { log = false } = {}) {
	const [current, setCurrent] = useState(machine.initialState);

	const service = useMemo(() => interpret(machine), []);

	useEffect(() => {
	service.onTransition(setCurrent).start();