Today I Learned

TIL, 2018-05-10, Make components stateless and functional.

Musings, JS:

  • export default was not found
    • You have to specify default explicitly, or if you’re trying to export multiple items from the same file, you need to import them with curly brackets.
export default function translateDate(date) { } import translateDate from file.js

// other_file.js
export function doWork(){}
export const myVariable = true;

import { doWork, myVariable} from "./other_file.js"
  • Toast/Notifications library: Reference
  • Axios in errors: Reference. Modify from console.log(error) to console.log(error.response) in catch.
  • Axios Interceptor: Reference
axios.interceptors.response.use(undefined, function (error) {
  if(error.response.status === 401) {
    return Promise.reject(error);
  • Code review
    • Lint in your project.
    • Why is app.js a class/doesn’t need internal state and could be a stateless function. If it’s used to encapsulate the Audio instance, put this outside of your component hierarchy.
    • Prop typing/safety when developing.
    • Organize component styles with BEM or ITCSS.
    • Inline or class-based styles.
    • Percentage, pixel and other units for padding and margins. Using a multiple of a fixed unit can make styling more predictable and visually consistent.
    • Create React App is a pragmatic choice. However, it limits how much a reviewer can tell about your tooling abilities, such as webpack setup, bundling choices and CSS prefixing.
  • Radium: Part of the tool chain for React component styling.
  • How do you apply vendor prefixes to inline styles in React?
  • Table or div?
    • For appearance, neither. If it’s tabular data (sequential content that relates to each other in a columnar way), use tables. Other than that, paragraphs, ordered lists, unordered lists, and wrap divs around those for hooks.
    • There is no replacement for a table tag when used with tabular data. Almost any other tag can be a replacement for div and you only use that if there isn’t a more semantically appropriate alternative.

Reddit Beginners Thread

  • Aim for as many functional components as possible. PureComponents?
  • Even with Redux, you can still use component states to pass props between parent-child.
  • react-native: Task #1 is to get the device emulators working.
  • Use Jest to mock axios instead of using axios in your test.

Musings, Rails

  • Rails’s (also Date.current) calculates time based on the server’s clock. You can set it in config/application.rb. Reference

This project is maintained by daryllxd