Author: Dawid Adach
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.
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.

/src/index.js
file. Once you open it you will notice that it has a lot of import statements and more... 
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
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.


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:


Let's bring the first line back.
Remember: React uses JSX.
4. index.html
public/index.html
file to have a quick look.
<div id="root"></div>


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

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

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

Previous lesson Next lesson
Spread the word:
