Breaking News: Grepper is joining You.com. Read the official announcement!

cs50 react example

Rustacean answered on September 5, 2022 Popularity 6/10 Helpfulness 3/10

answer cs50 react example

related cs50 react example

cs50 react example

Comment

// Add this to html head:
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

// React component structure in html body.
<div id="cool-component"></div>
<script type="text/babel">
function FirstComponent() {
    return (
        <h1>Hello, world!</h1>
    );
}

// Use React DOM to add component to DOM.
ReactDOM.render(<FirstComponent />, document.querySelector("#cool-component"))
</script>

Popularity 6/10 Helpfulness 3/10 Language javascript

Source: cs50.harvard.edu

Tags: cs50 javascript

Link to this answer
Share Copy Link

Contributed on Sep 05 2022

Rustacean

0 Answers Avg Quality 2/10

Closely Related Answers

cs50 react example

Comment

// More advanced example.

<div id="cool-component-parent"></div>

<script type="text/babel">
function FirstComponent() {
    const [state, setState] = React.useState({
        num1: 1,
        num2: 1,
        response: "",
        score: 0,
        incorrect: false,
    });

    function updateInput(event) {
        
        setState({
            ...state,
            response: event.target.value
        })
    }

    function checkKey(event) {
        if (event.key == "Enter") {
            const ans = parseInt(state.response)
            if (ans == state.num1+state.num2) {
                // Answer correct.
                setState({
                    ...state,
                    score: state.score+1,

                    // Change numbers
                    num1: Math.ceil(Math.random() * 10),
                    num2: Math.ceil(Math.random() * 10),
                    response: "",
                    incorrect: false,
                })
            } else {
                // Answer incorrect.
                setState({
                    ...state,
                    score: state.score-1,
                    response: "",
                    incorrect: true,

                })
            }
        }
    }
    if (state.score == 5) {
        return (
            <div>You won!</div>
        );
    }
    return (
        <div>
            <h1 class={state.incorrect ? "incorrect" : ""}>{state.num1} + {state.num2}</h1>
            <input type="text" onKeyPress={checkKey} onChange={updateInput} value={state.response}/>
            <h1>{state.score}</h1>
        </div> 
    );
}

ReactDOM.render(<FirstComponent />, document.querySelector("#cool-component-parent"))
</script>

Popularity 5/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: cs50 javascript

Link to this answer
Share Copy Link

Contributed on Sep 05 2022

Rustacean

0 Answers Avg Quality 2/10

cs50 react example

Contents

More Related Answers

cs50 react example

Closely Related Answers

cs50 react example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.