yonibot

function rateMyDay(decimal) {
  const ratingInWords = decimal > 0.5 ? 'great!' : 'eh.';
  
  return [[decimal, ratingInWords], [decimal, ratingInWords]];
}

yonibot

// App.js

...
import { useWeatherService } from './useWeatherService';
const [ currentUnit, setUnit ] = useState(TEMPERATURE_UNITS.metric);

function App({coords}) {
  
  const weather = useWeatherService(coords, currentUnit); // <- all that's left of the API logic :)

yonibot

// useWeatherService.js

import { useState, useEffect } from 'react';
import keys from './keys';

const apiKey = keys.openweather;

const useWeatherService = (coords, unit) => {

    const [weather, setWeather] = useState();

yonibot

// App.js

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

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

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

<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

<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

npm install antd --save

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)