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

Videos.md 3.5 KB Geçmiş Ham