Skip to content

    Foundations

    Create your first app

    Search Engine Optimization

    Excel

    0 points

    Foundations

    Create your first app

    Search Engine Optimization

    Excel

    From JavaScript to React

    Getting Started with React

    To use React in your project, you can load two React scripts from an external website called unpkg.com:

    • react is the core React library.
    • react-dom provides DOM-specific methods that enable you to use React with the DOM.
    <!-- index.html -->
<html>
  <body>
    <div id="app"></div>

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

    <script type="text/javascript">
      const app = document.getElementById('app');
    </script>
  </body>
</html>

    Instead of directly manipulating the DOM with plain JavaScript, you can use the ReactDOM.render() method from react-dom to tell React to render our <h1> title inside our #app element.

    <!-- index.html -->
<html>
  <body>
    <div id="app"></div>

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

    <script type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

    But if you try to run this code in the browser, you will get a syntax error:

    This is because <h1>...</h1> is not valid Javascript. This piece of code is JSX.

    What is JSX?

    JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax. The nice thing about JSX is that apart from following three JSX rules, you don’t need to learn any new symbols or syntax outside of HTML and JavaScript.

    Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

    Adding Babel to your project

    To add Babel to your project, copy and paste the following script in your index.html file:

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    In addition, you will need to inform Babel what code to transform by changing the script type to type=text/jsx.

    <html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- Babel Script -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

    You can then run your code in the browser to confirm it is working correctly.

    Comparing the declarative React code you just wrote:

    <script type="text/jsx">
  const app = document.getElementById("app")
  ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>

    to the imperative JavaScript code you wrote in the previous section:

    <script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

    You can start to see how by using React, you can cut down a lot of repetitive code.

    And this is exactly what React does, it’s a library that contains reusable snippets of code that perform tasks on your behalf - in this case, updating the UI.

    Note: You don’t need to know exactly how React updates the UI to start using it, but if you’d like to learn more, take a look at the UI trees and the react-dom/server sections in the React Documentation.

    Quick Review: Why do you need to compile your React code?

    Submit

    Additional Resources:

    PrevNext