chadfurman

Vagrantfile: Vagrantfile.zip

Output of vagrant up --debug:

... snipped...

==> default: Mounting NFS shared folders...
DEBUG ssh: Checking whether SSH is ready...
DEBUG ssh: Re-using SSH connection.

chadfurman

• The course was fun, a very nice experience. Hopefully all FEM courses are this good?
• Like a netflix course, easy to keep watching
• Server-side rendering is complicated / hard, but really useful. React makes this much easier
• System.import? Is it just for webpack static analysis? We mock the import method so the server doesn't run it
• The week-by-week format of FEM courses is very helpful
• Universal Rendering and code splitting are new to most of us and useful
• There was a "Node" course
• Do we need server-side rendering? It adds lots of complexity. Sometimes we have apps that don't need SEO
• It was nice to start with a very simple React app and added complexity

chadfurman

Separating the Client and Server code

• server.js and app.js
• app.js is run both on the client and the server
• we need to separate browser concerns from universal concerns
• We extract our Client.js into app.js (everything but the call to render)
• BrowserRouter also gets extracted from the App.js code (stays in client)
• Brian is using a templating engine on the server

Implementing Server-Side Rendering

chadfurman

Dispatching Actions in Relay

• our input isn't changing anymore, but we wrote the action, the action creator, the reducer, and the root reducer
• We must now take the last step of dispatchind an aciton to redux
• Let's go to landing.js and add a couple of things. (note that connect adds dispatch to props)

import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { setSearchTerm } from './actionCreators'
const { string, func } = React.PropTypes

chadfurman

def module_check(module):
    '''
    Just for debian-based systems like Kali and Ubuntu
    '''
    ri = raw_input(
        '[-] python-%s not installed, would you like to install now? (apt-get install -y python-%s will be run if yes) [y/n]: ' % (
            module, module))
    if ri == 'y':
        os.system('apt-get install -y python-%s' % module)
    else:

chadfurman

• Interesting what he says about "this" and "es6 classes" and binding
• i.e. var that = this -- stuff like this is also in the Advanced Js course!
• Redux debug tools -- can step forward and back! soocool!
• Middleware, refactored to get the ajax data into redux -- react is about managing the interaction with the user
• starts to get confusing -- actions, action creators, thunk to get the data if it haasn't been gotten alread, etc
• really need how thunks don't request the same thing twice
• Universal rendering makes a lot of sense and is something we want more experience in
• Kyle Simpson -- rethinking asynchronous programming
• "Who is Kyle Simpson?"
• That ES6 course looks cool...

chadfurman

Meeting Notes

• The course is great, some people are almost done with it!
• Using redux is really exciting, but it's complicated
• React tools are great as well
• Getting data to your components is also really simple
• the connect() method deserves a mention -- it makes things easy
• All this redux stuff is in current projects -- it's really good to know why things are called what we do (i.e. reducers?)
• React development tools are powerful
• Because your state is in redux, it can be harder to debug because the data isn't with the component
• Object.assign to update

chadfurman

Passing Data to the Details Component

• PropTypes isn't required for code, but it's for debugging and has been useful
• pattern="route", component=function <-- properties on react router 4 Match objects
• There are "Miss" and "Redirect" components -> react-router.now.sh

Organizing Code in React Components

• Higher Order components wrap other components and imbues those components with functionality

Finishing the Details Component

• PropTypes -- identifying what you need first then doing it.

chadfurman

• React life-cycle methods were good to learn about
• What React API vs calling the DOM directly -- good to know
• The tools are pretty powerful
• Redux is coming up!

chadfurman

Meeting Notes

• Jest is cool!
• snapshot tests?! Interesting... JSON tests are fast
• In-line / shadow rendering is a little confusing
• changeState w/ higher-order compoments
• there are also stateless components that just pass state around
• How do you organize higher-order compoments?
• It's nice going through the full workflow on the app