Introduction – Hello React World

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. 

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

        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:

1. Open a command line
2. Navigate to the project location (i.e cd c:\React-Tutorial-Agenda-App\start-here
3. Type npm install to install all dependencies
4. Type npm start to start our project
5. 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 

                    <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")
              );