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:
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.
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
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
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
Save the file.
Start the project (
npm start in a console).
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
npm install to install all dependencies
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
ReactDOM - we have to import it so that we could use our
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
(<) 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
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.
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:
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.
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:
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>.
This will generate the same output without an extra <div>