CODEWITHSUNDEEP
javascripthtmlreactjs
shutup1
shutup1

Reputation: 169

ReactJS not recognised

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?

Upvotes: 0

Views: 299

Answers (2)

Chiamaka Ikeanyi
Chiamaka Ikeanyi

Reputation: 484

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

Upvotes: 1

Learner
Learner

Reputation: 810

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

Upvotes: 0

Related Questions