barkerja/About.md

## About.md

      
    Raw
  

              About.md
            
          
    React.js

What is React.js?

React is a "declarative, efficient, and flexible Javascript library for building user interfaces." It was created by Facebook, first deployed in 2011, and was open-sourced in 2013. It is one of many answers to everyone's favorite question: "how should we structure Javascript applications on the web?"
Goal:

Minimize the amount of mutation that developers have to deal with by totally redoing the view every time that the data on a page changes. The developer writes the code for the page's first load but never has to account for modifications since every change to the page is treated like that initial render!
Challenges:

Very poor performance, UX implications (ex. What if you're typing in a text area when other data in that form changes? You lose everything that you typed. Ugh.)
Solution: React!

Right now, React is the sixth most 'starred' repository on GitHub. React does not require the use of a specific technology stack. It's frequently used as the 'V' portion of your MVC, but it can also be combined with other front-end frameworks such as Angular, Backbone, or Ember to speed up rendering time.
How it works

Initial Render

One render function:

render: function() {...} 
This initial render calls the render functions for each component on the page, collecting a huge string of markup and injecting it into the DOM.
Two pass rendering:

######Generate markup
First, generate the string of markup described above.
######Attach events
Then, when Javascript is ready, attach event listeners.
Rendering can happen anywhere, including on the server. Server-side rendering is built into React.
Page Updates (Reconciliation)


React automagicically updates the DOM as data changes, keeping the view and the data in sync.

#####What? How?

When something on the page changes, call render again and compare the result to the initially rendered page. Based on the differences between them, React prepares a batch of DOM mutations for only the changed elements and renders them in the view.
Virtual DOM: React.js works quickly by keeping a 'virtual DOM.' When React receives a command to update the UI, it compares the new string of markup to the existing DOM, via the Virtual DOM, and only changes the pieces of the view that were modified.


Example:

var React = require('React');

var HelloWord = React.createClass({
  render: function() {
    return (
      React.createElement('h1', null, 'Hello World');
    );
  }
});

ReactDOM.render(<HelloWorld />, mountNode);
// mountNode is the place on the page where you want to stick <HelloWorld/>

JSX

Fortunately, React is typically written using JSX. JSX is a Javascript syntax extension that looks like HTML and gets processed into Javascript. It makes working with and reading React much more intuitive.
Example with JSX:

var React = require('React');

var HelloWord = React.createClass({
  render: function() {
    return (
      <h1>Hello World</h1>;
    );
  }
});

ReactDOM.render(<HelloWorld />, mountNode);

Example with dynamic content:
var Greet = React.createClass({
  render: function() {
    return <div> Hey {this.props.name}</div>;
  }
});
ReactDOM.render(<Greet name="Class" />, document.body);

Components

React breaks the UI down into individually designed components. This practice makes your codebase easily maintainable and resusable. Writing and compiling components effectively requires understanding two major concepts:
Props:

Arguments passed to a component, much like HTML tag attributes (ex. name in the example above). Components can take callback functions as properties. It is best to think about props as a way to pass data from parent to child elements.
State:

Used on interactive components by setting an initial state. State contains information that decides whether a UI update is necessary. It is best to think about state as the way that a component looks at a given point in time.
Resources


[React.js Documentation] (http://facebook.github.io/react/) Source code and docs


[Introduction to React.js] (https://www.youtube.com/watch?v=XxVg_s8xAms) Youtube video of a presentation at Facebook. Highly recommended as a starting point if you want to use React.


[Buildwithreact.com] (http://buildwithreact.com/) Tutorials, blog articles, and more


[React Cheatsheet] (https://github.com/azat-co/cheatsheets/tree/master/react)


[React Rocks] (https://react.rocks/) Lots of cool things built with React