React is a library for creating user interfaces

  • Declarative – meaning that our program describes the final result and not the steps, as opposed to being imperative (style of programming where we write out step by step what to do)
  • Virtual DOM – Creates a representation of the DOM, the virtual DOM. Can then update the real DOM based on the minimal changes in the virtual DOM.

JSX
Components include both HTML and JS code, which is made possible by using the JSX language (X stands for XML). Needs to be compiled, with a tool like Babel.

var link = (
  <a href="#">My Name</>
);

Component
Idea of splitting the app into individual pieces that can be re-used and shared.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>
};

Props
React attributes are known as props, they enable components to talk to each other. Reacts data flow is unidirectional, meaning that data can only go from parent to children.

State
Sometimes a component may need to work with data that doesn’t come from a parent component (such as a select, or input). This is where state comes in. It’s worth nothing that a components state can be passed onto it’s children as a prop. In practice, the vast majority of data in a React app will be a prop. It’s only when you need to accept user input that you’ll use state to handle the change.

A good metaphor to understand the difference between props and state would be the Etch-A-Sketch. Unlike things like the body color and dial position of the Etch-A-Sketch tablet (props), the drawing itself (state) is not an inherent property of the Etch-A-Sketch. It’s just the temporary result of user input.

propsTypes
An object that contains all the keys a component can take, as well as a type definition. Throws an error in the React console and is good practice as helps with debugging and readability.

Application.propTypes = {
  title: React.PropTypes.string,  
};

defaultProps
Defines the default values of the props

Application.defaultProps = {
  title: 'The title',  
};

ReactCSSTransitionGroup
Add classes to elements using React CSS add-on.

return (
  <div>
    <button onClick={this.handleAdd}>Add Item</button>
    <ReactCSSTransitionGroup
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={300}>
      {items}
    </ReactCSSTransitionGroup>
  </div>
);

Examples
Stateless mockup example

 

Refs/Reading

JSX – Build with React
The 5 things you need to know about ReactJS – React JS news
UI Animations with React – Joe Davis
Why React PropTypes are important – wecodetheweb
React.js Introduction For People Who Know Just Enough jQuery To Get By – http://reactfordesigners.com

Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.

View