React documentation

Welcome to the discussion about the exercise of Running React Code in the Browser

Leave your solutions below in this thread. If you have any questions or you want to discuss something connected to the assignment feel free to do it here as well.

Visit https://reactjs.org/ and try out the examples. Don’t have high expectations towards understanding what’s going on, just play with the code.

Download a simple HTML file that contains React from https://reactjs.org/docs/getting-started.html. Run the code in the browser.

Exercise

Add one of the examples from https://reactjs.org/ in your code and run it in your browser.

<meta charset="UTF-8" />

<title>Hello World</title>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>



<!-- Don't use this in production: -->

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

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


Hello {this.props.name}

);
}
}

ReactDOM.render(
,
document.getElementById(‘root’)
);

</script>

<!--

  Note: this page is a great way to try React but it's not suitable for production.

  It slowly compiles JSX with Babel in the browser and uses a large development build of React.



  Read this section for a production-ready setup with JSX:

  https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project



  In a larger project, you can use an integrated toolchain that includes JSX instead:

  https://reactjs.org/docs/create-a-new-react-app.html



  You can also use React without JSX, in which case you can remove Babel:

  https://reactjs.org/docs/react-without-jsx.html

-->

Hi! Happy to learn ReactJS wih the academy! Good study to all the students!

https://codeshare.io/5PjgZX

  <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <div id="timer-example"></div>
    <script type="text/babel">
  
  
  ReactDOM.render(
        <h1>Hello, world! :D</h1>,
        document.getElementById('root')
      );
</script>

<script type="text/babel">
   class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Counting to the Moon: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);

</script>
    <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      Read this section for a production-ready setup with JSX:
      https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

      In a larger project, you can use an integrated toolchain that includes JSX instead:
      https://reactjs.org/docs/create-a-new-react-app.html

      You can also use React without JSX, in which case you can remove Babel:
      https://reactjs.org/docs/react-without-jsx.html
    -->
  </body>
</html>