Setting up React
Without a build step
Install
No install is necessary when including the React and ReactDOM JavaScript libraries via HTML script tags.
Hello, world!
Create an index.html
file.
|
|
In the same folder, create the index.css
file.
|
|
And also the s01.js
file where we actually use the React library to display Hello, world! on the page.
|
|
Open index.html
How it all work
index.html
loads React, ReactDOM, and Babel JavaScript libraries from the Unpkg CDN. This makes React
, ReactDOM
, and Babel
objects available in the global scope.
In the brower JS console, try:
|
|
The styles.css
file- while really not necessary for this example, makes the output look a little bit nicer.
All the React bits are in the s01.js
file.
Line 1 defines a JavaScript constant named s01
. Let’s break-up that line so the parts of the right-hand side is clearer.
|
|
The createRoot method sets-up React to manage a section of the DOM
-
In this case, we want React to manage the DOM element with id
s01
and all its children. -
The document global object has nothing to do with React or ReactDOM - it is supplied by the JavaScript runtime in the web browser
After line 1 is executed, the s01
constant is set to “a React root object”- which is an object with a render
method and an unmount
method.
We use the render
method in line 3 to render a React element (an in-memory representation of a DOM element) to an actual DOM element.
After this point, React is in charge of managing that DOM element. Later we can use s01.unmout()
to tell React to stop doing it.
Both line 1 and line 3 are straight up JavaScript- but line 2 is special. It is not even valid JavaScript!
|
|
The <p>Hello, world!</p>
expression uses the JSX syntax extension to declaratively define UI components. Intitutively, it is obvious that we are declaraing a p
(paragraph) element.
- The
element
constant doesn’t get initialized with a DOM element- instead its value is set to a “React element”. - The JSX syntax worked here because the “Babel library we included in our HTML file” transpiled this “JSX expression” to “plain JavaScript code” that the browser’s JS runtime could understand.
Notice that in our HTML, instead of the default text/javascript
type for the script, we’ve used type="text/babel"
.
With a build step
Install
Hello, world!
Prepare a fresh React project and run it.
|
|
Open the URL http://localhost:5173/ in a web browser.
Save the generated code in a new Git repository.
|
|
First time using Git?
If this is the first time you are using Git in your machine, you may need to configure your user.name
and user.email
setting by running:
|
|
When using Github- as a best practice, use an email like: [email protected]
- You can find your address at https://github.com/settings/emails
- As an example, my email is
[email protected]
Delete the files src/App.jsx
and src/App.css
Create the file src/s01-hello.jsx
with the following content:
|
|
Create the file src/s01-hello.module.css
with the following content:
|
|
Replace the content of src/main.jsx
with the following:
|
|
Replace the content of src/index.css
with the following:
|
|
Replace the content of index.html
with the following:
|
|
ESLint error at the first line?
If your IDE gives an error at the <!DOCTYPE html>
line, modify the .eslintrc.cjs
file to add *.html
to the list of ignorePatterns
|
|
How it all work
TODO