#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: JSX and rendering a tip component
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Let's write our first component. A Python tip To remove the logo, end this with a semicolon. And the first way to do it is to simply define a function
0:18
and call it Tip and every component gets properties or props and it can render something to the browser. Now as we already saw here
0:34
what is this weird like HTML embedded into the code? This is actually called JSX. It's kind of a template syntax but with the full power or JavaScript
0:47
which means that you can embed expressions and we'll see that in a bit. So, my tip will be wrapped in a div and in HTML I have classes like this
1:02
but in react it's camel case and you have to say class name for class. Let's look at how a Python tip is structured
1:19
So, in the next lesson we will actually see where we get the data, and it will be from this page. And every tip has a text, an optional code block
1:32
a shareable tweet link and an optional link to the source. Which usually is Stack Overflow, in that case on this page we have an optional info icon.
1:46
so plain text, code, which is wrapped in pre tag optional sharing, optional more info link. So I'm going into architect
2:00
the component to comply with that data. So, all the attributes, they'll be in this props object.
2:13
The tip will be in p tag, and there is an optional link. And there is this JSX, mostly looks like HTML
2:23
you can actually embed JavaScript, which is cool. So you can do things like props, if props has the link and show that link in a span tag.
2:44
Close to conditional. After the paragraph tag, I have my pre tags to actually show code which comes in props.code.
2:58
And then there's another conditional for the share link. So if there's a share link show that in another paragraph tag. Then inside it a link.
3:23
For this I define a constant. Which we can just grab from here. Copy image address. We don't really need this.
3:41
So if there's a share link, wrap that in an href. It opens in a new tab, and show me a clickable image. And this is out first react component.
4:01
And I made a typo. Because I'm still referencing logo. And here I made a typo, it's not render but I should return.
4:15
And nothing happens, because I only defined the tip I have not rendered it in view. So let's do that now. Let's get rid of everything in this div.
4:27
And that's actually define the page. So, first I want my header Okay. Then I'm going to set up a form input
4:44
where we can filter the tips later. So I'm just providing the boilerplate code for now. Look at how convenient it is to write JSX
4:59
because it's like HTML, but way more powerful. And value on change, reload to later populate which state and behavior.
5:19
So this should render a form. And lastly, we're going to show the tips. So, again, I make a div. And here's how you would render react components.
5:37
It's like having new a new HTML element at your disposal. Here I'm just going to put some bogus stuff in doesn't really matter for now because
5:48
you will render this later with real data from our API. So, here's one tip, and there two more. Four, five, six, seven, eight, nine.
6:07
Two, three, and look at the conditionals and actions, so this one doesn't have a link and this one has a share link rather.
6:17
Let's see what this gets us. Nice, so this is the tip text, regular paragraph text, print one, two, or three are the made up code
6:26
so you see that the font changes. Here is an optional source link, in parenthesis and here's an optional share link to Twitter.
6:37
So, we're getting somewhere, the next video we make a quick detour to get the Python and Django tips API working locally
6:44
so we can start queryng the data and populate a few with some real Python tips.