0

This is my index.html file

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  </head>
<body>
    <div id="hello"></div>

    <script type="text/jsx" src="app/index.js"></script>
</body>
</html>

This is my index.js file. 

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');

var App = React.createClass({
    render: function(){
        return(
            <h1>Hello</h1>
        );
    }
});


  ReactDOM.render(<App/>,document.getElementById('hello'));

I am not able to see hello on the webpage which I should be seeing

Also React Developer tools say that this wepage is not React

What is the error?

shutup1
  • 159
  • 5
  • 16
  • Possible duplicate of [ReactJS: "Uncaught SyntaxError: Unexpected token <"](https://stackoverflow.com/questions/28100644/reactjs-uncaught-syntaxerror-unexpected-token) – João Cunha Aug 22 '18 at 09:26
  • Jsx is not understood so the error.. use babel and webpack build system to avoid such error. You may use create-react-app to get started and avoid configuration issues. – tarzen chugh Aug 22 '18 at 09:30
  • No I have changed the question – shutup1 Aug 22 '18 at 09:32
  • 1
    if that's the code that the bowser tries to parse directly, the script tag won't execute anything, as any script with a type other than "javascript" is ignored – towc Aug 22 '18 at 09:34
  • read about type, here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes – towc Aug 22 '18 at 09:40
  • I would start with https://github.com/facebook/create-react-app and not waste time on this... :) – Yossi Aug 22 '18 at 09:45

2 Answers2

1

Use create-react-app to bootstrap your app and add your components within the src folder. To bootstrap a React app, you need to have node js installed (version >= 6 ), confirm using node -v

If you wish to organize your app structure from scratch, you will need to install react and react-dom using npm install react react-dom

You can bootstrap a react app with the command npx create-react-app appName. A sample React file looks like this:

import React, { Component } from "react"; 

    class ComponentName extends Component {    

      render() {
        return (
         <div>
           Page contents
         </div>
        );
      }
    }

    export default ComponentName;

For more info: https://github.com/facebook/create-react-app

Chiamaka Ikeanyi
  • 464
  • 4
  • 7
0

1.Make sure you install all 3 npm dependencies: react, react-dom & create-react-class.

  1. In your index.js use var App = createReactClass() directly as you have already defined the variable for it above. It will work then.

var createReactClass = require("create-react-class");

var React = require("react");
var ReactDOM = require("react-dom");

var createReactClass = require("create-react-class");

var App = createReactClass({
 render: function() {
  return <h1>Hello!</h1>;
 }
});

ReactDOM.render(<App />, document.getElementById("app"));

Here is code sandbox link for this

Learner
  • 800
  • 1
  • 12
  • 34