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 v20.11.0 (12.02.2024).
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!
Remarks: If you got an error like this:
Then install npm global by running: npm install -g npm and try again.
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
