Intro to React
Oh hurrow React.js
In this tutorial we’re going to go through the basics of React. We will render a list of posts that we return via a ajax query. This will not be fully functional as I’m also a beginner to react. I’ll cover what I know.
React exists to update apps and websites in response to constant changes in data. React is only the view layer. So if you want to make an http call or model data you need other tools. For our trivial example jQuery is sufficient. To use react for all the capabilities of angular.js you need other tools. Facebook advises to use the Flux pattern. This is not a library but instead an idea. I found that incredibly unhelpful. I think it is best to not take flux to seriously. If you start coding consistently in react best practices will become apparent. Right now many things are being forged out. Angular has a head start as far as best practices are concerned, but that could all go out the window when Angular 2.0 comes out. This will be a gentle introduction to what this whole react thing is.
React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM.
render methods return a description of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
Then in js/app.jsx we’ll render content to the screen.
This is a common pattern, but instead of rendering html to the screen like this, most apps will render a component.
Everything you build in React will be a component. React is more simple than angular because it does less. Everything in react is a component. React is only the view.
Think of components as simple functions that take in “props” and “state” and render HTML. The component can only return one html node, in this case that’s an
<h1>. JSX is similar to normal HTML but not the same.
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it’s easy to keep your UI consistent.
In React, you simply update a component’s state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
This Here we call to get “posts” from a backend and render a list to the page. The key is necessary for react when rendering a list of elements. We use jQuery here for its ajax functionality. In React, an owner is the component that sets the props of other components. So through the owner component
<App /> we set the state and pass that as a property to the List function. In React, data flows from owner to owned component through props. is the magic of JSX with React.
setState(data, callback) informs React of data change. This method merges data into
this.state and re-renders the component. When the component finishes re-rendering, the optional callback is called. Most of the time you’ll never need to provide a callback since React will take care of keeping your UI up-to-date for you. More magic in the docs.
Components have a lifecycle for when they are being added, changed or removed from the DOM. For each stage of the lifecycle we can call a function. Here are some prominent lifecycle states:
componentWillMount Invoked once before being added to the DOM
componentDidMount Invoked once when component is added to the DOM. Ajax requests and interactions with other libraries go in this method.
componentWillUnmount Invoked before a component is removed from the DOM.
Facebook’s React Getting Started Guide
Eventedmind is good, costs money.
On the other hand, React has a steep learning curve and does not provide all the functionality I want. I am not familiar with Backbone and implementing thing the “Flux way” might be another headache. Routing is another concern. Maybe in the future I will look into something like react-router. I am excited for the React ecosystem to mature and for the Angular 2.0 release to implement features pioneered by React. Everyone can win!
To dig in more, check the SOURCE CODE. (Pull requests are welcome)