React for Barbarians

How to build user interfaces using JavaScript

Created by Antonio Felguerez

Things you should know about:

• HTML
• CSS
• The DOM (Document Object Model)
• Optional but encouraged:
  • JavaScript modules (npm, CommonJS, AMD)
  • ES6 (optional)

React is

• a JavaScript library for building user interfaces
• "the V in MVC"
• Virtual DOM

Virtual DOM

Manipulating and changing the real DOM is expensive, so React manages a virtual DOM for efficiency

The React DOM calculates differences and only updates the real DOM when necessary

• Tree-like structure (just like HTML!)
• Component-based
• "Custom HTML" with JavaScript inside
• Most similar to Angular directives
• React Native

Writing a React Component

						
// Let's create a React component called HelloMessage
var HelloMessage = React.createClass({
  // React.createClass() takes an object.
  // `render` is the only required property.
  // write HTML inside of the `render` function.
  render: function () {
    return (
      <div>
        <h1>hello</h1>
      </div>
    )
  }
});
						
					

Rendering a React Component

						
// React.render is a function that takes two arguments:
// 1. What you want to render
// 2. Where to render it
React.render(< HelloMessage />, document.body);

						
					

Writing a React Component

• HTML inside of JavaScript (JSX)
• render is the only requirement
• render returns HTML and React components (i.e., "UI elements") that the component will create in the DOM

Learn More

• React documentation
• React-Native documentation
• Egghead.io React lessons
• react.rocks – example reusable components
• React-Bootstrap