Smallest React Example

Posted on

What is the smallest React program you can write? If you head over the React docs page you get the following code:

  ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
  )

The code above is a snippet but what it does is display "Hello, world!" on the page. How does it do it?

ReactDOM.render() method renders our React element or component on the actual DOM. It accepts two arguments. I like to remember it as the "what" and the "where". The "what" is the element/component you want to render and the "where" is the place on the web page where you would like the React element/component to render. In this case we have an HTML element in our page (not shown) with id of 'root'. That is where our "Hello, world!" will be rendered. It would look something like this:

  <div id="root"></div>

I would like to extend this example and introduce props. Props are properties. They are to components as arguments are to a function. We will create a new React component Hello and render it. Here's the code:

  function Hello() {
      return <h1>Hello, nurse!</h1>
  }

  ReactDOM.render(
      <Hello />,
      document.querySelector('#root')
  )

We created a React Component, "Hello" which returns a React element. Then we call ReactDOM.render() and pass in the "Hello" component and the root node on our page where we need it to render and it renders "Hello, nurse!" on the page. You may have seen a different method of creating React Components using ES6 class syntax, both methods are OK.

But where is the prop I promised? Well, right now I render a static element to the page, what if I want to change what is rendered dynamically? Instead of "Hello, nurse!" I want to change it to say Hello, {whatever}. With props I can do that. Let's see what it looks like.

  function Hello(prop) {
      return <h1>Hello, {prop.name}!</h1>
  }

  ReactDOM.render(
      <Hello name="baby" />,
      document.querySelector('#root')
  )

Same code, but we added an argument prop to our "Hello" component and a name prop to our Component with the value "baby". The curly brace is required to run JavaScript expression in JSX. What?

That didn't make sense. I'm sorry. I won't go too deep into JSX here but remember when I was saying things like React element/component? Well when we created the component Hello and returned <h1>Hello, ...</h1> though that <h1> looks like HTML, it's actually JSX. JSX stands for JavaScript eXtensions. So to run JavaScript in JSX we surround our expression in curly braces.

Now the code above renders "Hello, baby!" on the page. We can change the value of name to be anything and it will render "Hello, x!" where x is whatever string value for name we chose.

The great thing about JSX is that it's easily composable. Let me show you what I mean.

   function Hello(prop) {
       return <h1>Hello, {prop.name}!</h1>
   }

   ReactDOM.render(
    <div>
        <Hello name="Tom"  />
        <Hello name="Dick" />
        <Hello name="Harry" />
    </div>,
   document.querySelector("#root"))

Same code, just that we decided we want to render several "Hello" Components, passing different values each time and we can. We just have to wrap it in a div because the first argument to ReactDOM.render() is a React Component. Since we have several, we wrap it in a div element.

I've just scratched the surface of what React is capable of. There's more where this came from on the React docs page, take a look see, it's really well written.

It's ok if you don't get it the first time through or the tenth time through. I've tried to learn React a bunch of times but only now is it opening up to me. So don't give up. Keep at it.

PS
I have dedicated the rest of the year to learn and master React. I'm still in the beginning stages of learning and using the library. Please forgive any mistakes you come across. Better yet, get in touch and put me through, I'd appreciate it.

Thanks for reading!