Skip to content

React.js#

What is React.js#

Javascript library for User Interfaces

  • Open Source
  • Built by Facebook
  • Just a View
  • High Speed Virtual DOM
  • Uses JSX Syntax

Why is React so fast?#

  • Reading and writing to the document object model (DOM) is slow
  • JS Objects faster that the DOM
  • React only reads from the virtual DOM
  • React only writes to the real DOM
  • No polling, when rendering only necessary changes are sent to the real DOM

Developer Tools#

  • react-detector - lets you know when react is there
  • react-developer-tools - check react elements
  • ctrl + optn + j / ctrl + shift + j

Add the React library in Head#

  <script src="https://fb.me/react-0.13.3.min.js"></script>

Rendering content#

<script>
  React.render(React.createElement('div', null, 'Hello World!'), document.body);
</script>

JSX: Javascript as XML#

Need the JSX Transformer

Converts JSX to pure javascript

<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

Example of JSX:

var HelloWorld = React.createClass({
  //Render is required for every react component
  render: function(){
    return (
      **<div>
        <h1>Hello World</h1>
        <p>THis is some text</p>
      </div>**
    );
  }
});

React.render(, document.body);


## Precompiling JSX

Better to precompile the JSX as it ill currently do it at run time. Slowing down the app.

#### Install React tools module

 ```
 sudo npm install -g react-tools
 ```

#### Runnning the precompiler

jsx src/ build

No longer need the transformer, just need a link to the built js.

## What is a React Component?

- Composable: a collection of components make up a page
- Reusable

A component is a `class` from `createClass`

To reuse the component just render the tag, but make sure it is wrapped in a `div`

## Properties

Giving components attributes, similar to html attributes

In component use:




In component declaration:

render: function(){ return

{this.props.text}

; }


`this.props` means this._properties_

#### Children Property

Yo yo yo 


You can use the content of the react component with:

{this.props.children}


## Handling Events

Add events to the component

var Note = React.createClass({ edit: function(){ alert(‘editing note’); }, remove: function(){ alert(‘removing note’); }, render: function() { return (

{this.props.children}

); } });


## State

When state changes of a component it is **Render** is called again

#### Setting Initial state

getInitialState: function(){ return {var: false} },


#### Setting State

Use: `this.setState()`

Primary method to trigger use interface updates from event handlers

#### Changing State

`this.setState({checked: !this.state.checked})`

#### Accessing State

`this.state.checked`

## References

Access the properties of a DOM node

Also flow data to a chid component

#### Setting References




#### Accessing References

var val = this.refs.myText.getDOMNode().value;


## Prototypes

`propTypes: { .. }`

* Part of the React library used to handle validations
* Usually a ECMAScipt Object

Eg.

propTypes: { count: function(props, propName){ if (typeof props[propName] !== “number”){ return new Error(“The count property must be a Number “); } if (props[propName] > 100){ return new Error(“Creating ” + props[propName] + ” notes is ridiculous”); } } }, ```

Child components can inherit state and props

Keys#

To ensure the state and identity of our components is maintain throughout multiple renders we need to assign a unique key to components:

}, eachNote: function(note, i){ return( <Note key={note.id} index={i} onChange={this.update} onRemove={this.remove} >{note.note}</Note> ); },

Component Lifecycle#

Times of change of state during component lifetime

React provide hooks for creation, lifetime and tearDown

Mounting#

Called once: getDefaultProps getInitialState

Called Just before Render: componentWillMount

Required Method: render

After Successful Render: componentDidMount

Updating#

componentWillReceieveProps shoudlComponentUpdate componentWillUpdate render componentDidUpdate

Unmounting#

componentWillUnmount: Just before Unmounting

Best Practices#

It is React best practise to have all Components in seperate files

Note: That means that compents need to be referenced before the React.render() file [Main.js]

Frameworks for React#

  • Browserify
  • Reactify
  • Webpack
  • Grunt
  • Gulp

Things to Check out#

  • React Native
  • flow
  • react-TestUtils
  • Jest