Pedro Pimienta M. PterPmnta

🔻

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.

Contents:

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

SQLite3 Electron windows integration

This guide is based on the very informative discussion in this article: Using node_sqlite3 with Electron

Install sqlite3

npm install sqlite3 --save

	// 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 );

	<!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; }

	// 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;
	}

	Para exportar componentes, se deben seguir los siguientes pasos:
	• En un archivo js indicar los import correspondientes a las librerias react y react-dom, como otras(con rutas relativas).
	Ejemplo: statistics-toolbar.js
	import React from 'react';
	import ReactDOM from 'react-dom';
	import token from '../services/token-service';
	import layers from '../services/layers-service';
	import mymap from '../services/map-service';

	• Construir el componente.


	/*
	##Device = Desktops
	##Screen = 1281px to higher resolution desktops
	*/

	@media (min-width: 1281px) {

	/* CSS */

	flex-flow:column-reverse wrap-reverse;
	justify-content:center;
	align-content:space-between;

	<?php
	/**
	* Created by PhpStorm.
	* User: elporfirio
	* Date: 08/08/15
	* Time: 10:56
	*/

	require "twitteroauth-master/autoload.php";