React documentation

Lizette · July 13, 2020, 1:20pm

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.

ibin · July 18, 2020, 12:36am

<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

-->

ibourn · July 19, 2020, 11:28pm

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

https://codeshare.io/5PjgZX

CryptoDev · July 25, 2020, 6:43pm

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

GalacticBrainBomb9 · September 10, 2020, 2:39am

zsolt-nagy · September 10, 2020, 4:53pm

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.

GalacticBrainBomb9 · September 11, 2020, 12:46am

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

carolyn · September 23, 2020, 5:48am

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

Malik · September 23, 2020, 8:03am

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!

carolyn · September 23, 2020, 12:08pm

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

zsolt-nagy · October 1, 2020, 10:48am

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.

mickymax777 · October 7, 2020, 2:52pm

gmarcotte · October 9, 2020, 1:31am

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>

ricmariano · October 28, 2020, 5:28am

<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

-->

SimpleSimon · October 31, 2020, 3:18am

MarcisB · November 2, 2020, 7:26pm

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.

Toby_K · November 18, 2020, 4:58pm

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

petra · November 20, 2020, 4:39am

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’

Jesal_Patel · November 23, 2020, 8:27pm

zsolt-nagy · November 26, 2020, 11:29pm

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.