Jump to Categories


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.

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</>

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

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

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.

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.</blockquote>

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.

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

Defines the default values of the props

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

Add classes to elements using React CSS add-on.

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

Stateless mockup example



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