#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Style matching tips with react-highlight-words
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The last week I want to do is to highlight a word as it matches in a tip. We already installed the React highlight words plug in
0:13
so we can just import that at the top, like so then I'm going to modify the tip component to use the
0:30
highlighter to highlight the word that matches. Unfortunately I have to do that in two places because
0:37
here we have the tips code and here we have the tip text. But even so the result will be pretty cool.
0:50
The highlighter is a component that uses the regular syntax of a component and it has a couple of properties
0:57
we can set. I'm going to define a class of highlight with search words as an array
1:16
and I'm going to give it the filter string I passed in earlier. Where is this filter string coming from?
1:24
Well, in the view when we did the loop over the tips we explicitly passed it as a property to the tip
1:32
component. So filter string is now available as part of the props. We set outerscape to true and importantly text to highlight
1:56
is the props tip and we are going to remove it here because its now handled by a highlighter component.
2:06
We have to give it a default of empty because when I was preparing it could not handle an undefined value.
2:14
And we close the component. So that's one and now we need to do the same for the actual code. So in pre tag I'm going to have another highlighter
2:26
component and that's why I said it's a bit of a shame we have to do it twice because the code is almost the same.
2:35
We've got the highlighter component, same class name same search words, same outerscape but the only thing
2:44
that changed is the text to highlight and here of course it's the props code. Let's see how this works. Nice.
2:57
I actually had a style ready but I don't even think we have to set it but lets do it just to see where we
3:04
set the ETSS in the tips folder under source there is an index.css and if you want to have another style you can just define your class here, highlight
3:24
and it directly detected the change. So now, apart from the default yellow background, we have a red colour.
3:33
This way you know how you can treat the CSS of your React app. Again it's under source index.css. Which is linked under source index.js. Near you see
3:49
all the imports of the app. I forgot to mention at the start that we wrote all the code in the app component. Right?
4:01
And how that is actually displayed on the page is index.js and index.html as a root id index.js targets that root id and renders the app
4:20
component inside of it. And that's where everything is coming together. So pretty cool. A fine end to our tips app with some nice styling.
4:34
That concludes the videos of day one. See you tomorrow for the practical part of this lesson.