Skip to content

agumusay/react-contanct-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Plain React

Let's build a UI with only plain React.

For this exercise we will use:

example

Plan for action:

  • we need to install the necessary dependencies: react and react-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 a span

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 each li 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

Releases

No releases published

Packages

No packages published