Skip to content

Instantly share code, notes, and snippets.

@dceddia
dceddia / App.js
Created June 15, 2018 02:03
Render the Camera, or the last photo.
render() {
const { photo } = this.state;
return (
<View style={{ flex: 1, width: '100%' }}>
{photo ? (
<ImageBackground
style={{ flex: 1 }}
source={{ uri: photo.uri }} />
) : (
import React from 'react';
import { connect } from 'react-redux';
class Counter extends React.Component {
increment = () => {
this.props.dispatch({ type: 'INCREMENT' });
}
decrement = () => {
this.props.dispatch({ type: 'DECREMENT' });
function brokenReducer(state = initialState, action) {
switch(action.type) {
case 'INCREMENT':
// NO! BAD: this is changing state!
state.count++;
return state;
case 'DECREMENT':
// NO! BAD: this is changing state too!
state.count--;
function reducer(state = initialState, action) {
switch(action.type) {
case 'INCREMENT':
return {
count: state.count + 1
};
case 'DECREMENT':
return {
count: state.count - 1
};
@dceddia
dceddia / Counter.js
Created November 17, 2017 04:23
With state removed
import React from 'react';
class Counter extends React.Component {
increment = () => {
// fill in later
}
decrement = () => {
// fill in later
}
import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';
const App = () => (
<div>
<Counter />
</div>
);
import React from 'react';
class Counter extends React.Component {
state = { count: 0 }
increment = () => {
this.setState({
count: this.state.count + 1
});
}
@dceddia
dceddia / App.js
Created October 20, 2017 15:32
Fetching users from Express, while also using React Router
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import './App.css';
class UsersView extends Component {
state = {users: []}
import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {users: []}
componentDidMount() {
fetch('/users')
.then(res => res.json())
.then(users => this.setState({ users }));
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001"