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

• 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 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
  		)
  	}
  }