Building Your First React App | kirupa.com


#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/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/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/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/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.


#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.