CODEWITHSUNDEEP
javascripthtmlcssreactjs
bigboyopiro
bigboyopiro

Reputation: 15

Reactjs code not showing up in HTML/CSS website

I am working on a tutorial how to get react.js working in a website, but ironically, i can't seem to get a simple piece of React code work on my website.

I am aware that you must insert the at the very end of the tag, but even if you insert it under it doesn't work. I've tried to replicate the reactjs integration with HTML example code, but that also has not provided any results. I've also tried to reference Jquery in the code.

Here's the react portion of the code:


const e = React.createElement;

    class Form extends React.Component { 
        constructor(props) { 
            super(props); 
            this.state = {value: 'hammer'}; 

        this.handleChange = this.handleChange.bind(this); 
        this.handleSubmit = this.handleSubmit.bind(this); 
        }

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


        handleSubmit(event) { 
            alert('We have run out of product ' + this.state.value + '. Please try again later.'); 
            event.preventDefault(); 
        } 


        render() { 
            return ( 
                <form onSubmit={this.handleSubmit}> 
                    <label> 
                    Please choose an item. 
                    <select value={this.state.value} onChange={this.handleChange}> 
                        <option value="hammer">Hammer</option> 
                        <option value="drill">Drill</option> 
                        <option value="saw">Saw</option> 
                        <option value="wrench">Wrench Set</option> 
                        <option value="toolbox">Toolbox</option> 
                    </select>
                </label> 
            <input type="submit" value="Submit" /> 
            </form> 
            ); 
        } 
    } 

const domContainer = document.querySelector('#root');
ReactDOM.render(e(Form),
        domContainer);

And here's the reference to it in the HTML:

    <body>
    <center>
        <div class="mainbody">
            <div class="header">
                The Machine Shop
            </div>
            <div class="topmenu"></div>
            <div class="content">
                Welcome to the Machine Shop.
            </div>

            <div id="root"></div>
        </div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 
        <script src="form.js"></script>
    </center>
    </body>

The page itself works, but not the react portion, and i've tried previewing the code in every browser.

Here's the codepen.io code to the full code: https://codepen.io/bigboyopiro/pen/eYObozY

Upvotes: 0

Views: 862

Answers (1)

saurssaurav
saurssaurav

Reputation: 773

To make your code run, you need babel.

So, for codepen.io go to setting in js tab and add babel as Javascript pre-processor.

To make your code run on website add type="text/babel" on script tag so that babel will transpile your script code.

For e.g.

<head>
<script  src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
...
<body>
.....
</body>
<script type="text/babel">
//react code
</script>

Upvotes: 1

Related Questions