Learn React templates in 5 minutes

Illustration of a person with an exaggerated long arm typing frantically on a laptop, depicting stress or overwork. The character has a determined expression and dynamic hair movement.

This article is for those readers who already know some CSS/HTML, probably also a bit of JavaScript and want to try React, but not sure what is the easiest way to start with. I believe this way is to start with just basic markup by learning React templates.

Let’s have a walk through the HTML to React markup approach by recreating the bootstrap signin page, that looks something like this in React app:

Step 1: Opening the editor

It is not necessary to build a new project from scratch when you are working with React. I suggest to take advantage of some ready made projects in CodeSandbox and build something on top of it. We can google that by keywords: “React CodeSandbox”, here is the first page that was found.

It looks like this:

And we can even find some markup already in place:

   <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

So, what we should do next is just to replace this code with a markup we copy from the singin page. Let’s do that in Step 2.

Step 2: Adding markup

To take the relevant code we could use the dev tools panel of Chrome (right click the page and select Inspect option from the dropdown menu) and just copy the code that contains the form we are building (it is displayed on the screen below right to the page content):

After copy-pasting the form code into a CodeSandbox we get the following result:

So much red! But let's keep calm. There is a hint in the right part that explains what we should do to fix that: “Expected corresponding closing tag”. The issue is React tags should always be closed, even those that are not closed in regular HTML (for example, input or img). The following HTML code:

<input type="checkbox" value="remember-me">

should look like this (with a closing /> at the end of the line ) html <input type="checkbox" value="remember-me" />

Step 3: Fixing tags (closing them)

We should close all <input> and <img> tags to be <input /> and <img />, the result is as follows:

Great! Half of the work is done: we have unstyled markup in place. To set styling we need to add bootstrap to the page (since the example comes from the bootstrap page).

Step 4: Adding styling

The easiest way to get bootstrap styling is to copy-paste the code of the bootstrap.min.css file directly into the styles.css that is located next to the App.js in the project folder:

Now we have some styling, but it doesn’t look exactly the same as in the demo page. Checking the demo page code we should note that the signin page has some extra styling in a separate file:

After copying that code to styles.css the result is as follows:

Almost there!

The last thing to do is to set 100% width to the #root container (that is inherited from the initial template of the CodeSandbox) and to center the text as follows:

That is it! We did it, you can now check the working app here and the code for it on CodeSandbox.

P.S. I forgot to add an image source:

Conclusion

We built a signin page in React using HTML markup and some styling in about 5 minutes. Now you should be able to migrate any markup from a HTML page to a React project on your own. While doing so, please note that the approach in the article is a bit shortened for brevity and has some things that could be improved: a giant styles.css file and some console warnings. If you are curious about how to fix console warnings and split the styles.css code, please check a separate CodeSandbox for it.

Also, in case of any questions please ask them in the comments section below.