Skip to content

Instantly share code, notes, and snippets.

🏂
👋

Tyler McGinnis tylermcginnis

🏂
👋
Block or report user

Report or block tylermcginnis

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tylermcginnis
tylermcginnis / highlight.js
Created Sep 2, 2015
Highlight React Components
View highlight.js
setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)
View React Component Highlighter
(function(){Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(ele){ele.style.background = 'rgba(0, 129, 255, 0.05)'})})();
View FlexboxExamples
import React, { Component } from 'react'
import { StyleSheet, Text, View, AppRegistry } from 'react-native'
class FlexboxExamples extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box}/>
<View style={styles.box}/>
<View style={styles.box}/>
View rn-styles-start.js
import React, { Component } from 'react'
import { StyleSheet, Text, View, AppRegistry } from 'react-native'
class FlexboxExamples extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box}/>
<View style={styles.box}/>
<View style={styles.box}/>
View installs
npm install --save react react-dom && npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-{react,es2015,stage-0} style-loader css-loader
View Contents.json
{
"images": [
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-568h@2x.png",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "retina4"
View animated-transitions.js
import React, { Component } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect
} from 'react-router-dom'
View react-installs
npm install --save react react-dom && npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-react
View react-bootcamp-day-3-6.html
<!DOCTYPE html>
<html>
<head>
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script>
</head>
<body>
<div id='app'></div>
You can’t perform that action at this time.