What is wrong with this simple react example?

Question

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.

Arye Eidelman · Accepted Answer · 2020-03-04 00:21:39Z

2

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.

edited Mar 4, 2020 at 0:21

answered Mar 3, 2020 at 23:52

Arye Eidelman

2,00620 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

larz · Accepted Answer · 2020-03-03 23:53:51Z

0

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?

answered Mar 3, 2020 at 23:53

larz

5,7662 gold badges13 silver badges23 bronze badges

1 Comment

PedroDalla Over a year ago

Just checked the console, there are two errors: 1) Access to XMLHttpRequest at 'file:///C:/Users/Pedro/Front-End/React/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. 2) Failed to load resource: net::ERR_FAILED

Mitch · Accepted Answer · 2020-03-04 00:26:04Z

0

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

answered Mar 4, 2020 at 0:26

Mitch

1088 bronze badges

Collectives™ on Stack Overflow

What is wrong with this simple react example?

3 Answers 3

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

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related