republicvirgo

Frontend Masters: React && Firebase (Version 2)

Contact Information

• @stevekinney

Prequisite Setup

• A recent version of Node.js
• npm install -g create-react-app

republicvirgo

React & JSX Cheatsheet

Overview
JSX HTML	<div>...</div>
JSX Component	<Component property={javascript} /> <Component property='string' />
JSX Component with Children	<Component>{children}</Component> reference: props.children
Escaping JavaScript	{...}
require statements	const React = require('react'); const ReactDOM = require('react-dom');
npm modules	react, react-dom

republicvirgo

React lifecycle cheatsheet

Method	Side effects1	State updates2	Example uses
Mounting
componentWillMount		✓	Constructor equivalent for createClass
render			Create and return element(s)
componentDidMount	✓	✓	DOM manipulations, network requests, etc.
Updating
componentWillReceiveProps		✓	Update state based on changed props

republicvirgo

[user]
	name = Pavan Kumar Sunkara
	email = pavan.sss1991@gmail.com
	username = pksunkara
[core]
	editor = vim
	whitespace = fix,-indent-with-non-tab,trailing-space,cr-at-eol
	excludesfile = ~/.gitignore
[sendemail]
	smtpencryption = tls

republicvirgo

# Encrypt the repository
# Remove/modify this line if the repository is meant to be open-source
*.* filter=git-crypt diff=git-crypt
.gitattributes !filter !diff

# These files are text and should be normalized (Convert crlf => lf)
*.php text
*.css text
*.js text
*.htm text

republicvirgo

# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so

# Packages #

republicvirgo

<?php
function convertCurrency($amount, $from, $to){
	$data = file_get_contents("https://www.google.com/finance/converter?a=$amount&from=$from&to=$to");
	preg_match("/<span class=bld>(.*)<\/span>/",$data, $converted);
	$converted = preg_replace("/[^0-9.]/", "", $converted[1]);
	return number_format(round($converted, 3),2);
}

echo convertCurrency("10.00", "GBP", "USD");

republicvirgo

<div class="">
    <video autoplay="true" id="video-webcam">
        Izinkan untuk Mengakses Webcam untuk Demo
    </video>
    <button onclick="takeSnapshot()">Ambil Gambar</button>
</div>
<script>
    var video = document.querySelector("#video-webcam");

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;