React documentation

Malik · September 25, 2021, 4:00pm

Yes, and you should also provide the event variable in the function handleClick

handleClick(event) { }

Tito_RuizG · October 11, 2021, 7:09pm

Hi everyone!
Im about to start this course, but I am not sure if it is better for me to take the JavaScript programming course first, given I have no experience/knowledge about it. Or if it is okay to take this one and take de JS later.
Thank you for the answer!!

thecil · October 11, 2021, 11:10pm

Hey @Tito_RuizG, hope you are well.

If you are completely new into programming, you should definitely take our JS course first, the react is a framework based on JS, so you must know JS before jumping into this one

Carlos Z

bjamRez · October 12, 2021, 3:47pm

@thecil @Malik
Hello Devs, I finished the course and I am trying to add some more functionality so I am reading the hooks section in the Docs but I cannot get these simple examples to render on screen. I’ve even tried breaking this out into an app component file which imports this component function and of course the DOM but nothing renders it…?

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Tito_RuizG · October 12, 2021, 9:02pm

Hey @thecil, thank you very much for your answer. After I posted this question, I assumed it was the correct thing to do to begin with the JS course first. So thats what I did!

Thanks again

bjamRez · October 12, 2021, 9:24pm

DISREGARD - I started a fresh project and ran the

npx create-react-app my-app

cd my-app

npm start

I was just clicking the html index file and though that worked for the class component scripts, it id not for the functional component ones so now it works and I can continue further learning about hooks

moragarcia75 · October 18, 2021, 1:57pm

I could not make it work on Visual Studio. Used ATOM instead.

Hello World

<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

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

Hello {this.props.name}

);
}
}

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

</script>

KK_Cheah · October 30, 2021, 2:55pm

Just fiddling and practiced a couple more times to get a feel for the sequencing of the codes

<body>
<div id="root"></div>
<div id="abra"></div>
<div id="shape"></div>
<div id="formz"></div>
<script type="text/babel">

  class Remedy extends React.Component {
    render () {
      return (
      <div>just trial and error {this.props.name}</div>
      );
    }
  }

  class Aespa extends React.Component{
    render(){
      return (
        <div>i will insert a symbol here {this.props.symbol} now you see it</div>
      );
    }
  }


  class Jati extends React.Component{
    render() {
      return (
      <div>damn i really miss {this.props.title} and i want to reunite with them</div>
      );
    }
  }


  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
  );


  ReactDOM.render(
    <Jati title="MY CLASSMATES"/>,
    document.getElementById('formz')
  );


  ReactDOM.render(
   <Aespa symbol="[]"/>,
   document.getElementById('shape') 
  );

  ReactDOM.render(
    <Remedy name="Abracadabra"/>,
    document.getElementById('abra')
  );

</script>
</body>

Madlearner · November 14, 2021, 5:24am

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

    <!-- 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">
/*
      ReactDOM.render(
        <h1>Hello, Folks!</h1>,
        document.getElementById('root')
      );
*/      
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello, {this.props.name}
      </div>
    );
  }
}

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

    </script>

zajiramu1062 · December 2, 2021, 6:24am

I copied the first example from the reactjs.org website and pasted it below with some minor changes to reflect the assignment.

I changed the value of the name prop to the string “UMAR!!!” (my first name) inside the HelloMessage component instance or class instance being created inside the ReactDOM.render() method.

Code is below.

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

ReactDOM.render(
  <HelloMessage name="UMAR!!!" />,
  document.getElementById('hello-example')
);

Maia · December 2, 2021, 11:42pm

I was able to run this on browser only after having updated script link. I wasted a lot of time on trying to figure out the error through searching solutions on google and focusing on having the “script” under “root”, which is not necessary. In the solution, script comes before “root” and it works just fine.

<!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="This is Maia" />,
  document.getElementById('root')
);

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

Markus_Bielaszka · December 3, 2021, 12:59pm

<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 = "Markus" />,
      document.getElementById('root')
    );

</script>

Capture

crypto-djent76 · January 2, 2022, 5:13pm

Having just started this React course, here is my solution for the React documentation which simply changes Hello World to my name.

Hello World

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

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

      ReactDOM.render(
        <h1>Hello, Cyberdjent76!</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
    -->
  </body>
</html>

Thanks and looking forward to learning more.

diegosan · January 5, 2022, 3:41pm

Hello group,

I’m excited to dive in the world of React with you all.

Here’s the example I added to my code:

    <div id="hello-example"></div>

    <script type="text/babel">
      class HelloMessage extends React.Component {
        render() {
          return (
            <div>
              Hello {this.props.name}
            </div>
          );
        }
      }

      ReactDOM.render(
        <HelloMessage name="Diego" />,
        document.getElementById('hello-example')
      );
    </script>

Cheers

d0nbxx · January 8, 2022, 10:42pm

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

    <style>
      body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

    </style>
</head>

<body>

    <div id="hello"></div>
    <div id="root"></div>
    <script type="text/babel">
        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
    );
    class HelloMessage extends React.Component {
    render() {
    return (
    <div>
        Hello {this.props.name}
    </div>
    );
    }
    }
ReactDOM.render(
    <HelloMessage name="d" />,
    document.getElementById('root')
);


function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={i => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(<Game />, document.getElementById("root"));

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

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

    -->
    <div id="errors" style="
  background: #c00;
  color: #fff;
  display: none;
  margin: -20px -20px 20px;
  padding: 20px;
  white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
  document.body.classList.add('mouse-navigation');
  document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
  if (e.keyCode === 9) {
    document.body.classList.add('kbd-navigation');
    document.body.classList.remove('mouse-navigation');
  }
});
window.addEventListener('click', function(e) {
  if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
    e.preventDefault();
  }
});
window.onerror = function(message, source, line, col, error) {
  var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
  errors.textContent += text + '\n';
  errors.style.display = '';
};
console.error = (function(old) {
  return function error() {
    errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
    errors.style.display = '';
    old.apply(this, arguments);
  }
})(console.error);
</script>



</body>

</html>

this is an example of Tic Tac toe using React, CSS and HTML, all inline, runs well using live server

Pavlo · January 30, 2022, 11:44pm

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

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>  
    <div id="hello-example"></div>
    <script type="text/babel">
    class HelloMessage extends React.Component {
        render() {
            return (
                <div>
                    Hello {this.props.name}
                </div>
            );
        }
    }

    ReactDOM.render(
        <HelloMessage name="Pavlo" />,
        document.getElementById('hello-example')
    );

    </script>
</body>

</html>

Just don’t forget to change id of the element in first <div> and paste the code after <script type="text/babel">

skawal22 · February 12, 2022, 7:19pm

Thanks!

2stroke · February 16, 2022, 5:57pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Combo</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="name"></div>  
    <div id="timer-example"></div>

    <script type="text/babel">  
  
        class HelloMessage extends React.Component {
        render() {
            return (
            <div>
            <h1>Hello {this.props.name}, you've been on this page for:</h1>
            </div>
            );
        }
        }

        ReactDOM.render(
        <HelloMessage name="You" />,
        document.getElementById('name')
);
    </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>
                <h2>{this.state.seconds} seconds...</h2>
            </div>
            );
        }
        }

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

    </script>

  </body>
</html>

dappcode · February 21, 2022, 2:42pm

‍♂

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

  <!-- 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="root1"></div>
  <script type="text/babel">

    // Hey World
    ReactDOM.render(
      <h1>Hey, world!</h1>,
      document.getElementById('root')
    );

    // Hey Elin
    class HelloMessage extends React.Component {
      render() {
        return (
          <div>
            Hey {this.props.name}
          </div>
        );
      }
    }

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

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

MichaelW · March 18, 2022, 11:45am

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

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="todos-example"></div>
    <script type="text/babel">

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-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>