This is a collection of simple demos of React.js.

These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.

Related Projects

• Flux Demo
• Webpack Demos
• React Router Tutorial
• CSS Modules Demos
• React Testing Demo
• A boilerplate for React-Babel-Webpack project

How to use

First copy the repo into your disk.

$ git clone [email protected]:ruanyf/react-demos.git

Then play with the source files under the repo's demo* directories.

HTML Template

<meta charset="UTF-8">
<script src="../build/react.development.js"></script>
<script src="../build/react-dom.development.js"></script>
<script src="../build/babel.min.js"></script>


<div id="example"></div>
<script type="text/babel">

  // ** Our code goes here! **

</script>

Index

1. Render JSX
2. Use JavaScript in JSX
3. Use array in JSX
4. Define a component
5. this.props.children
6. PropTypes
7. Finding a DOM node
8. this.state
9. Form
10. Component Lifecycle
11. Ajax
12. Display value from a Promise
13. Server-side rendering

Demo01: Render JSX

demo / source

The template syntax in React is called JSX. It is allowed in JSX to put HTML tags directly into JavaScript codes.

ReactDOM.render()

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('example')
);

Attention, you have to use

babel.min.js

Before v0.14, React use

JSTransform.js

Demo02: Use JavaScript in JSX

demo / source

You could also use JavaScript in JSX. It takes angle brackets (<) as the beginning of HTML syntax, and curly brackets (

{

var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  

  {
    names.map(function (name) {
      return 
Hello, {name}!
    })
  }
  
,
  document.getElementById('example')
);

Demo03: Use array in JSX

demo / source

If a JavaScript variable is an array, JSX will implicitly concat all members of the array.

var arr = [
  
Hello world!
,
  
React is awesome
,
];
ReactDOM.render(
  
{arr}
,
  document.getElementById('example')
);

Demo04: Define a component

demo / source

class ComponentName extends React.Component

Before v16.0, React use

React.createClass()

class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

Components would have attributes, and you can use

this.props.[attribute]

this.props.name

Please remember the first letter of the component's name must be capitalized, otherwise React will throw an error. For instance,

HelloMessage

helloMessage

// wrong
class HelloMessage extends React.Component {
  render() {
    return 

      Hello {this.props.name}
    

      some text
    
;
  }
}

// correct
class HelloMessage extends React.Component {
  render() {
    return 

      
Hello {this.props.name}
      
some text
    
;
  }
}

Demo05: this.props.children

demo / source

React uses

this.props.children

class NotesList extends React.Component {
  render() {
    return (
      

      {
        React.Children.map(this.props.children, function (child) {
          return 
{child}
;
        })
      }
      
    );
  }
}

ReactDOM.render(
  
    hello
    world
  ,
  document.getElementById('example')
);

Please be mindful that the value of

this.props.children

undefined

React gave us an utility

React.Children

this.props.children

React.Children.map

this.props.children

undefined

object

React.Children

Demo06: PropTypes

demo / source

Components have many specific attributes which are called

props

Sometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components.

React has a solution for this and it's called PropTypes.

class MyTitle extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
  }
  render() {
    return 
 {this.props.title} 
;
  }
}

The above component of

MyTitle

title

Now we give

Title

var data = 123;

ReactDOM.render(
  ,
  document.getElementById('example')
);

It means the props doesn't pass the validation, and the console will show you an error message.

Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.

Visit official doc for more PropTypes options.

P.S. If you want to give the props a default value, use

defaultProps

class MyTitle extends React.Component {
  constructor(props) {
    super(props)
  }
  static defaultProps = {
    title: 'Hello World',
  }
  render() {
    return 
 {this.props.title} 
;
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

React.PropTypes has moved into a different package since React v15.5. (more info).

Demo07: Finding a DOM node

demo / source

Sometimes you need to reference a DOM node in a component. React gives you the

ref

React.createRef()

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myTextInput = React.createRef();
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.myTextInput.current.focus();
  }
  render() {
    return (
      

        
        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

Please be mindful that you could do that only after this component has been mounted into the DOM, otherwise you get

null

Demo08: this.state

demo / source

React thinks of component as state machines, and uses

this.state

this.setState()

this.state

class LikeButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        liked: false
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(event) {
    this.setState({ liked: !this.state.liked });
  }
  render() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      

        You {text} this. Click to toggle.
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

You could use component attributes to register event handlers, just like

onClick

onKeyDown

onCopy

Demo09: Form

demo / source

According to React's design philosophy,

this.state

this.props

Since that, the

value

class Input extends React.Component {
constructor(props) {
  super(props)
  this.state = {value: 'Hello!'}
  this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
  this.setState({value: event.target.value});
}
render() {
  var value = this.state.value;
  return (
    

      
      
{value}
    
  );
}
}

ReactDOM.render(, document.getElementById('example'));

More information on official document.

Demo10: Component Lifecycle

demo / source

Components have three main parts of their lifecycle: Mounting(being inserted into the DOM), Updating(being re-rendered) and Unmounting(being removed from the DOM). React provides hooks into these lifecycle part.

will

did

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {opacity: 1.0};
  }

  componentDidMount() {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  }
  render() {
    return (
      

        Hello {this.props.name}
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

The following is a whole list of lifecycle methods.

• componentWillMount(): Fired once, before initial rendering occurs. Good place to wire-up message listeners.

  this.setState

  doesn't work here.
• componentDidMount(): Fired once, after initial rendering occurs. Can use

  this.getDOMNode()

  .
• componentWillUpdate(object nextProps, object nextState): Fired after the component's updates are made to the DOM. Can use

  this.getDOMNode()

  for updates.
• componentDidUpdate(object prevProps, object prevState): Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render. Use this as an opportunity to operate on the DOM when the component has been updated.
• componentWillUnmount(): Fired immediately before a component is unmounted from the DOM. Good place to remove message listeners or general clean up.
• componentWillReceiveProps(object nextProps): Fired when a component is receiving new props. You might want to

  this.setState

  depending on the props.
• shouldComponentUpdate(object nextProps, object nextState): Fired before rendering when new props or state are received.

  return false

  if you know an update isn't needed.

Demo11: Ajax

demo / source

How to get the data of a component from a server or an API provider? The answer is using Ajax to fetch data in the event handler of

componentDidMount

this.setState()

class UserGist extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      username: '',
      lastGistUrl: ''
    };
  }

  componentDidMount() {
    $.get(this.props.source, function(result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
  render() {
    return (
      

        {this.state.username}'s last gist is
        here.
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('example')
);

Demo12: Display value from a Promise

demo / source

This demo is inspired by Nat Pryce's article "Higher Order React Components".

If a React component's data is received asynchronously, we can use a Promise object as the component's property also, just as the following.

ReactDOM.render(
  ,
  document.getElementById('example')
);

The above code takes data from Github's API, and the

RepoList

Now, while the promise is pending, the component displays a loading indicator. When the promise is resolved successfully, the component displays a list of repository information. If the promise is rejected, the component displays an error message.

class RepoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      error: null,
      data: null
    };
  }

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  }
  render() {
    if (this.state.loading) {
      return Loading...;
    }
    else if (this.state.error !== null) {
      return Error: {this.state.error.message};
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo, index) {
        return (
          

Demo13: Server-side rendering

source

This demo is copied from github.com/mhart/react-server-example, but I rewrote it with JSX syntax.

# install the dependencies in demo13 directory
$ npm install

translate all jsx file in src subdirectory to js file
$ npm run build
launch http server
$ node server.js

Extras

Precompiling JSX

All above demos don't use JSX compilation for clarity. In production environment, ensure to precompile JSX files before putting them online.

First, install the command-line tools Babel.

$ npm install -g babel

Then precompile your JSX files(.jsx) into JavaScript(.js). Compiling the entire src directory and output it to the build directory, you may use the option

--out-dir

-d

$ babel src --out-dir build

Put the compiled JS files into HTML.

<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!-- No need for Browser.js! -->


<div id="example"></div>
<script src="build/helloworld.js"></script>

Useful links

• React's official site
• React's official examples
• React (Virtual) DOM Terminology, by Sebastian Markbåge
• The React Quick Start Guide, by Jack Callister
• Learning React.js: Getting Started and Concepts, by Ken Wheeler
• Getting started with React, by Ryan Clark
• React JS Tutorial and Guide to the Gotchas, by Justin Deal
• React Primer, by Binary Muse
• jQuery versus React.js thinking, by zigomir

License

BSD licensed