You can use any of the online code editor for React

For example https://codesandbox.io/.

Here is a template project for lab 2. Note, if you edit any files you will get a fork. Keep the new url if you want to access your changes.

Preparation

To run from the computers at LTH, first run:

> initcs

When you use your own computer download and install node.js.

Create a new react project

A react applications is built from a number of node.js packages. To manage the packages node.js comes with a package manage system named npm. It is easy to set up a react project, including the tool chain, using npm tools.

Open a terminal (cmd.exe on windows), or use the terminal window in VSCode (view/Appearance/Show Panel). To create a new react project (npx is a npm tool, be patient, a lot of stuff will be downloaded):
> npx create-react-app lab2
> cd lab 2
> ls

Lets look at what was generated:

README.md - a description of the project, update it to document your project.

node_modules - a directory containing all packages downloaded by npm. Do not put this in your git repo, instead use npm to populate it after cloning a git repo: "npm install".

package.json - a configuration file for npm. It contains declarations of commands you can run, ("scripts" such as "npm start"). The file also holds a list of npm packages your project depends on (these are downloaded to node_modules). In package.json you provide additional information about your project, such as its name, license, and version. Update these to publish your project as a npm package for others to use.

package-lock.json - additions file used by npm to manage chains of dependencies so it can recreate the content of the node_modules directory.

public - additional files that is part of the webb page containing the application, for example images. It also contains the index.html file. You can edit it, for example to update the page title and include additional css files.

src - contains the source files for your application.

.gitignore - tells git which files to ignore (do not put generated and temporary files under version control)

Now you can build and run the template application:

> npm start

The application will automatically open in your default web browser. The build tools are still running in the background monitoring the source files. When you save any of the project files, the application is rebuilt and the browser is dynamically updated. There is no need to reload the page.

For debugging I recommend Visual Studio Code + chrome. For this setup you need to open the page in chrome if it is not your default browser.

Let's continue with your application. We need additional packages to style to the application:

> npm install bootstrap

If you want to use dynamic behaviour, like bootstrap modals, you need some additional packages:

> npm install jquery popper.js

Now letts add some styling, edit src/index.js. At the top add:

import 'bootstrap/dist/css/bootstrap.css';
import "bootstrap/dist/js/bootstrap.js"; // skip this if you do not use bootstrap modals
import $ from 'jquery';                  // skip this if you do not use bootstrap modals
import Popper from 'popper.js';          // skip this if you do not use bootstrap modals

Open App.js and change the render() method:

function App() {
   return (
     <div>
       <div className="jumbotron text-center">
         <h1>My Own Salad Bar</h1>
         <p>Here you can order custom made salads!</p> 
        </div>
       <div>
         Add your own react component here!
     </div>
   </div>
   );
 }

Save the file. Your browser should automatically view the new version of the app, if not you can reload the page.

You can find more info about the different bootstrap components here.