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