Let's build React component

A few weeks ago I bought myself a book about React basics called Learn Pure React and started reading it. After few pages I decided to write my first blog post about the most basic feature of React - component.

So we will be writting our first Hello, World! component today.

What is React?

“React is an open-source JavaScript library providing a view for data rendered as HTML. React views are typically rendered using components that contain additional components specified as custom HTML tags.”

What is React Component?

It’s basically a code block full of different code blocks(components) that is being rendered into DOM.

We will create our Hello, World! component soon, so everything will get much clearer (if it already isn’t).

Note:
Components can render to only one node in DOM tree.

Let’s create our first component

We will be using create-react-app created by Facebook to make our build process faster and much easier. Check out this link for instructions on how to install create-react-app.

So after you installed c-r-a on your Mac/PC/WhateverYouUse, we will create our project by entering in terminal:

 
 $ create-react-app hello-world && cd hello-world
 

Now wait for a few seconds, or half a minute. After everything is ready, we may notice few folders are now installed in our hello-world directory. We have few extra files that are not needed and will remove them by typing next commands in our terminal:

 
 $ rm src/App.js src/App.css src/logo.svg
 

Those are extra starting files that are setting default style we don’t need at the moment.

Now we can start our build by typing this into terminal:

 
 $ npm start
 

Now, open your src/index.js file and make it look like this:

 
  import React from 'react';
  import ReactDOM from 'react-dom';

  // we will write some code here very soon


  // Render component to DOM

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

Next step is to create our HelloWorld component:

Note:
React components are written in Pascal case.
 
  import React from 'react';
  import ReactDOM from 'react-dom';

  // HelloWorld component

  const HelloWorld = React.createClass({
    render: function(){
      return (

      );
    }
  });

  // Render component to DOM

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

Don’t forget to change the name of component that we render on bottom of our code from App to HelloWorld.

Let’s put our Hello, World! in our component:

 
  import React from 'react';
  import ReactDOM from 'react-dom';

  // HelloWorld component

  const HelloWorld = React.createClass({
    render: function(){
      return (
        <h1>Hello, World!</h1>
      );
    }
  });

  // Render component to DOM

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

And that’s it! You should have “Hello, World!” written on you webpage.

In next blog post, I will teach you how to create our HelloWorld component from two different components: Hello and World.