CODEWITHSUNDEEP
reactjs
PedroDalla
PedroDalla

Reputation: 23

What is wrong with this simple react example?

I was watching tutorials on React and tried copying an example, but for some reason nothing that I attempt is working. Here's the simple code:

index.html:

!DOCTYPE html>
<head>
    <title>React Stuff</title>

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<ul>
    <li>Hello!</li>
    <li>This is a</li>
    <li>React practice!</li>
    </ul>, document.getElementById('root'));

I installed react using npm install react react-dom and attempted to open the .html file, but nothing appears on the screen. I also tried moving the script to the or even putting it inside the <script>, but none of that worked.

Upvotes: 1

Views: 66

Answers (3)

Mitch
Mitch

Reputation: 108

Does your project have a package.json? If so does it have scripts, specifically a start script? Then you need enter 'npm run start' in your console to compile the code and it should launch on localhost:3000.

Try following create-react-app

Upvotes: 0

Arye Eidelman
Arye Eidelman

Reputation: 1966

Some of the features here rely on build tools to precompile the code as they are not natively supported.

For example jsx (HTML like syntax directly in JavaScript) would be compiled with Babel .

node_module package imports import React from 'react' without needing to reference the full url import React from '/node_modules/react/index.js' needs to be compiled with webpack (or a similar tool).

create-react-app is a great way to get started with all the required setup.

Upvotes: 2

larz
larz

Reputation: 5766

ReactDOM.render(<ul>
    <li>Hello!</li>
    <li>This is a</li>
    <li>React practice!</li>
    </ul>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

This works here. Can you reproduce your error in your question?

Upvotes: 0

Related Questions