Billedresultat for react logo Exercise: React part 1 (Basic)

Idea: Introduction to React and JSX.
Background: https://reactjs.org/ and JSX In Depth

In this exercise you have to create your very first React App and work with JSX.


Step 1 (Check your Node version)
Check if you have latest version of node installed (open terminal and run: node –v)
Note the latest version (Windows) is v12.15.0 (06.02.2020).

If not: https://nodejs.org/en/download/

Step 2 (Your first React project)

a) Open VSCode and create a new directory: React.
b) Open terminal window and navigate to the new folder (CD React)
c) Create a new React project named: jsx (run: npx create-react-app jsx)

Note that it may take several minutes!

Once the project is created:

d) Navigate (change directory) to 'jsx' and run: 'npm start'

Verify that your first (default) React app is running on localhost: 3000

e) After verifying that your default app is running, delete all default src files:

f) Create a new index.js file with the following content:

//Import the React and ReactDom lib
import React from 'react';
import ReactDOM from 'react-dom';

//Create a react function component
const App = () => {
return <div><h1>Hello world!</h1></div>;
};

//Take the react component and show it on the screen
ReactDOM.render(<App />, document.getElementById('root'));

 

Verify that you have now created your first "Hello World" React app, consisting of a simple function component that writes "Hello world!".


Step 3 (JSX vs HTML)
There are a few differences between JSX and HTML we need to figure out:

1) Another syntax is used when styling inline in JSX e.g.:

Generally, JS objects are used instead of a strings and note the name change when we have a compound property name, '-' is removed and the subsequent letter is replaced by a corresponding capital letter.

2) In JSX we don't write: class = ”…” , but className = ”…” when we specify a class for an element. This is due to previous problems of confusion between a JS-class and a CSS-class.

3) From JSX, we can easily refer to a JS variable / JS function, simply by using JSX interpolation with {}, for example:

const App = () => {
const helloText = 'Hello World!'

    return <div><h1>{helloText}</h1></div>;
};

 

a) Try to create a variable with a text: "Hello World!" and refer to it from the JSX section with {}.

b) Try changing the background color of the div element to green and the text to white.



Congratulation! - Your first React App is running!

/ Henrik H