The simplest react app in 100 lines of code
 
  February 2, 2020


The following code allow us to understand the way we can built a simple react app

Read the comments in the code 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>React JS Search Results</title>
  <!-- Add React and Babel References -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <section>
    <!-- Every React app must have what’s known as an entry point. 
    The entry point is an HTML element where we insert our React application into the page. -->
    <div id="root">
    </div>

    <!-- Our Script must have type="text/babel" for Babel to work-->
    <script type="text/babel"> //React code will go here
      // Babel converts this code that looks like HTML into valid JavaScript (JSX: JavaScript XML)
      // The functions in react must be Capitalize to differentiate from normal javascript functions
      // React Functions became Components
      // The Component must return JSX code between parenthesis function ComponentName() { return ( ...JSX Code ... ) }
      // Every React Component must return either JSX elements or other React components.

      /* PROPS (Passing data to the components)
        We can pass data to the function components using attributes and it is passed to the Link function as an argument
        <Link attributeName="value" />

        React collects and organizes the data passed to a given component as a single object.
        The name for data passed to a component, such as title, is props.
        All prop values exist within the function component itself on a props object.
      */

      /* SEPARATE DATA FROM UI
          Make and array of objects and pass down the link components through props.
          Since this is a common pattern in React, it has its own method .map() that works with JSX
          (don't confuse with JS array.map() it's similar but Reacts works only for JXS)
      */

      const linkData = [
        {
          title: "React - A JavaScript Library for Building User Interfaces",
          url: "https://reactjs.org",
          shortUrl: "reactjs.org",
          excerpt: "React makes it painless to create interactive UIs."
        },
        {
          title: "Jorge Anaya's Blog",
          url: "https://www.jorgeanaya.dev",
          shortUrl: "jorgeanaya.dev",
          excerpt: "Personal insights about coding and life"
        },
        {
          title: "Google",
          url: "https://www.google.com",
          shortUrl: "google.com",
          excerpt: "When everything fails then Google is your friend, GoogleIt!"
        }
      ]

      function Link(props) {
        // We use {} curly braces to insert or interpolate dynamic values wherever we need.
        return (
          <div>
            <a href="{props.url}">{props.title}</a>
            <div>
              <h3>{props.shortUrl}</h3>
            </div>
            <div> {props.excerpt}
            </div>
          </div>
        )
      }
      // Since React components can return other React components, we can make an App Component
      // The entire JSX expression is surrounded by curly braces
      // JSX allows us to insert any valid JavaScript expression between curly braces.
      function App() {
        return (
          <section>
            {linkData.map(function (link) {
              return (
                <Link
                  key={link.url} // Each child in a list should have a unique "key" prop
                  title={link.title}
                  url={link.url}
                  shortUrl={link.shortUrl}
                  excerpt={link.excerpt} />
              ); // return end, function, map() & expression end */
            })}
          </section>
        )
      }
      ReactDOM.render(<App />, document.getElementById('root'))
    </script>

</body>

</html>


#frontend #react