Skip to content

Instantly share code, notes, and snippets.

Ryan Florence ryanflorence

Block or report user

Report or block ryanflorence

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View App.js
// #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 })
View index.js
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(`
View joke-server.js
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);
});
View advanced-react.md

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"
View test.js
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);
View index.js
// Before
class TrackPageViews extends React.Component {
componentDidMount() {
this.track()
}
componentDidUpdate(prevProps) {
if (prevProps.location !== this.props.location) {
this.track()
}
View index.js
function App() {
// updates App every 100ms
const now = useStopWatch(100)
// this is a new function every time
const handleModelSelect = vehicle => {
console.log(vehicle)
}
return (
View gist:fd2c408ecd6b58e173309653b45a4c68

Node.js Workshop

Prework:

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

Day 1

View server.js
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()
View migrate.jsx
// Step 1 - update component code
// before
const Thing = props => {
const { id } = props.match.params
const { location, history } = props
return <div/>
}
You can’t perform that action at this time.