ryanflorence

// #1
// can pass by name
<Button children={el2} />
const el = React.createElement(Button, { children: el2 })
  
// or by position
<Button>{el2}</Button>
const el = React.createElement(Button, null, el2)
// React theoretically turns it into this once you're in the component:
const el = React.createElement(Button, { children: el2 })

ryanflorence

const { createServer } = require('http');

createServer((req, res) => {
  res.writeHead(200, {
    Connection: 'Transfer-Encoding',
    'Content-Type': 'text/html; charset=utf-8',
    'Transfer-Encoding': 'chunked'
  });

  res.write(`

ryanflorence

const { createServer } = require('http');
const fs = require('fs');
const path = require('path');

const jokesDir = path.join(__dirname, 'jokes');

const jokes = fs.readdirSync(jokesDir).map(jokeFile => {
  const jokeData = fs.readFileSync(path.join(jokesDir, jokeFile));
  return JSON.parse(jokeData);
});

ryanflorence

1. Intro

• Our Company
  • Quick history
  • React Router
  • Reach UI
• 20 Minute React™
  • "Declarative", "Composable", "Functional"
  • show off most APIs all at once, build up a little sort/filter searchable list
  • Review "React Application Anatomy"

ryanflorence

import React from 'react';
import { JSDOM } from 'jsdom';
const { document } = new JSDOM('').window;

function App() {
  const [count, setCount] = useState(false);
  const [error, setError] = useState(null);

  const subtract = () => setCount(count - 1);
  const add = () => setCount(count + 1);

ryanflorence

// Before
class TrackPageViews extends React.Component {
  componentDidMount() {
    this.track()
  }

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.track()
    }

ryanflorence

function App() {
  // updates App every 100ms
  const now = useStopWatch(100)

  // this is a new function every time
  const handleModelSelect = vehicle => {
    console.log(vehicle)
  }

  return (

ryanflorence

Node.js Workshop

Prework:

• Install node
• Download repo and get it running
• Sign up for trial account for lambda service

Day 1

ryanflorence

const React = require('react')
const ReactDOMServer = require('react-dom/server')
const { createServer } = require('http')
const App = require('./build/static/js/main.49fed57c').default

createServer((req, res) => {
  const el = React.createElement(App)
  const html = ReactDOMServer.renderToString(el)
  res.write(html)
  res.end()

ryanflorence

// Step 1 - update component code

// before
const Thing = props => {
  const { id } = props.match.params
  const { location, history } = props 
  return <div/>
}