Chapter 01 (React StopWatch) - Intuit-London/imperial-react-workshop GitHub Wiki

React Class and render it into UI

  1. Create empty Index.html in a folder say chapter01.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chapter 01</title>
  </head>
  <body>
  </body>
</head>
</html>
  1. Download React and React-Dom libraries and add them to lib folder.
  2. Include the libs to the index.html.
<script src="../libs/react.js"></script>
<script src="../libs/react-dom.js"></script>
  1. Create a empty div with id as say container 
<h1>Chapter 01 - StopWatch using React</h1>
<div id="container">

</div>
  1. Create React Component inside a script tag as follows
    <script>
      var ExampleApplication = React.createClass({
        render: function() {
          var elapsed = Math.round(this.props.elapsed  / 100);
          var seconds = elapsed / 10 + (elapsed % 10 ? '' : '.0' );
          var message =
            'React has been successfully running for ' + seconds + ' seconds.';
          return React.DOM.p(null, message);
        }
      });
      // https://facebook.github.io/react/docs/top-level-api.html#react.createfactory
      var ExampleApplicationFactory = React.createFactory(ExampleApplication);
      var start = new Date().getTime();
      setInterval(function() {
        // https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
        ReactDOM.render(
          ExampleApplicationFactory({elapsed: new Date().getTime() - start}),
          document.getElementById('container')
        );
      }, 100);
   </script>
  1. Lets initialize this project with npm to help us install a node server. Run the command npm init in terminal under chapter01 (accept all defaults)
  2. Lets install a node http-server using the command npm install --save http-server.
  3. Start node http-server using the command node node_modules/http-server/bin/http-server.
  4. Open the link http://localhost:8080/index.html in say Chrome browser.

Using JSX

  1. Let's add in-browser babel transformer by adding a script tag
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  1. Edit the React class ExampleApplication script type to text/babel`.
<script type="text/babel">
  1. Edit the React class ExampleApplication to return the following instead of React.DOM.p(null, message);.
return (<div>{message}</div>);

Useful Links

  1. https://facebook.github.io/react/
  2. https://facebook.github.io/react/docs/top-level-api.html#reactdom.render
  3. https://facebook.github.io/react/docs/top-level-api.html#react.createfactory
  4. http://buildwithreact.com/tutorial/jsx
  5. https://www.npmjs.com/
  6. http://babeljs.io/
  7. http://es6-features.org/#ValueExportImport
  8. https://webpack.github.io/
  9. http://webpack.github.io/docs/using-loaders.html
  10. http://webpack.github.io/docs/using-plugins.html
  11. https://facebook.github.io/react/docs/react-component.html
  12. https://facebook.github.io/relay/docs/api-reference-relay.html#content
  13. https://facebook.github.io/relay/docs/api-reference-relay-mutation.html#content
⚠️ **GitHub.com Fallback** ⚠️