ReactJS

Summary

CDH

React Component

Component Lifecycle

Mounting

Updating

Unmounting

Just Hello World

Without Compoent

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>MoonPlanner</title>
  </head>
  <body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script type="text/jsx">
        ReactDOM.render(
          <h1>Hello, world!</h1>,
          document.getElementById('root')
        );
    </script>

  </body>
</html>

With Component

    <script type="text/jsx">
      var MyComponent = React.createClass({
          render: function(){
              return (
                  <h1>Hello, world!</h1>
              );
          }
      });
      ReactDOM.render(
        <MyComponent />,
        document.getElementById('root')
      );
    </script>

With Component Class

    <script type="text/jsx">
      class MyComponent extends React.Component {
        render() {
          return <h1>Hello, {this.props.name}</h1>;
        }
      }
      ReactDOM.render(
        <MyComponent name="world"/>,
        document.getElementById('root')
      );
    </script>

With Class Component Default Property

    <script type="text/jsx">
      class MyComponent extends React.Component {
        render() {
          return <h1>Hello, {this.props.name}</h1>;
        }
      }
      MyComponent.defaultProps = {
        name: 'world'
      };
      ReactDOM.render(
        <MyComponent />,
        document.getElementById('root')
      );
    </script>
Last modified 2 years ago Last modified on 09/03/17 23:33:47