Introduction - Hello React World - Material Design for Bootstrap

1. Download project files

Once we have our environment ready (i.e. npm installed). Let's download the working files. We can do it in two ways:

1.1 GIT repository

In order to download the working files, open a console and type:

shell


        git clone https://github.com/mdbootstrap/React-Tutorial-Agenda-App.git

1.2 ZIP file

If for some reason you don't want to use Git directly, you can simply download this zip file and extract it.

Info:
Working folder contains multiple folders called lesson-1 to lesson-12. Each of the folders contains the final version of the code from each lesson. In case of problems you can always refer to the corresponding lesson folder, check the final code and compare it with yours to spot the difference.

2. Files structure and content

Open the start-here folder in your editor. I use and recommend Visual Studio Code

Our application consists of different files, we will go through them in turn. For now, let's focus on the ones which are important for us to start development.

This file is called /src/index.js file. Once you open it you will notice that it has a lot of import statements and more...

(the content of the file may look different depending on the version of the React which you are using)

Each of the lines has its purpose, however we don't need all of them to start using React, therefore, remove the entire content from the file. We will write all the required statements ourselves.

3. Hello World in React

Paste following code into the index.js file:


        import React from "react";
        import ReactDOM from "react-dom";
        //JSX
        ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));

Save the file.

Start the project (npm start in a console).

Note:
If you haven't use npm before you have to execute the following steps:

Open a command line
Navigate to the project location (i.e cd c:\React-Tutorial-Agenda-App\start-here
Type npm install to install all dependencies
Type npm start to start our project
Open the address http://localhost:3000 in a web browser.

The result in a browser, should be like this below:

Let's stop here and analyze what is actually going on.

We have React and ReactDOM dependencies included in this project.

I'll get to why we import React in a second. Firstly let's talk about ReactDOM - we have to import it so that we could use our ReactDOM.render() method.

In a nutshell, we are telling React what do we want to render (first argument), and where do we want this to be rendered (second argument). Let's start with the first one.

Info: Visual Studio Code makes it easy to remember which parameter is responsible for what, simply start typing given function and you will see the description:

It may look surprising for you that we provide an HTML tag directly as an argument of the function. Probably you wonder why are you putting an HTML element in the middle of your JavaScript parameter? That's an obvious syntax error! JavaScript is going to think that that is a less than symbol (<) and that this is a greater than symbol (>) and not know that this is an HTML element.

Fortunately, React creators created a language called JSX. JSX (JavaScript XML) is an extension to the JavaScript language syntax. It is very much like a JavaScript rendition or version of HTML, in fact we're going to see that most of JSX looks almost identical to HTML with those few slight differences that we'll talk about along the way.

So this is a reason why do we have to import React in the first line. The React library is the one that will enable JSX to work the way it's supposed to work.

In fact you can see that if I remove or comment out the import React line and try to save it and refresh the browser, it tells me that React is not defined even though I'm not explicitly using React anywhere in my code:

Let's bring the first line back.

Remember: React uses JSX.

4. index.html

Let's open a public/index.html file to have a quick look.

This auto-generated file contains a lot of code. For the sake of that lesson let's remove everything and leave only the following line:


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

Obviously, that isn't a valid HTML file however I want to show you that ReactDOM.render() is actually attaching React code to the container. Save the file, run the browser and inspect our website

As you can see, although the initial div is empty, our heading was dynamically attached to it by React. Obviously, we do not have to attach it to root. We can attach it to any other valid DOM element:

We are almost done with our introduction. Let's test one last thing before we finish it.

5. React.Fragment

You already know that you can pass JSX tags like headings directly to the function. What is important to know is that you cannot render two JSX objects next to each other!


        ReactDOM.render(<h1>Hello World</h1><h2>Sub heading</h2>, document.getElementById("root"));

This will cause an error:

It tells that you can't have two adjacent JSX elements but instead they have to be wrapped in something so that they count as just one element with two elements inside for example:


            ReactDOM.render(
                <div>
                  <h1>Hello World</h1>
                  <h2>Sub heading</h2>
                </div>,
                document.getElementById("root")
              );

Which works as follows:

If you don't want to wrap it with an extra div, there is a way to do that as well. Instead of div, simply use the special container - <React.Fragment>.


            ReactDOM.render(
                <React.Fragment>
                  <h1>Hello World</h1>
                  <h2>Sub heading</h2>
                </React.Fragment>,
                document.getElementById("root")
              );

This will generate the same output without an extra <div>

Previous lesson Next lesson

Spread the word:

Do you need help? Use our support forum

About the author

Dawid Adach

For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...