yonibot

import React, { Component, PropTypes } from 'react';
import Headlines from '../components/Headlines';
import Newsfetcher from '../components/Newsfetcher';
import fetch from 'isomorphic-fetch';

class App extends Component {
  constructor() {
    super();
    this.state = {
      isFetching: false,

yonibot

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

yonibot

<View style={{flex: 1, alignItems: 'stretch'}}>
  <Text style={{marginTop: 20}}>Page with a Sticky Footer</Text>
  <View style={{flex: 1, borderWidth: 1, height: 30}} >
    <Text>I take up loads of space!</Text>
  </View>
  <Text style={{alignSelf: 'flex-end'}}>
    (c)Yoni Weisbrod 2016
  </Text>
</View>

yonibot

	1. Step By Step flexbox lesson
		a. Short intro (2 mins)- The benefits: Flexbox solves a lot of design issues using much less code via relative size, positioning and alignment. Useful for mobile (different device sizes and proportions).
		
		b. Properties (8 mins) - Goal: everyone will know how to use each property by heart. Step by step approach to each Flexbox property supported on RN along with helpful tips to remember each attribute.
			i. Aids: Slides showing the names of each property, simple definition, attribute options, and a diagram.
			ii. Material based on my blog post - https://medium.com/@yoniweisbrod/a-mini-course-on-react-native-flexbox-2832a1ccc6
			
		c. Real Life application (8-10 mins) - 
			i. 3-4 examples of Android or iOS interfaces with slides of each design and the code behind it.
				1 - Functional: Sticky footer with list view (using flex)

yonibot

npm install antd --save

yonibot

<Row gutter={16}>
  <Col span={6}>
    Last updated by <strong>{ entry.lastUpdatedBy }</strong>, <em>{ entry.updatedAt }</em>
  </Col>
  <Col span={18}>
    <h2>{ entry.title }</h2>
    <p><Icon type="tags-o" style={{fontSize: '15px'}} /> { tagLinks }</p>
    <p>{ entry.body }</p>
  </Col>
</Row>

yonibot

<Form.Item label="E-mail">
  {getFieldDecorator('email', {
    rules: [{
      required: true, message: 'Please input your E-mail!',
    }, {
      validator: this.checkEmailFormat
    ],
  })(
    <Input />
  )}

yonibot

import {Form, Input} from 'antd';

// ...
<Form>
    <Form.Item
      label="Title"
      validateStatus='error'
      help='Oh no! Did you forget to include a title?'>
      <Input
        name='title'

yonibot

import React, { useEffect, useState } from 'react';
import { geolocated } from 'react-geolocated';
import { TEMPERATURE_UNITS, swapUnits } from './utils/weather';
import './App.css';
import keys from './keys';

const apiKey = keys.openweather;

function App({coords}) {

yonibot

// App.js

import { useWeatherService } from './useWeatherService';
...

function App({coords}) {
  
  const [ currentUnit, setUnit ] = useState(TEMPERATURE_UNITS.metric); 
  const [ weather, getWeather ] = useWeatherService(); // <- initializing the hook