Skip to content

Instantly share code, notes, and snippets.

Xavier Artot xavierartot

View GitHub Profile
xavierartot /
Created Sep 17, 2018 — forked from rreusser/
Things I learned the hard way using React Native

Things I learned the hard way using React Native

Set up your environment carefully: It's important to have one canonical source of truth per environment, per platform. (i.e. iOS Development, iOS Testflight, iOS Production, ditto Android.) Every time you build, your config should propagate values from one input source (per platform) to either Java/JavaScript or Objective-C/JavaScript. Here's what we did for Android and here's what we did for iOS. I don't doubt that you can do better. Please do better. But you can't say that we didn't have one canonical source of truth that worked very simply and effectively throughout the development process.

Don't wait until the end to develop Android and iOS concurrently: Even if you're not actively focusing on both platforms, don't assume that "RN is cross platform… we can develop iOS and flip the Android switch when we'r

View react object
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom' // withRouter allow to connect the route as property with connect
class ViewPoll extends Component {
componentDidMount() {
const { id, question } = this.props
console.log('xav', question)
// console.log(question.optionTwo.votes) // id : 6ni6ok3ym7mf1p33lnez
View eslint-react-nanondegree
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
View form contact UI
import React from 'react';
import { Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
import nodemailer from 'nodemailer';
import firebase from './firebase';
export default class ContactForm extends React.Component {
constructor() {
this.state = {
View Snippet one file
# Functions
# prototype
snippet .
snippet proto
${1:class_name}.prototype.${2:method_name} = function(${3}) {
# Function
View Snippet es6
snippet const
const ${1} = ${0};
snippet let
let ${1} = ${0};
snippet im "import xyz from 'xyz'"
import ${1} from '${2:$1}';
snippet imas "import * as xyz from 'xyz'"
import * as ${1} from '${2:$1}';
snippet imm "import { member } from 'xyz'"
import { ${1} } from '${2}';
View todolist react
import React from 'react';
const ListItem = (props) => {
return (
<span className='text-normal'>{props.item}</span>
className="btn btn-remove">remove</button>
View Simple To Do List React.js
//Improvment from this tutorial:
import React from 'react';
import List from './List';
export default class TodoList extends React.Component {
constructor(props) {
this.onChangeList = this.onChangeList.bind(this);
this.state = {
term : '',
View load.js
const products = {
product1 : {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
product2 : {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
product3 : {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
product4 : {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
product5 : {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
product6 : {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
export default products;
You can’t perform that action at this time.