React documentation

React Web Development Course
#72 
<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>React Exercise 1</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>


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

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

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('id')
);
 
    </script>

  </body>

</html>

To make the code work in the browser, I changed the parameter of .getElementById(‘id’), to match the string in <div id="id"></div>. After running the code, the page will display Hello Taylor.

1 Like
#73

Got it!

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

    ReactDOM.render(
      <HelloMessage name="Jack" />,
      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>```
#74

First Challange:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Making My First App!!</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, Michael McClimon!</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>
1 Like
#75 
<!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="Greg" />,
    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>
1 Like
#76 
  class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  ReactDOM.render(
    <HelloMessage name="Kaliko" />, 
    document.getElementById("root"));
</script>
<!--
1 Like
#79

@Lizette Hi there, I am having trouble, the handleClick function and render is not refreshing the current price.
the handleClick() does not accept the event.preventDefault

I changed the code a bit but it still does not update the prices

react

here, I omitted the event.preventDefault function

handleClick() {

   // removed event.preventDefault since it was giving me errors

   const randomPercentage = 0.995 + Math.random() * 0.01;

   this.setState(function (prevState) {

     return {

       price: prevState.price * randomPercentage

     };

   });

 }

and instead, added it here and also changed onSubmit, action="#", method=“POST” to {this.handleSubmit}

render() {

    return (

      <tr className="coin-row">

        <td>{this.props.name}</td>

        <td>{this.props.ticker}</td>

        <td>${this.state.price}</td>

        <td>

          <form onSubmit={this.handleSubmit}>

            <button onClick={(e) => this.handleClick(e)}>Refresh</button>

          </form>

        </td>

      </tr>

    );

  }

}

any insight into this or a possible solution would be greatly appreciated

Here is a link to my repository
https://github.com/brlojam4932/my-app.git

#80

@Malik Hello Malik I see you clicked a like on my question but no answer
Here is another post, a simpler explanation of the problem which the table and coin prices not refreshing with new prices, based on the random function

#81

Disregard this problem - the dynamic events are appearing now in the table so that the prices are being updated by the random function.
It took me like three days going through tutorials in the React website on my own.
I finally realized that I think, I was not writing the event.preventDefault function correctly.

incorrect

event.preventDefault;

correct

event.preventDefault();
#82

Hey, So i am just trying to import swiper and swiperSlide from swiper/react but the following error is being thrown and i don’t know why because swiper is installed and is in my node modules folder and my package-json file so don’t see a reason for the compile error. Please help!!!

Screenshot 2021-09-22 at 12.22.11

Screenshot 2021-09-22 at 12.21.37

Screenshot 2021-09-22 at 12.23.08

Thanks

#83

Solved the issue incase anyone wants to use swiper also: https://stackoverflow.com/questions/69202975/module-not-found-cant-resolve-swiper-react

1 Like
#84 
<script type="text/babel">

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

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

    </script>
#85

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

handleClick(event) { }

1 Like
#86

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

1 Like
#87

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 :nerd_face:

Carlos Z

#88

@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>
  );
}
#89

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

1 Like
#90

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

1 Like
#91

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>
1 Like
#92

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