This course is out of date and does not reflect our standards or industry best practices.
Transcript from the "Building the Clipboard App UI" Lesson
[00:00:00]
>> Steve Kinney: Let's start to build the basics of the user interface here. So main.js is going to spin up that index.jade, right here. Index.jade is going to require('./renderer'), right? So we can go ahead and let's actually just spin up the application. You'll actually see a bit of command line fanciness, too.
[00:00:31]
>> Steve Kinney: You see the devtools are opened by default. And we get that console log in there as well.
>> Steve Kinney: All right, so that's fun. We're gonna work on the renderer process, so we can keep this open for a little bit.
>> Steve Kinney: In here we're just gonna build out the UI real fast.
[00:00:47] We'll say import React From 'react'. Import, let's just get the render method from react-dom.
>> Steve Kinney: And we're gonna create an application component.
>> Steve Kinney: All right, and that's gonna render the basics of our UI. Again, if you are familiar with React you might be like, why doesn't he break out stuff into a bunch of components?
[00:01:25] This is not a course on React. This is an accessible enough for someone who's never seen React before, but proving that we have translation in place.
>> Steve Kinney: So the syntax I'm gonna write is obviously not valid JavaScript. You can't just write HTML all willy-nilly, but it is very much valid JSX, run through Babble.
[00:01:50]
>> Steve Kinney: So we give it a container class, which is CSS, that means something in the CSS I wrote.
>> Steve Kinney: We'll give it the control bar on top that we saw.
>> Steve Kinney: Copy from Clipboard, all right, we're halfway there.
>> Steve Kinney: Give it a section with the className of content.
[00:02:31]
>> Steve Kinney: And a div that we'll eventually put the clippings in called
>> Steve Kinney: All right, and then finally, we'll just basically mount that to the application component. If we look in the index.jade, there is this,
>> Steve Kinney: Div with a ID of application. So we'll say render.
>> Steve Kinney: All right.
[00:03:16]
>> Steve Kinney: And if we go ahead and we refresh the application, you can see I've got the basics of the UI in place. There's no clippings in it yet, cuz we haven't implemented that functionality, but effectively it's there, we can go ahead and
>> Steve Kinney: See input is we have source maps, so we actually see it as we wrote it, not as the compiled version.
[00:03:41] All JSX is, is instead of calling react.createClass, and react.element, we write what looks like HTML. Babble turns it under the hood into just React.create class, React.element, right? If there are other fancy-pants brand new future JavaScript things that you wanna use with Babble, this is also great, even if you don't write React.
[00:04:03] You're like, yeah cool, but I want the spread operator. Neat, use Electron compile. All right fine, I actually don't care about React, I wanna do TypeScript. Okay, right, this will all work just the same way. This just seemed to be kind of a easy way to get that in place.
[00:04:17] The other thing we wanna do is just have that clipping component. So, we're gonna have many clippings, so we'll just make that it its own thing real quick.
>> Steve Kinney: And the only thing a clipping really needs is the content of the clipping.
>> Steve Kinney: And, we'll just return
>> Steve Kinney: Clippings-list-item,
[00:04:51]
>> Steve Kinney: With the div className
>> Steve Kinney: I'll put the content in there.
>> Steve Kinney: Cool, and we'll just give it some quick controls for copying it back to the clipboard.
>> Steve Kinney: That rarr is not me being angry, that's just a right arrow.
>> Steve Kinney: Cool.
>> Steve Kinney: Now we won't see anything in there because we don't have any clippings, but just to make a point, we could go ahead and say
[00:06:20]
>> Steve Kinney: And let's see what we got, it's very angry with us right now.
>> Speaker 2: Gotta close the div, try closing div.
>> Steve Kinney: Yeah. [CROSSTALK] Yep, thank you, that's why you live code with friends.
>> Steve Kinney: All right, there they are. My CSS is a little off, so let's just take a look, clipping-text.
[00:06:44]
>> Steve Kinney: All right, so we've got a UI. Doesn't do anything yet but we have the basics of a UI in place. All transfiled, we didn't set up any web pack, we didn't fuss with any of that kind of stuff, so all kinda good to go and ready. The other thing we're gonna do is, we do wanna keep track of some amount of clippings in application state.
[00:07:03] So let's just wire that up real fast.
>> Steve Kinney: Clipping.content, and we're actually gonna give it a key so we can keep track of
>> Steve Kinney: Cool, and we'll no longer see anything in the UI anymore, cuz we went to that empty array. So it's iterating through an empty array and doing that, we can put just a thing in there to start out with.
[00:08:17]
>> Steve Kinney: Whoop, unexpected token.
>> Steve Kinney: Let's see if that solves it for us.
>> Speaker 2: You gotta call it super.
>> Steve Kinney: What's that?
>> Speaker 2: You gotta call it super.
>> Steve Kinney: Have to is a strong word.
>> Steve Kinney: All right, cool. So, now we've got the UI back in place with some application state.
[00:09:04] The next thing we want to do is, to go ahead and figure out a way to add a new clipping in there. So, we need to give ourselves a quick function for that, as well.
>> Steve Kinney: AddClippings, so we'll get whatever the current clippings are.
>> Steve Kinney: And we'll say, okay, we set the state, the clipping are gonna be,
[00:09:43]
>> Steve Kinney: All of the previous clippings, but first, we'll for right now, add a string.
>> Steve Kinney: My translation settings are a little bit off, so give me a second
>> Speaker 2: Does wow there perhaps wanna be a part of an object that has both content and an id?
>> Steve Kinney: It does.
[00:10:34]
>> Steve Kinney: We'll cheat, Date.now seems like a good way to handle this, right?
>> Steve Kinney: And now we're wired up, so that when I hit that button
>> Steve Kinney: OnClick will be [this.addClipping].
>> Steve Kinney: Cool.