Starting React Again

I’m starting React again! I did a class with React a while ago but I don’t think the instruction in that class matched up with how I can take things in. Now I’ve found a different course to use and started that today. Here are some of my notes for future reference:

Browser Dev Tools & React

One little shortcut I want to remember in the dev tools is the $0 trick…in dev tools if you click on an element, you can then reference that element in the browser by calling on $0.

With the React dev tools installed (it’s a Chrome/Firefox extension), you can do something similar for React components and type $r…it will show all the data attached to the object including props, state, etc. Sounds like this will be helpful with debugging in the future.

Basic React Component

import React from "react";

class ComponentName extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Some JSX all in one element</h1>
        <h2>!! No sibling elements allowed!!</h2>
        <h3>Alternatively use the React Fragment to wrap siblings</h3>
        <h4>{this.props.subheading}</h3>
      </React.Fragment>
    );
  }
}

export default ComponentName;

Note that if the point of this component is just to render the HTML above, it’s called a stateless functional component and can be written as a function instead:

const Header = props => (
  <header className="top">
    <h1>
      Catch
      <span className="ofThe">
        <span className="of">Of</span>
        <span className="the">The</span>
      </span>
      Day
    </h1>
    <h3 className="tagline">
      <span>{props.tagline}</span>
    </h3>
  </header>
);

Some JSX Gotchas

class is a reserved word in React so to add a class attribute to an HTML element, you have to use className
JavaScript and HTML comment syntax won’t work; comments have to be wrapped in curly braces and JS block comment syntax: { /* comment goes here */ }

Other Stuff

Actually I finished the course!

It was an all-day marathon but I’m glad I learned a lot. Now to try to apply it to GFT.

By the way I also got all the venues loaded into GFT this morning before starting React.

Up Next

Need to learn about using React with Postgres instead of Firebase (what we learned in the course), and how passing data will work in my app…then do it!