text: :
  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.jsfile. 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.jsfile:
  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 installto install all dependencies
  - Type
  npm startto start our project
  - Open the address 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.htmlfile 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:
  