React Notes

react-notes.md

React Notes

JSX is a JavaScript syntax extension that looks similar to XML. You can use a simple JSX syntactic transform with React.

You don't have to use JSX with React. You can just use plain JS. However, we recommend using JSX because it is a concise and familiar syntax for defining tree structures with attributes.

React can either render HTML tags (strings) or React components (classes).

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces ({}) instead of quotes ("").

// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

Data passed from parent to children components is called props, short for properties.

Gotchas

• Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

• https://facebook.github.io/react/docs/jsx-gotchas.html

Tooling

• https://github.com/facebook/react/wiki/Complementary-Tools
• React Developer Tools for Chrome

Pros/Cons/Considerations

• Fairly lightweight. ~128KB minified. Bear in mind that this is only the "V" in your MVC.
• Backed by FB. Very active project development.
• Starting to be used by other major tech companies, eg Yahoo.
• Requires transpiling for JSX usage. This may be an issue when linting. Need to look into this more.