Skip to content

Latest commit

 

History

History
186 lines (135 loc) · 5.46 KB

Udemy_react-16-the-complete-guide.md

File metadata and controls

186 lines (135 loc) · 5.46 KB
Raw

React 16 - The Complete Guide (incl. React Router 4 & Redux)

https://www.udemy.com/react-the-complete-guide-incl-redux/ Created by Maximilian Schwarzmüller

Section 1: Getting Started

Video 2

Components can be considered custom HTML elements. Easy to define specifically and reuse.

Video 3: Real-World SPAs & React Web Apps

Can think of reusable components like JS modules but extended to include markup.

Video 5: Writing our First React Code

  • CodePen quick add React, ReactDOM, Babel, etc.
  • When writing JSX, good to note that it just gets compiled into regular JS, so the leap from JSX to vanilla JS and injecting DOM elements as strings of HTML markup isn't too far off.

6. Why Should we Choose React?

  • Allows UI state to be more easily managed than via vanilla JS.
    • For instance, changing the order of DOM elements targeted by querySelector might cause issues
  • React allows us to focus on business logic

8. Understanding Single Page Applications and Multi Page Applications

Single-page app

  • One HTML page, with content (re)rendered on client
  • Rendering on client side allows us to create reactive UX. Even if it's a loading spinner, it's designed UX.
  • One root app component is mounted to DOM
    • One ReactDOM.render() call

Multi-page app

  • Multiple HTML pages, content is rerendered on server
  • React components might be sprinkled in to regular markup in order to allow the addition of an interactive feature
    • One ReactDOM.render() call per component

Section 3: Understanding the Base Features & Syntax

30. Understanding JSX

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Yo</h1>
      </div>
    );
  }
}
  • Although it's not actually visible, this return statement is the equivalent of calling React.createElement() with the appropriate parameters as below
return React.createElement('div', {className: 'App'}, React.createElement('h1', null, 'Yo'));
  • This is why we always have to import React, and it helps illustrate how JSX is transformed into JS, despite looking like HTML
    • It's not simply something like innerHTML with a string of markup
return (
  • The parenthesis here are just to allow us to write a multiline return

31. JSX Restrictions

  • Typically want to return one root div with all other content nested inside
  • Root div would also have the name of the component as its class name

42. Manipulating the State

this.setState()
  • setState() is a method inherited from the react Component class
  • It will merge in updated component state properties rather than redefining the entire state object

44. Passing Method References Between Components

<Person
  addSymbol={this.addSymbol.bind(this, person.symbol[0])}
/>

<Person
  addSymbol={() => this.addSymbol(person.symbol[0])}
/>
  • Both methods allow us to pass arguments into a callback, but using bind is preferable for performance reasons

46. Adding Styling with Stylesheets

import React from 'react';
import './Person.css';

export default function(props) { // Inside Person.js, so this is the Person component
  • Webpack will automatically recognise that we've imported this file and inject an autoprefixed style tag into our HTML element
    • Will these styles be included if this component is not initialised or rendered to the DOM?

Section 4: Understanding the Base Features & Syntax

50. Rendering Content Conditionally

  • Only simple expressions in JSX brackets, so no if() because no blocks
  • Ternary or short circuiting are options, but might make code a bit convoluted if overused
{ this.state.isExpanded ?
    <div>
      <Person />
    </div> : null
}
{ this.state.isExpanded &&
    <div>
      <Person />
    </div>
}

51. Rendering Content Conditionally

  • Best practice is to keep the returned JSX clean and avoid overloading with conditional logic
  • Because a state change will always trigger the render() function, we're sure that simply using {person} in the JSX will be in sync with state
render() {

  let people = null;

  if(this.state.isExpanded) {
    people = (
      <div>
      { this.state.people.map((person, index) =>
        <Person
          key={person.id}
          addSymbol={this.addSymbol.bind(this, person.symbol[0])} />)}
      </div>
    );

    return (
      <div className="App">
        <button onClick={this.togglePeople}>Switch Name</button>
        {person}
        <input type="text" onChange={this.handleInputChange.bind(this)} value={this.state.textValue} />
      </div>
    );
  }

56. Lists & Keys

  • Using an index from map() as a key is no good because the index value will change if the data set changes, while a key should be a unique identifier that is consistently associated with a DOM element

57. Flexible Lists

handleInputChange = (e, index) => {...};

...

<Person
  handleInputChange={(e) => {this.handleInputChange(e, index)}} />
  • Using an arrow function, the event argument is passed in the arrow function and callback, so it can be the first parameter in the callback function declaration
handleInputChange = (index, e) => {...};

...

<Person
  handleInputChange={this.handleInputChange.bind(this, index)} />
  • Using bind prepends the index argument, so the event parameter (here e) must come after the other parameters in the function declaration