React - ryantc94/Knights-of-Arthur GitHub Wiki

https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5 https://github.com/reactjs/reselect https://medium.freecodecamp.org/understanding-memoize-in-javascript-51d07d19430e

React Development

  • Remember React is a JavaScript library, on the low-level I think its just creating the DOM by adding to the document.() ...

  • TODO: Should read about the virtual DOM and take notes...

  • 'index.js is the standard way to mount a React application into the DOM.' - Link 3

  • What’s the difference between client side rendering and server side rendering?

  • ^ Client side rendering — Normally when using React, your browser will download a minimal HTML page, and the content will be filled in by JavaScript.

  • ^ With Server side rendering, the initial content is generated on the server, so your browser can download a page with HTML content already in place. Updates to the content are still handled in the browser.

Serving React Server Side (Link 3)

https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf

Serving React Client Side

  • Look at Create-React-App I think it scaffolds a client side react app by default

Virtual DOM

  • https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130
  • Basically React keeps a DOM object called the Virtual DOM and a version of the previous snapshot of the Virtual DOM. Once a change is made React will batch the changes, and revise the DOM only at the point it was changed with the batch of modifications.

React Reconciliation

React Coding

https://medium.com/@ericchurchill/the-react-source-code-a-beginners-walkthrough-i-7240e86f3030

React.createElement

React Elements

  • Are UI objects and are immutable it represents the UI at single point in time

React Components

  • Functional components take props through parameter ... why doesnt class need to??? has to do with extending React.Component probably
  • Class components should always call the base constructor with props... (WHY?)
  • Class components must have a render.

React Events

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

  • Event handler bind explained
class X extends React.Component {
   constructor(props) {
       super(props)
       this.state = {y: 'not done'}
       this.handleChange = this.handleChange.bind(this)
   }
   handleChange(e) {
       this.setState({y: 'done'})
   }
   render() {
       return <div onChange={this.handleChange}> hi </div>
   }
}

// Class is ES6 syntatic sugar for prototype inheritance. Because React calls

Higher Order Components Pattern (needs more review...)

https://reactjs.org/docs/higher-order-components.html

  • (This is kinda hard to understand because i still don't get the bind and handle change thing too much)
  • A higher order component is a function that takes a component and returns another component.
  • Used for components that share a pattern.
//Create a function that takes in a component and callback
function hoc(component, selectedData) {
   return class extends React.Component {
      ...
      render(){
         return <Component data={} {...props} /> 
      }
   }
}

//Pass component and common function to HOC
var highOrderFunction = hoc(component, callback);

  • Don't mutate the original component, meaning don't mutate its prototype. Instead use composition meaning wrapping the component

  • HOCs use containers as part of their implementation. You can think of HOCs as parameterized container component definitions.

  • HOCs should pass through props that are unrelated to its specific concern.

  • Redux connect is a HOF that returns an HOC.

  • By convention choose a displayName that easily lets you know the component is from an HOC for debugging

  • Because React determines whether to re-render a component based on component ID (reconciliation), you can't use HOC in the render, or else it'll always be different and always unmount it

  • HOC doesn't bring over static methods from original so the work around is this:

function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  // Must know exactly which method(s) to copy :(
  Enhance.staticMethod = WrappedComponent.staticMethod;
  return Enhance;
}

//or to export the static method
// Instead of...
MyComponent.someFunction = someFunction;
export default MyComponent;

// ...export the method separately...
export { someFunction };

// ...and in the consuming module, import both
import MyComponent, { someFunction } from './MyComponent.js';
  • Refs aren't passed through .... (look into this)

Render Props

  • A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
  • Basically Render props is important because you can tell a component what to render inside its render function, so its rendering becomes more dynamic instead of having to hardcode the children in the rendering function.
  • Also this helps deal with passing props down since when you use the render prop you can pass the parent state to the dynamically rendered prop and have the child component expect some props
  • More concretely, a render prop is a function prop that a component uses to know what to render.
class X extends React.Component {
   render (
       <div> hi </div>
   )
}

class Y extends React.Component {
   render (
       <div>
          {this.props.render(this.state)}
       </div>
   )
}

class Z extends React.Component {
   render (
      <div>
          //seems kinda weird but basically the parent component is using the call back to pass state to this rendered prop
          <Y render={state => <X state={state} />}/>
      </div>
   )
}

  • HOC + Render Props???

  • It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern, any prop that is a function that a component uses to know what to render is technically a “render prop”.

  • So instead of using render props you can use children props instead, and not even refer to it as a prop but just put it as a JSX child

<Component>
    {state => <div> {state.x} {state.y} </div>}
</Component>

Cross Cutting Concerns

https://stackoverflow.com/questions/23700540/cross-cutting-concern-example

Forms in React

Uncontrolled

  • Basically grabbing value of input from input field using 'ref' //TODO: look up more info on ref

Controlled

Managing State

  • this.props is added by React and this.state is special

  • this.setState({}) causes React to re-render the component

  • Don't change state directly because this.setState may overwrite your changes.

  • React may batch multiple setState() calls into a single update for performance, so you can't depend on state or props being the value you want after setState()

  • ^ fix for this: can use the callback option of setState that takes (prevState, props)

  • It seems like only UI changes should be considered state changes and it is bad practice to store data as state.

  • Usually state is managed by the most common ancestor or a managing component that is higher up. State is then passed down as props and updates are based back up through function props.

Lifecycle Hooks

Mounting

constructor() componentWillMount() render() componentDidMount()

Updating

componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate()

Unmounting

componentWillUnmount()

Error Handling

componentDidCatch()

Create-React-App

  • react-script is the engine that starts react.
  • is webpack in the only way to run a react server and test for development?...
  • ^ check webpack-dev-server

React-Router

React Router is dynamic Routing

  • Dynamic Routing vs Static Routing
  • ^ Link 2 (Look at the second answer, the first answer touches upon a different point about React-Router and not about Dynamic Routing (kinda but not really, more like dynamically creating React-Router routes)...
  • ^ Dynamic Routing: Routes are determined after render and know which component to render
  • ^ Static Routing: Routes are defined in server before render
  • https://github.com/ReactTraining/history

BrowseRouter

Link to=[{object}|'string'] replace=bool innerRef={function} attributes

  • ^ to: can be a string for the new location or an object with {pathName, search, hash, state}
  • ^ replace: replaces previous item on history stack
  • ^ innerRef: callback?
  • can pass attributes

NavLink

Redirect

Route path='string' exact=bool strict=bool sensitive=bool component|render|children

  • ^Renders a component when a matches a path

Location

  • ^ The router will provide you with a location object in a few places: Route component as this.props.location Route render as ({ location }) => () Route children as ({ location }) => () withRouter as this.props.location

Links

  1. https://github.com/facebook/react/issues/9681
  2. https://stackoverflow.com/questions/46096518/what-exactly-is-dynamic-routing-in-reactjs
  3. https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf
  4. https://www.fullstackreact.com/30-days-of-react/
  5. https://www.fullstackreact.com/p/using-webpack-with-create-react-app/

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

⚠️ **GitHub.com Fallback** ⚠️