How to add an interactive tutorial to a website with React
29.08.2024
94
0
0
0
0
Intro, or for what reason you should bother creating interactive tutorials
Hello again. In this article, you will learn how to quickly and easily create an interactive tutorial for your React tool. And the first question I would ask is: is it even necessary?
And indeed, if the functionality of the tool is as simple and intuitive as possible, then there is no need to bother with a tutorial. Ideally, this is what you need to strive for, so that the user starts using your tool right away.
But as it happens in real life, not all tools are easy-to-understand, and many have large and complex functionality. Take the following web tools, for example:
Topvisor
Google Analytics
You can't just jump into them and use them. First, you have to learn how to use them. In my case, the tool turned out to be not very intuitive. Therefore, we will make an embedded tutorial on the site.
Creating new events for launching a tutorial
We already have a button to call up a chain of hints.
Now we need to set it up so that this chain works. We will do this by creating our own event.
Before
After
We added an ID to the button + our own click event.
Creating a new component, Tutorial.js
Now let's create a new component. In the src/components directory, create a file Tutorial.js. Then add the following code there:
The essence of this code boils down to searching for marked elements with the tutorial_hint class and rendering a hint next to this element. The function that is worth paying attention to is displayNextHint. Having found all the marked elements, it finds the element associated with it and takes the hint text from there. Then it selects the hint element and shows the hint itself.
In order for the component to be able to render, we will add another element to app.html, right before the app_settings element.
And we will connect the new component to index.js
Помечаем элементы для подсказок
Осталось только пометить необходимые элементы для подсказок.
File AppActions.js
File AppQueries.js
File AppSettings.js
File AppUtils.js
Conclusions or how it is supposed to look
As a result, it will all look something like this:
If you missed everything and want the project as-is, download it here.
In the next article, we will add user logging and authentication.
Feedback form
Comments
(0)
Send
It's empty now. Be the first (o゚v゚)ノ
External links
Used termins
React ⟶ An open-source JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications where you need a fast and interactive user experience. It allows developers to create reusable UI components, manage the state of their applications, and efficiently update the user interface in response to data changes.
React component ⟶ A reusable piece of code in a React application that represents a part of the user interface (UI). Components can be either class-based or functional, and they allow developers to build complex UIs by breaking them down into smaller, manageable pieces.
Related questions
How can I disable transitions globally?
Material UI uses the same theme helper for creating all its transitions. Therefore you can disable all transitions by overriding the helper in your theme.
When should I use inline-style vs. CSS?
Use inline-styles for dynamic style properties. The CSS alternative provides more advantages, such as auto-prefixing, better debugging, media queries, keyframes.
I show and tell how to develop a frontend for a site on React with a backend on django. I use MaterialUI and TailwindCSS, with source code and comments.
I show and tell how to develop a frontend for a site on React with a backend on django. I use MaterialUI and TailwindCSS, with source code and comments.