#JavaScript #React

This tutorial will walk you through developing your first app with React.

1) Installation

This is the app we are going to build. Two buttons that change the case of a text. Pretty simple but good enough to look at a few of React’s basic syntax.


Hello from React

Let's get started by creating a simple HTML document and include the [React libraries](https://facebook.github.io/react/downloads.html). You will also need to include a script tag and create div with `id="main"` in the the document body.

Make sure you are using the latest version of React. At the time of writing, this is what I have in my index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="main"></div>
    <script type="text/babel">
      
      // Your react code goes here
      
    </script>
  </body>
</html>

Note: It is possible recommended to use React with a CommonJS module system like browserify or webpack and to install it with npm.

2) First component using React’s JSX syntax

React uses a specific syntax, called JSX. JSX is a JavaScript syntax extension that looks similar to XML. In your JSX files, you can use any JavaScript you want, but you can also include pieces of HTML/XML without quotes.

(The babel-core library we have included, allows in browser JSX transformation and the use of <script type="text/babel"> tags.)

Let’s create a button component on our page with React:

var UppercaseButton = React.createClass({
  render: function() {
    return (
      <button>Uppercase</button>
    )
  }
});

ReactDOM.render(<UppercaseButton />, document.getElementById("main"));
  • Use React.createClass() to declare new components.
  • A React Class should have a render function that returns the element’s HTML. Careful to use return(<HtmlTag />) and not return{<HtmlTag />}.
  • ReactDOM.render() is our app’s main entry point and renders our components. The first argument is the <ReactTag /> that we declared with createClass() and the second is the HTML element that will contain the rendered React component.
  • React classes should always start with an Capital letter.

Check out the code here: https://jsbin.com/xakiza/edit?html,output

3) Passing arguments to a React component

It is possible to pass arguments to components using components properties.

Change your React code to:

var UppercaseButton = React.createClass({
  render: function() {
    return (
      <button>{this.props.text}</button>
    )
  }
});

ReactDOM.render(<UppercaseButton text={"Uppercase"} />, document.getElementById("main"));
  • Pass an argument by adding a property like you would in HTML. In this example, we added the text={"Uppercase"} property.
  • Use curly brackets when interpolating JavaScript expressions in your JSX templates.
  • In the component definition, use this.props.propertyName to access the value passed to that component.

Check out the code here: https://jsbin.com/qakaka/edit?html,output

4) Composing components and managing state

We are now going to create a <Main /> component to hold our button and text. This component will hold our application’s state.

var UppercaseButton = React.createClass({
  render: function() {
    return (
      <button onClick={this.props.onButtonClick}>Uppercase</button>
    )
  }
});

var HelloText = React.createClass({
  render: function() {
    return (
      <div>
        <div style={this.props.textStyle}>Hello from React</div>
      </div>
    )
  }
});

var Main = React.createClass({
  getInitialState: function() {
    return {textStyle: {
      textTransform: 'none'
    }};
  },
  clickHandler: function () {
    this.setState({textStyle: {
      textTransform: 'uppercase'
    }});
  },
  render: function() {
    return (
      <div>
        <HelloText textStyle={this.state.textStyle} />
        <UppercaseButton onButtonClick={this.clickHandler} />
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById("main"));

Our code is getting larger, here are the main things to pay attention to:

  • We now have 3 components (Main, UppercaseButton and HelloText). Main holds UppercaseButton and HelloText.
  • getInitialState() is a special React function that will be called once when a component is initialized. Make use of it to return the initial state object.
  • The component state can be access with this.state.
  • The component state can be modified using this.setState(newState).
  • To set a inline style using the JSX syntax, use style={JavascriptStyleObject}. More info in the React inline style documentation. In our example, to set the text to uppercase: style={{textTransform: ‘none’}}

Check out the code and play around here: https://jsbin.com/beheve/edit?html,output

5) Finishing the application and taking of advantage of React modular approach

Let’s now add our second button by creating a generic button.

var TextTransformButton = React.createClass({
  onButtonClick: function() {
    this.props.onButtonClick(this.props.transform);
  },
  render: function() {
    return (
      <button onClick={this.onButtonClick}>{this.props.transform}</button>
    )
  }
});

var HelloText = React.createClass({
  render: function() {
    return (
      <div>
        <div style={this.props.textStyle}>Hello from React</div>
      </div>
    )
  }
});

var Main = React.createClass({
  getInitialState: function() {
    return {textStyle: {
      textTransform: 'none'
    }};
  },
  clickHandler: function (newCase) {
    this.setState({textStyle: {
      textTransform: newCase
    }});
  },
  render: function() {
    return (
      <div>
        <HelloText textStyle={this.state.textStyle} />
        <TextTransformButton onButtonClick={this.clickHandler} transform={"lowercase"} />
        <TextTransformButton onButtonClick={this.clickHandler} transform={"uppercase"} />
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById("main"));
  • The clickHandler function is now generic.
  • The child components (buttons here) will decide what to send to the clickHandler.

Check out the final code here: https://jsbin.com/bidafa/edit?html,output

Hopefully this quick first look at React will help you get started and get an idea of the framework’s potential.

#JavaScript #React