# Building Your First React App

**URL:** <https://forum.kirupa.com/t/building-your-first-react-app/636221>\
**Category:** programming\
**Created:** [March 20, 2017, 5:11am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221 "2017-03-20T05:11:39Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2017, 5:11am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/1 "2017-03-20T05:11:39Z")

</div>

by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 10 October 2016

By now, you probably know [all about the backstory of React](http://www.kirupa.comintroducing_react.htm) 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](http://www.kirupa.com/react/building_your_first_react_app.htm)

---

<div class="post-metadata">

**Author:** ![Bin\_Zhang](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bin_zhang/32/8738_2.png) [@Bin\_Zhang](https://forum.kirupa.com/u/Bin_Zhang)\
**Post date:** [October 11, 2017, 8:15am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/2 "2017-10-11T08:15:53Z")

</div>

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

```auto
<!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/babel-standalone@6.15.0/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>

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 11, 2017, 5:02pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/3 "2017-10-11T17:02:18Z")

</div>

Looks like those unpkg links are broken

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 11, 2017, 5:56pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/4 "2017-10-11T17:56:38Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Bin\_Zhang](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bin_zhang/32/8738_2.png) [@Bin\_Zhang](https://forum.kirupa.com/u/Bin_Zhang)\
**Post date:** [October 12, 2017, 2:10am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/5 "2017-10-12T02:10:07Z")

</div>

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

Thanks Senocular as well.

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [February 24, 2018, 3:23am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/7 "2018-02-24T03:23:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pleasespammelater](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pleasespammelater/32/9469_2.png) [@pleasespammelater](https://forum.kirupa.com/u/pleasespammelater)\
**Post date:** [January 28, 2019, 5:37pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/9 "2019-01-28T17:37:10Z")

</div>

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

> Access to script at ‘[https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js](https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js)’ (redirected from ‘[https://unpkg.com/react-dom@16/umd/react-dom.development.js](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?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 28, 2019, 7:30pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/10 "2019-01-28T19:30:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pleasespammelater](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pleasespammelater/32/9469_2.png) [@pleasespammelater](https://forum.kirupa.com/u/pleasespammelater)\
**Post date:** [January 28, 2019, 8:13pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/11 "2019-01-28T20:13:08Z")

</div>

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

> <https://github.com/kirupa/kirupa/blob/master/reactjs/helloworld.htm>

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 28, 2019, 8:21pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/12 "2019-01-28T20:21:43Z")

</div>

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:

> <https://github.com/kirupa/kirupa/blob/master/reactjs/helloworld_batman.htm>

---

<div class="post-metadata">

**Author:** ![pleasespammelater](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pleasespammelater/32/9469_2.png) [@pleasespammelater](https://forum.kirupa.com/u/pleasespammelater)\
**Post date:** [January 28, 2019, 8:44pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/13 "2019-01-28T20:44:48Z")

</div>

It seems like it’s an [unpkg.com](http://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](https://stackoverflow.com/questions/54403417/unable-to-retrieve-react-dom-development-js-from-unpkg)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 28, 2019, 9:58pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/14 "2019-01-28T21:58:43Z")

</div>

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 🗺

---

<div class="post-metadata">

**Author:** ![pleasespammelater](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pleasespammelater/32/9469_2.png) [@pleasespammelater](https://forum.kirupa.com/u/pleasespammelater)\
**Post date:** [January 28, 2019, 10:41pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/15 "2019-01-28T22:41:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 29, 2019, 3:15am UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/16 "2019-01-29T03:15:56Z")

</div>

Do you have Node installed? If not, you can go [https://nodejs.org/en/](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/](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

---

<div class="post-metadata">

**Author:** ![pleasespammelater](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/pleasespammelater/32/9469_2.png) [@pleasespammelater](https://forum.kirupa.com/u/pleasespammelater)\
**Post date:** [January 29, 2019, 3:21pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/17 "2019-01-29T15:21:02Z")

</div>

Thanks for the http-server instructions. But the results are the same when accessing the file via [http://localhost:8080](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”?](https://stackoverflow.com/questions/41069330/with-script-crossorigin-anonymous-why-is-a-script-blocked-by-cors-policy/41069421)

---

<div class="post-metadata">

**Author:** ![Roy\_Mathew](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/roy_mathew/32/12818_2.png) [@Roy\_Mathew](https://forum.kirupa.com/u/Roy_Mathew)\
**Post date:** [November 7, 2020, 4:13pm UTC](https://forum.kirupa.com/t/building-your-first-react-app/636221/18 "2020-11-07T16:13:50Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d50d9f7be57f9eb0190f791257ddf292552279d6.png)