A REACT APP A DAY: DAY 1 : "FIRST APP"

By: Saurav

2018-01-10 04:12:00 UTC

Day 1

Let's create a simple app which uses a single component to render on the DOM.
I feel react is based on OOP composition. It provides few methods which you can use in your app. Just like in ruby, you will create modules and add those methods to another class (objects.)

Step1: To include React module, React DOM module and Babel(transpiler), add to the head of the HTML document:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Step 2: Create a component and use render function provided by React.component module. This function returns a JSX inspired HTML element:

<script type="text/babel">
      class App extends React.Component{
        render(){
          return <h1>First app!</h1>
        }
      }
    </script>

Step 3: Create an object from the component class and render that into an HTML element using ReactDOM module's render function:

var mount = document.querySelector('#app');
ReactDOM.render(<App/>, mount);

Finally, let's see how it looks in the browser:

Reactapp1

Appendix:

Final code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>First App</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

    <script type="text/babel">
      class App extends React.Component{
        render(){
          return <h1>First app!</h1>
        }
      }

      var mount = document.querySelector('#app');
      ReactDOM.render(<App/>, mount);
    </script>

</body>
</html>

Owned & Maintained by Saurav Prakash

If you like what you see, you can help me cover server costs or buy me a cup of coffee though donation :)