Tutorials/ReactForBeginners/Videos.md

React for Beginners

• Video course: https://reactforbeginners.com/account

Video 1: Tooling

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

Video 2: Thinking and Understanding React Components

• https://facebook.github.io/react/docs/react-component.html

• React applications are split into components which share information over different ways like state and properties.

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:

• Docs: https://github.com/ReactTraining/react-router/tree/master/docs

• Use context types:

  // MyComponent.js
  MyComponent.contextTypes = {
  	router:  React.PropTypes.object
  }
  

• This gives access to these functions:

  • blockTransitions
  • createHref
  • replaceWith
  • transitionTo

• Usage:

  this.context.router.transitionTo('...')
  

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