Let's build a UI with only plain React.
For this exercise we will use:
Plan for action:
- we need to install the necessary dependencies:
react
andreact-dom
- once we have them installed, we will need to import them (as ESNext modules)
- we need a root element where you will render the elements. We add this root element inside the HTML
- let's create a headline (saying
My awesome contacts list
) and display it on the page - let's make the word
awesome
highligthed. To do this, we need to wrap in aspan
Extra
- let's display a list of contacts, to create random data we can use
faker.js
- we need to create a
ul
and for eachli
we need to pass each contact's data
Extra vol.2
- now let's update the 1st name in the contacts list every 1 sec.
- go to the dev tools (the Elements tab), you can see the DOM is updating, but only the text within the node that is changing