Videos.md 8.6 KB

React for Beginners

Video 1: Tooling

  • create-react-app
  • use Webpack
  • Sublime editor
  • React dev tools

Video 2: Thinking and Understanding React Components

Video 3: Our First React Component

  • Write first component

    // MyComponent.js
    import React from 'react'
    
    class MyClass extends React.Component {
    	render (
    		return(
    			<div></div>
    		)
    	)
    }
    
    export default MyClass
    
  • Render it on the HTML

    // index.js
    import React from 'react'
    import { render } from 'react-dom'
    import MyComponent from './MyComponent'
    
    render(<StorePicker />, document.getElementById('main'))
    

Video 4: Write HTML with JSX

  • You can write HTML code directly in return functions within parentheses.
  • Wes blog post about how to use emmet in babel
  • need to replace class tags with className, because class is sth different in JS
  • Can only return one parent element (need to wrap the children)
  • HTML comments have to be inside {/**/} in JSX AND inside parent element.

Video 5: CSS

  • Can be in HTML head
  • Can also be included with

    import './style.css'
    
  • Processed by Webpack

Video 6: Create Application Layout with Components

  • decide how to organize the app with sub-components

Video 7: Passing Dynamic Data with props

  • add attributes to components

    <Component myProp='data' myObj={JSObj} onClick={doSth}>
    
  • access variables via props

    class MyComponent extends React.Component {
    	render(
    		return(
    			<p>{this.props.myProp}</p>
    			<p>{this.props.myObj}</p>
    			<p>{this.props.onClick}</p>
    		)
    	)
    }
    

Video 8: Stateless Functional Components

  • If component has just a return function, you can use a stateless functional component
  • replace class MyClass ... with

    const MyFunction = (props) => {
    	return(
    		<p>{props.myProp}<\/p>
    		<p>{props.myObj}<\/p>
    		<p>{props.onClick}<\/p>		
    	)
    }
    

Video 9: Routing with React Router

  • Don't render component directly, but router

    // index.js
    import { BrowserRouter, Match, Miss } from 'react-router'
    
    const Root = () => {
    	return (
    		<BrowserRouter>
    			<Match exactly pattern='/' component={MyComponent} \/>
    			<Match pattern='/mystuff/:myarg' component={MyStuff} \/>
    			<Miss component={OhNo} \/>
    		<\/BrowserRouter>
    	)
    }
    
    render(<Root />, document.getElementById('main'))
    
  • (Video 18): the ':myarg' will be available as this.props.params.myarg

Video 10: Helper and Utility Functions

  • Organize helper functions in separate files.

Video 11: Working with React Events

  • Works as regular JS events, but adds cross-browser compatibility
  • Think about what event to handle
  • Think about, at what level the event should be handeled and pass the function down to the component via props.
  • Reference form elements as follows:

    <input type='text' ref={(input)=>{ this.whateverName = input }}
    
  • now you can access it through 'this'.

  • You have to bind 'this' in functions other than render

  • See this example with event handling:

    class MyClass extends React.Component {
    	constructor () {
    		super()
    		this.myFunction = this.myFunction.bind('this')
    	}
    	myFunction (event) {
    		this.nowAvailable('!!!')
    		event.preventDefault()
    	}
    	render () {
    		return (
    			<p onClick={this.myFunction.bind(this)}>test<\/p>
    			<p onClick={(e) => {this.myFunction(e)}}>test<\/p>
    			or
    			<p onClick={this.myFunction}>test<\/p> Needs constructor hack
    		)
    	}
    }
    

Video 12:

Video 13: Understanding State

  • Whenever you want to change anything on your page, you change the state data instead.
  • Put the state on the main parent component
  • Initialize with

    class App extends React.Component {
    	constructor () {
    		super()
    		this.state = {
    			child1state = {},
    			child2state = {},
    		}
    	}
    	render (
    		return (
    			...
    		)
    	)
    }
    
  • When changing the state, you must avoid race conditions. Follow this scheme:

    • make a copy of the state
    • update the copy
    • set the state with copy

      class App extends React.Component {
      	constructor () {
      		super()
      		this.addChild1StateElement = this.addChild1StateElement.bind(this)
      	}
      	addChild1StateElement (elem) {
      		const child1state = { ...this.state.child1state }
      		child1state['new-item'] = elem
      		this.setState({ child1state })
      	}
      	render (
      		<ChildComponent addElem={this.addChild1StateElement} \/>
      	)
      }
      
  • Create state manipulating functions on the main component and pass it to the children through props.

Video 14: Loading Data Into State On Click

  • Can be used to load an initial object to the state.

Video 15: Displaying State with JSX

  • Dynamically generate HTML tags based on state data
  • React recognizes state changes and re-renders the data
  • Example for

    ...
    	render () {
    		return (
    			<ul>
    				{Object.keys(this.state.child1state).map(key => 
    					<ChildComponent key={key} details={this.state.child1state[key]}\/>
    				)}
    			<\/ul>
    		)
    	}
    ...
    
  • each element in a loop needs a 'key' attribute, so React can keep track!

  • if you pass down 'key' itself, use a different name, e.g. index!

  • use data massaging to extract variables for easier access

    const { details } = this.props
    

Video 16: Updating Order State

  • emphasizing if you pass down 'key' itself, use a different name, e.g. index!

Video 17: Displaying Order State

  • Use Object.keys(...).reduce((prevValue, key)=>{...}, initValue) to make a scalar of an object.
  • Don't forget to check is elements are valid (can change in real-time).

Video 18: Persisting State with Firebase

  • Uses 're-base' to sync state with firebase web app
  • https://facebook.github.io/react/docs/state-and-lifecycle.html
  • use componentWillMount() to sync the state before the component loads.
  • this way, the component will render only once.
  • How to use react-router parameters
  • use componentWillUnmount() to stop syncing with the database.

Video 19: Persisting Order with localstorage

  • Uses cookies to store data locally
  • use componentWillUpdate(nextProps, nextState) in this case, because it is called every time state or props is updated.

    ...
    	componentWillMount () {
    		const localStorageRef = localStorage.getItem('mykey')
    		if (localStorage) {
    			this.setState({ order: JSON.parse(localStorageRef) })
    		}
    	}
    	componentWillUpdate () {
    		localStorage.setItem('mykey', JSON.stringify(nextState.mykey))
    	}
    ...
    
  • use shouldComponentUpdate() to check data before it is rendered. Returns true if component should be re-rendered or false if not.

Video 20: Bi-directional Data Flow and Live State Editing

  • When you write forms,
  • You can used computed properties

    ...
    	handleChange (event, key) {
    		const prev = this.props.prevs[key]
    		const next = { ...prev, [event.target.name]: event.target.value }
    		this.setState(next)
    	}
    	render () {
    		return (
    			<input type='text' name='name' value={thing.name} placeholder='Thing name' onChange={(event) => this.handleChange(event, key)} \/>
    		)
    	}
    ...
    

Video 21: Removing Items From State

  • CRUD - Create Read Update Delete
  • javascript ... deleteElement (key) { const child1state = { ...this.statte.child1state } child1state[key] = null this.setState({ child1state }) } ...

    * You can store JSX in a variable.
    
    ## Video 22: Animating React Components
    * use npm package concurrently to concurrently start npm scripts
    * use CSSTransitionGroup from 'react-addons-css-transition-group'
    * adds and removes again classes to animated items
    * class items can be styled with CSS
    * replace parent element of animation
    - e.g. <ul className='myclass'> becomes <CSSTransitionGroup className='myclass' component='ul' transitionName⁼'mytrans', transitionEnterTimeout={100} transitionLeaveTimeout={200}>
    

    stylus

.mytrans background blue max-height 0px transition all 0.5s transform translateX(-120%) ... &.order-enter-active background yellow max-height auto transform translateX(0) ```

  • The time in transitionEnterTimeout should match the transition all <>s
  • There are three actions:
    • enter
    • leave
    • appear

Video 23: Authentication