Intro to React

Hello world

What is React?

"Angular directives on crack."

- Joe Alves

What is React?

A library for creating user interfaces
React is a library for building views
- Think of it as a library for building and interacting with the DOM entirely with JavaScript
Built around composability - everything is a component
Declarative - no two-way data-binding

What ISN'T React

A full framework like Angular
- Just a view layer - you don't get as much out of the box
- Can be a lot more work to get up and running
As mature as Angular - Angular's initial release was 2009; React's was 2013
- You are more likely to encounter fluctuation in features/documentation

Why React?

According to the React team: We built React to solve one problem: building large applications with data that changes over time
- React is built to be scalable - reusable components are its main building block
React is pretty fast to render

Let's say hello

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
    <!-- Loads React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <!-- Loads ReactDOM -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <!-- Loads Babel -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
        // our React code will go here for now
    </script>
  </body>
</html>

Welcome to the world

const App = React.createClass({
    render: function () {
      return <h1 className="greeting">Hello World!</h1>
    }
  });

  ReactDOM.render(
    <App />,
    document.getElementById('content')
  );

Our first component

Okay, what's going on?

Two namespaces: React and ReactDOM
Use React.createClass to create a component
- Object with a render method
- The render method renders JSX
ReactDOM.render takes two arguments
- The root component
- A DOM element to render into

JSX

JSX is syntactic sugar that React will compile
- <h1 className="greeting">Hello World</h1>
- React.createElement('h1', {className: 'greeting'}, 'Hello World')
JSX is optional, but do you really want to create elements the second way?
JSX is JavaScript - this is why we assign classes using className (the DOM API equivalent to the HTML class attribute)

const Worlds = React.createClass({
    render: function () {
        return (
            <ul>
                <li>Earth</li>
                <li>Krypton</li>
                <li>Valhalla</li>
            </ul>
        );
    }
});
const App = React.createClass({
    render: function () {
        // important: only one parent node
        return (
            <div>
                <h1>Hello world</h1>
                <p>Which world are you from</p>
                <Worlds />
            </div>
        );
    }
});

ReactDOM.render(
    <App />,
    document.getElementById('content');
)

Using Components

Beyond Hello World

TMTOWTDI, because of course there is
- React.createClass
- class App extends React.Component
- stateless functional components
Respect the learning curve: your first React applications are not going to be as robust as what you can now create with Angular

Resources

https://facebook.github.io/react/index.html
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout