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
Intro to React
By Tom Kelly
