Building Your First React App

programming
1

by kirupa | 10 October 2016

By now, you probably know all about the backstory of React and how it helps even your most complex user interfaces sing performantly. For all the awesomeness that React brings to the table, getting started with it (kinda like this sentence) is not the most straightforward thing. It has a steep learning curve filled with many small and big hurdles:

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/building_your_first_react_app.htm
2

Hi Kirupa, I run the code below. But I get nothing in the browser body. Anything I am wrong? Thanks in advance.

<!DOCTYPE html>
<html>
 
<head>
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
 
  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
    #container h1 {
      font-size: 144px;
      font-family: sans-serif;
      color: #0080a8;
    }
  </style>
</head>
 
<body>
  <div id="container"></div>
  <script type="text/babel">
    var destination = document.querySelector("#container");
 
    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Batman"
    ), destination);
  </script>
</body>
 
</html>
3

Looks like those unpkg links are broken

4

Yikes! I’ll update all of those articles shortly. The path you should use for the React libraries is:

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Edit: All of the articles should be updated with the latest version :slight_smile:

5

Really awesome, Kirupa. It works now! Thanks a lot.

Thanks Senocular as well.

1 Like
7

You write so clearly! Thank you! I think it’s worth it to often look back at the basics of a build system. Getting too complex in so many directions too early on in the learning game can be very counter productive.

9

Using Chrome, “Batman” is never displayed and Chrome developer tools logs the following error:

Access to script at ‘https://unpkg.com/[email protected]/umd/react-dom.development.js’ (redirected from ‘https://unpkg.com/react-dom@16/umd/react-dom.development.js’) from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

However, it works in IE 11. Did some security options go into effect?

10

Can you copy/paste your full source code for this example? That is strange!

11

I’m using the code from your GitHub site. Is that up to date?

12

I am not seeing any errors on Chrome Canary. The example you posted is still accurate. Here is the version of the code from the book/tutorial:

13

It seems like it’s an unpkg.com problem. But then why wouldn’t you see it also? Someone else on stackoverflow said they see the error, but others don’t. https://stackoverflow.com/questions/54403417/unable-to-retrieve-react-dom-development-js-from-unpkg

14

That is really strange! I’ll keep tracking this periodically. If viewing the page via localhost is the 100% guaranteed fix, then I may have to adjust my instructions in the future to rely on that as opposed to directly previewing via the file system :world_map:

15

What’s the easiest way me for to set up a local web server so that I can try it with http://localhost?

16

Do you have Node installed? If not, you can go https://nodejs.org/en/ and install the appropriate version for your OS.

Once you have it setup, first install http-server via the Command Prompt or Terminal:

npm install -g http-server

Then navigate to the directory containing your project:

cd \Users\kirupa\Desktop\myFiles\

All that remains is to launch the http-server from this location:

http-server

After a few seconds, you’ll be able to navigate to http://localhost:8080/ and launch the files as if you would in the browser for a normal web URL.

Let me know if that works for you.

Cheers,
Kirupa

17

Thanks for the http-server instructions. But the results are the same when accessing the file via http://localhost:8080

I actually figured out how to get it working sticking with the file approach: It turns out if I take out “crossorigin” then it works in Chrome!

There’s a discussion of this at With <script crossorigin=‘anonymous’>, why is a script “blocked by CORS policy”?

1 Like
18

I know it’s 2 years later, but this is such a well written article; I found this chrome extension super helpful:

image
image410×533 29.8 KB

1 Like