# 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 ```javascript // MyComponent.js import React from 'react' class MyClass extends React.Component { render ( return(
) ) } export default MyClass ``` * Render it on the HTML ```javascript // index.js import React from 'react' import { render } from 'react-dom' import MyComponent from './MyComponent' render(, 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 ```javascript 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 ```javascript ``` * access variables via props ```javascript class MyComponent extends React.Component { render( return(

{this.props.myProp}

{this.props.myObj}

{this.props.onClick}

) ) } ``` ## Video 8: Stateless Functional Components * If component has just a return function, you can use a stateless functional component * replace class MyClass ... with ```javascript const MyFunction = (props) => { return(

{props.myProp}<\/p>

{props.myObj}<\/p>

{props.onClick}<\/p> ) } ``` ## Video 9: Routing with React Router * Don't render component directly, but router ```javascript // index.js import { BrowserRouter, Match, Miss } from 'react-router' const Root = () => { return ( <\/BrowserRouter> ) } render(, 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: ```javascript { 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: ```javascript class MyClass extends React.Component { constructor () { super() this.myFunction = this.myFunction.bind('this') } myFunction (event) { this.nowAvailable('!!!') event.preventDefault() } render () { return (

test<\/p>

{this.myFunction(e)}}>test<\/p> or

test<\/p> Needs constructor hack ) } } ``` ## Video 12: * Docs: https://github.com/ReactTraining/react-router/tree/master/docs * Use context types: ```javascript // MyComponent.js MyComponent.contextTypes = { router: React.PropTypes.object } ``` * This gives access to these functions: - blockTransitions - createHref - replaceWith - transitionTo * Usage: ```javascript 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 ```javascript 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 ```javascript 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 ( ) } ``` * 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 ```javascript ... render () { return (