React Rules

components.md

To Table Of Contents

Components

Components are an integral part of react. Every part or a react app, from an individual list item, to the app itself is setup as a component. there are a few ways to think about the structure of a component, and your major choices are: Class Component, or Function Component. React Docs on Components and Props

Class Components use:

Render()

the render function is made to determine what should be rendered to the dom, when the component is used. you should use a return block to set what will be returned from running render. This function is a requirement of a Component.

return

The return block is JSX, and will let you return ONE parent element (along with nested elements) written in html-like fashion.

1. you cannot return more than one element, so siblings will not work: i.e.

// BAD
return (
  <h1> hello! <h1>
  <h2> This is me </h2>
)

// GOOD
return (
  <div className="intro">
    <h1> hello! <h1>
    <h2> This is me </h2>
  </div>
)

// When in doubt, <div> it out!

2. as the above example shows, you cannot use the javascript-reserved keyword class when writing your JSX, so you have to use className when referring to an html class.

3. all tags, including typical self closing tags like <br> or <img> must be explicitly closed, like <br /> or <img />

4. if you need to set a comment within a return block, you must put it inside the parent being returned

\\ BAD
return (
  // hello there
  <div>
  ...

\\ CLOSE
return (
  { /* hello there */ }
  <div>
  ...
  
\\ GOOD
return (
  <div>
  { /* hello there */ }
  ...
 

Otherwise, you set a comment outside the return block, like a normal // js comment.

Props

A prop is an attribute, or PROPertieS of a given component. in order to set up props, you:

1. set them up on the component, as you would an html attribute:

class Title extends Component

render() {
  return (
    <div className="title">
      <h1>{this.props.firstName}</h1>
      <h2>{this.props.hometown}<h2>
...

2. Use them when rendering the component itself:

  ... // inside App.js, inside it's render function, which will be sent to the DOM
  <Title firstName="kara" hometown="Denver" />
  ...

this.props is an instance object that you have access to for every component being rendered. when you want to access properties of a given component, you can ask via this.props

Stateless Function Components use:

.... nearly nothing! If you have no need for establishing state within your component, or using the React Lifecycle, it's best to use a SLC, or Stateless Functional Component.

const + Arrow

instead of inheriting from React.Component, you declare the SFC with const, and pipe it through an arrow function.

//you'll still need to import React from 'react', but no need for component!

const Header = () => {
...
}

return

In the case of a SLC, you don't need to explicitly use render(). Instead, you can return a JSX object:

const Header = () => {
  return (
    <div className="container">
      <h1>My Cool Website</h1>
    </ div>
  )
}

props, but not THIS props!

Because we're not working within the bounds of a component class, we don't need to use this.props. instead, if this component needs props passed in, they'll be passed in as props.

const Header = (props) => {
  return (
    <div className="container">
      <h1>My Cool Website</h1>
      <h2> By {props.firstName}</h2>
    </ div>
  )
}

events.md

To Table Of Contents

Synthetic Events

React's event system handles events by wrapping them in what's called a Synthetic Event. the purpose is to deal with cross-browser behaviors. Docs on SyntheticEvent object

1. listen for an event

The first step would be to use one of the event types, from the long list of synthetic events you can listen for, and set it as an attribute on the jsx that you'd like to listen from. Note that you'll be using syntax much like jQuery, i.e. onClick or onChange

Event Binding

As we always do, we need to ensure that we're using the context in which the event is happening, so we can use the appropriate object data. This requires us to bind our event to the component as a whole. not just on the render function. to do that, we need to bind this. There are a few ways of doing that:

a. bind in the event Handler

... // inside the render function, on the event handler
<button onClick={this.loadPuppies.bind(this)}></button>

b. bind with Arrow Function

... // inside the render function, on the event handler
<button onClick={(e) => this.loadPuppies(e)}></button>

c. bind in the constructor

... // inside the constructor
  this.loadPuppies = this.loadpuppies.bind(this);

d. removing bind with property initializer

currently there's a proposal to use Class Fields and Static Properties thanks to babel, we can use features from ES8 NOW!. Instead of using the constructor option for event binding, we can translate our event function into a Property Initializer:

// BEFORE:
... // inside the constructor
  this.loadPuppies = this.loadpuppies.bind(this);

... // the event function
  loadPuppies(newPuppies) {
    this.setState({
      puppies: newPuppies
    });
  } 
... // inside the render function, on the event handler
  <button onClick={this.loadPuppies}></button>

  
  
// AFTER:
  loadPuppies = (newPuppies) => {
    this.setState({
      puppies: newPuppies
    });
  }; // this semicolon is IMPORTANT!
 
... // inside the render function, on the event handler
  <button onClick={this.loadPuppies}></button>

To use, or not to use ()

2. make function triggered by event

preventDefault

if your event triggers a reload, like an onSubmit, you'll want to be sure to setup a PreventDefault in the function:

 loadPuppies(event, newPuppies) {
 event.preventDefault();
 ...

Don't Touch The DOM!

Use Props ?

Use Refs ?

$r in the console

react rules.md

Table Of Contents:

1. Components

2. Events