Skip to content

Instantly share code, notes, and snippets.

View alvincrespo's full-sized avatar
:shipit:
Shipping Code.

Alvin Crespo alvincrespo

:shipit:
Shipping Code.
View GitHub Profile
@alvincrespo
alvincrespo / install-ember-simple-auth.sh
Created November 17, 2017 15:38
Install ember-simple-auth
ember install ember-simple-auth
@alvincrespo
alvincrespo / cd-into-auth.sh
Created November 17, 2017 15:36
CD into auth example
cd auth-example-frontend
@alvincrespo
alvincrespo / ember-new-output.sh
Created November 17, 2017 15:36
Ember new auth example output
➜ ember new auth-example-frontend
installing app
create .editorconfig
create .ember-cli
create .eslintrc.js
create .travis.yml
create .watchmanconfig
create README.md
create app/app.js
create app/components/.gitkeep
@alvincrespo
alvincrespo / ember-new.sh
Created November 17, 2017 15:34
Ember new auth example
ember new auth-example-frontend
@alvincrespo
alvincrespo / Form.jsx
Last active October 30, 2017 13:13
Traditional React Component Composition
import React, { Component } from 'react';
import Form from './Form';
import EmailField from './EmailField';
class App extends Component {
onValidEmail = () => {}
onInvalidEmail = () => {}
render() {
return(
@alvincrespo
alvincrespo / Form.jsx
Last active October 30, 2017 13:29
Form Composition with Nested Components
import React, { Component } from 'react';
import Form from './Form';
class App extends Component {
onValidEmail = () => {}
onInvalidEmail = () => {}
render() {
return (
<Form>
@alvincrespo
alvincrespo / App.js
Created October 25, 2017 13:49
Rendered PasswordField instantiation form JSX
React.createElement(
PasswordField,
null,
function (props) {
return React.createElement(
Field,
null,
props.label,
props.input
);
@alvincrespo
alvincrespo / App.jsx
Created October 25, 2017 13:33
Instantiating PasswordField component
const App = () => {
return (
<PasswordField>
{(props) => (
<Field>
{props.label}
{props.input}
</Field>
)}
</PasswordField>
@alvincrespo
alvincrespo / PasswordField.jsx
Created October 25, 2017 13:29
Functions as children component composition
const PasswordField = (props) => {
let children = {
label: <label>Password</label>,
input: <input type="password" />
};
if (props.children) {
return props.children(children);
}
@alvincrespo
alvincrespo / application.hbs
Last active October 22, 2017 18:53
Composable Form Component
{{#ac-form as |form|}}
<h2>Sign in</h2>
{{form.field-email}}
{{form.field-password}}
<div class="actions">
<button type="submit">Sign in</button>
</div>
{{/ac-form}}
{{#ac-form as |form|}}