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.

2 Likes
<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

2 Likes
  <!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>
2 Likes

2 Likes

Cool.

With codesandbox.io, you can share multiple files and you can even upload it to your github. For larger projects, I’d recommend that.

3 Likes

Had to this one looked interesting to me so had to do this one as well! simple problem solving!! absolutely love it!

2 Likes

I have a question.
Instead of installing visual studio is it ok if I use Xcode(I’m on MAC)?

Greetings @carolyn,

Xcode does not automatically detect react projects and does not have linters in place to help you with your syntaxes and indentation. You will lose out on important extensions, linters, and community support (stackoverflow answers incase you have build configuration issues or running a node instance).

The primary purpose for Xcode is to build apps for the apple ecosystem, so it is advisable to use Visual Code itself. Don’t worry, it’s pretty light weight and is very customisable.

Happy Learning! :slight_smile:

2 Likes
<!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>
    <script type="text/babel">
    class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}!
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="comrades at Ivan On Tech" />,
  document.getElementById('root')
);
/*
      ReactDOM.render(
        <h1>Hello, comrades at Ivan On Tech!</h1>,
        document.getElementById('root')
      );
*/
    </script>
    <!--
     
    -->
  </body>
</html>
1 Like

Technically, you can use any software that is capable of saving text files. However, VS Code, Webstorm, or other editors used for web development are better for the task. Check out The State of Js survey 2019 on trending editors.

1 Like

1 Like
Demo 一番
<!-- Don't use this in production: why - babel should be run before you upload code to the web page. -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

時間

timer thingy

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>
            Seconds: {this.state.seconds}
          </div>
        );
      }
    }

    ReactDOM.render(
      <Timer />,
      document.getElementById('timer-example')
    );
</script>
1 Like
<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">



  ReactDOM.render(

    <h1>Hello, Ricardo!</h1>,

    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

-->
1 Like

2 Likes

What I did was take the existing Hello World html file and replace the contents of the script tag with the code that we had to use:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

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

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>
        Hello, {this.props.name}!
      </h1>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Ivan" />,
  document.getElementById('root')
);

    </script>
  </body>
</html>

In that case, in ReactDOM.render we need to change
document.getElementById('hello-example')
to
document.getElementById('root')
so the function can find the element on the page.
Then, I also changed div to h1 in class to make the text larger.

1 Like

https://github.com/TobyKreiselmaier/React/blob/main/HelloUser.html

1 Like

This is the error I’m getting when I copy paste the code at the bottom of the lesson…

/home/petra/.nvm/versions/node/v15.2.1/bin/node Untitled-1
Process exited with code 1
Uncaught Error: Cannot find module ‘/home/petra/Untitled-1’

1 Like

The code should run in your browser. See e.g. Toby’s solution above your comment. It’s an HTML file that you can simply open in a browser.

1 Like