Skip to content

Instantly share code, notes, and snippets.

Avatar
🦄

Sia siakaramalegos

🦄
View GitHub Profile
View .zshrc
# Path to your oh-my-zsh installation.
export ZSH=/Users/sia1/.oh-my-zsh
# Set name of the theme to load.
# Look in ~/.oh-my-zsh/themes/
# Optionally, if you set this to "random", it'll load a random theme each
# time that oh-my-zsh is loaded.
ZSH_THEME="robbyrussell"
# Uncomment the following line to use case-sensitive completion.
@siakaramalegos
siakaramalegos / index.html
Created Jun 12, 2016
react-getting-started-github
View index.html
<div id="root"></div>
@siakaramalegos
siakaramalegos / index.html
Created Jun 12, 2016
react-getting-started-game
View index.html
<div id="container" class="container"></div>
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Header</header>
@siakaramalegos
siakaramalegos / Document.es6
Created Oct 6, 2016
Updating style based on button click in React
View Document.es6
import React, {Component, PropTypes} from 'react'
import View from './View'
import Button from '../common/Button'
export default class Document extends Component {
static propTypes = {
program: PropTypes.object.isRequired,
}
constructor() {
@siakaramalegos
siakaramalegos / ControlledVsUncontrolledForms.js
Last active Dec 15, 2020
Controlled vs Uncontrolled/Serialized Forms in React
View ControlledVsUncontrolledForms.js
import React, {Component} from 'react'
import serialize from 'form-serialize'
export class FrontEndPartyControlled extends Component {
static defaultProps = {
name: '',
spiritAnimal: '',
}
constructor(props) {
@siakaramalegos
siakaramalegos / basic_router.jsx
Last active May 8, 2022
Basic example of React Router: BrowserRouter, Link, Route, and Switch
View basic_router.jsx
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
@siakaramalegos
siakaramalegos / BasicControlledForm.js
Last active Oct 26, 2017
Basic controlled inputs form
View BasicControlledForm.js
import React, { Component } from 'react'
export default class BasicControlledForm extends Component {
constructor() {
super()
// Initialize the values for our input properties with empty strings
this.state = {
firstName: '',
spiritAnimal: '',
}
@siakaramalegos
siakaramalegos / UncontrolledSerializedForm.js
Last active Dec 11, 2018
Basic uncontrolled inputs using form serialization to get data from form
View UncontrolledSerializedForm.js
import React, { Component } from 'react'
// Import the serialize function from the form-serialize package
import serialize from 'form-serialize'
export default class UncontrolledSerialized extends Component {
onSubmit = (e) => {
e.preventDefault()
// Usually, we would pass the final input values to a function that
// would do something with the data like persist it to a database.
// Using serialization, we just need to pass that function the
@siakaramalegos
siakaramalegos / UncontrolledRefForm.js
Created Jun 2, 2017
Basic uncontrolled inputs form using refs
View UncontrolledRefForm.js
import React, { Component } from 'react'
export default class UncontrolledRefsForm extends Component {
onSubmit = (e) => {
e.preventDefault()
// Usually, we would pass the final input values to a function that
// would do something with the data like persist it to a database.
// Using refs, we just need to pass the reference values.
console.log({
firstName: this.firstName.value,