Quick things to remember before you hop into react (js frame of mind)

• define variables with let and const statements. React is good with ES6 so we don't use that dirty word: var.

• classes: unlike with objects, you don't need to put commas between class method definitions. Also, the value of the class within a method depends on how it's called.

• arrow functions:

They're like regular functions, but shorter. For example, x => x * 2 is roughly equivalent to function(x) { return x * 2; }. Importantly, arrow functions don't have their own this value so they're handy when you want to preserve the this value from an outer method definition.

JSX is a syntax extension to JavaScript. It helps describe what the UI should look like--kind of like a template language (like handlebars). It has full JS powers and produces React "elements" (wtf does that mean?).

JSX enables us to have rendering logic, logic, and UI logic, markup, side by side and separated only by concern, into loosely coupled units called "components".

You don't have to use JSX to use React, but it can be a helpful visual aid when working with UI and also gives better error messages.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

here you can see a function called inside the {} space, modifying that user variable. The user variable alone or any other type of js could have been in there. Cool, huh?

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. Meaning that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions!

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

if there's a user, the page will render a hello to the user, if not, Hello Stranger on the screen.

Just don't use quotes around your curly braces. Either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute. Also this PSA:

Warning: Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.

So here's a string

const element = <div tabIndex="0"></div>;

And now for a js expression. COOL!

const element = <img src={user.avatarUrl}></img>;

...or don't, and just close off that empty tag with a />. Otherwise:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Much like in the real world, the smallest building block of React apps is an element.

Tip: We recommend using the “Babel” language definition for your editor of choice so that both ES6 and JSX code is properly highlighted.

sources

react docs 1-3

brushing up for react: reintro to js

3 rules for react from js

skim this

sass

cheatsheets

dev hints for sass

dev hints for react

and one more