When it comes to building a React app, I get used to searching for a UI library to build the front pages, a straightforward way to achieve fashionable and user-friendly look and feel. One day, I was looking for technical help on the Internet and came across W3Schools How To site. It surprised me because it shows a way to create fantastic web components using the common plain technologies, easy, fundamental, transparent. So, I started trying some of them in React and shared some in this blog.
The project is available on GitHub. You can clone and run it locally with the following commands.
git clone https://github.com/plus-tech/reacthowto.git
(move to the newly created folder, reacthowto)
npm install
npm start
A Typical Example - Slideshow Carousel
We start with Slideshow Carousel, which presents an image gallery to users.
The idea is to load all the images but make only one visible at one time and hide all the others.
To make an image visible, set its “display” attribute to “block”.
To make it invisible, set “display” attribute to “none”.
Clicking Prev button will hide the current image and display the one before it. Next button will do the similar thing but show the next image.
We will use a state variable to control which image is available.
Let us walk through this step by step.
Load images - Load all the images on a given folder into a list and get the number of them at the same time.
Define a state variable - It indicates which image is currently active, the default is set to 0, the first one in the list.
Function to change images’ visibility - If you click the Next button, the next image is set active, but if the currently active one is the last in the list, then loops back to the first. On the contrary, the previous image is set active if you click the Prev button.
Show images - Here we use a <div> element to hold the <img> element and use map function to generate the list of <div>s. As you can see, the display attribute in style of each element is set to either “block” or “none”.
Button’s onClick - When you click on either Prev or Next button, ShowCurrImg function is called to shift the active image.
Dots on the bottom - A dot is associated to an image in the same order. You click on a dot, and as a result, the underlying image is brought to the front.
The source files are available on GitHub.
- slidecarousel.css
- slidecarousel.jsx
List Grid View
Let us explore one more example, looking at using a function to generate elements instead of setting their style.
In this example, when you click on the List button, the button is highlighted, and the column cards are arranged as a vertical list. The Grid button arranges the cards as a 2x2 grid.
When the items are in List view, the List button becomes active, and vice versa. The showBtn function returns the buttons according to the current state of view.
How to embed the buttons into another <div>? Simply put the function into a pair of curly brackets, shown below.
For more details, please refer to the below files.
- listgridview.css
- listgridview.jsx
Add an Event Listener
When I tried to build the floating bar component, I needed to catch “scroll” event. This can be done in the way below.
- Declare a function to process the event.
- Use addEventListener to register the event.
- Wrap the above inside useEffect hook.
The source codes are findable in
- floatingbar.css
- floatingbar.jsx.
No comments:
Post a Comment