Pedro Pimienta M. PterPmnta

Contents:

1 Installation
2 Create application and intro to JSX
3 Components
4 Events
5 Lists and Keys
6 Forms
7 Containment

🔻

NOTE: This page is currently a work in progress. There is a lot to cover in detail. The plan is to breakout details on conventions like 'How To Write Your Selectors' and 'How To Normalize Your Data' a bit later. For now just look for existing examples in the code or ask a friend.

To get the quick and dirty bullet list, scroll down to the TL;DR; below.

React Best Practices & Patterns

There are a few tricks we've picked up since we started that will help us with debugging, reuse, scalability, performance, and common pitfalls of complex singles page app development. We are not code Nazis but getting familiar with these things will help the whole team increase output and reduce code debt. These things should be pointed out in code reviews and corrected.

The goal is to write consistent code with less opportunities for bugs. Complex code is buggy code. It's really that simple.

	// Convert from degrees to radians.
	Math.radians = function(degrees) {
	return degrees * Math.PI / 180;
	}
	Math.radians(90); // 1.5707963267948966

	// Convert from radians to degrees.
	Math.degrees = function(radians) {
	return radians * 180 / Math.PI;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }

	// we have an array of objects, we want to remove one object using only the id property
	const apps = [{id:34,name:'My App',another:'thing'},{id:37,name:'My New App',another:'things'}];

	// get index of object with id of 37
	const removeIndex = apps.findIndex( item => item.id === 37 );
	// remove object
	apps.splice( removeIndex, 1 );

	const { resolve } = require('path');

	/**
	* Resolve tsconfig.json paths to Webpack aliases
	* @param {string} tsconfigPath - Path to tsconfig
	* @param {string} webpackConfigBasePath - Path from tsconfig to Webpack config to create absolute aliases
	* @return {object} - Webpack alias config
	*/
	function resolveTsconfigPathsToAlias({
	tsconfigPath = './tsconfig.json',

	import 'whatwg-fetch';
	import {openSnackbar} from '../../public/action/globalAction';
	export function setAttractions(attractions){
	return {
	type:'SET_ATTRACTIONS',
	attractions:attractions
	}
	}

	// ==UserScript==
	// @name Aliexpress/eBay/Gearbest/Amazon URL Shortener
	// @namespace http://tampermonkey.net/
	// @version 0.5
	// @author hedgehog, core.equip
	// @match https://.aliexpress.com/item/
	// @match https://.ebay.de/itm/
	// @match https://.ebay.com/itm/
	// @match https://.gearbest.com/
	// @match https://.amazon.de/

	function parseJwt (token) {
	var base64Url = token.split('.')[1];
	var base64 = base64Url.replace('-', '+').replace('_', '/');
	return JSON.parse(window.atob(base64));
	};


	// No Security

	{
	"rules": {
	".read": true,
	".write": true
	}
	}