Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Render a React UI with JSX

2:48 React lesson by

We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

Avatar
Chris

I'm new to using Atom, but it looks great for JSX! I was just wondering what syntax theme / colors you were using, and how you got the Operator Mono font for the attribute names? Thanks!

In reply to egghead.io
Avatar
Andrew Van Slaars

Chris,

Thanks for watching! These instructions to get you all setup :)

  1. Open up Atom Preferences.
  2. Click the “Open Config Folder” button.
  3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
  4. Copy and paste the CSS below into that file.
atom-text-editor
{
    font-family: "Operator Mono";
    font-weight: 400;
    line-height: 1.7;
}

atom-panel.tool-panel {
    font-size: 0.88em;
}

.entity.other.attribute-name {
    font-style: italic;
}

atom-text-editor::shadow {
    .entity.other.attribute-name {
        font-style: italic;
    }
}
In reply to Chris
Avatar
Daniel Ram

Which package are you using for the JSX autocomplete, that would be super handy.. I currently use react for atom package, but don't see it autocomplete the jsx.

Avatar
Andrew Van Slaars

I'm just using this react plugin. https://atom.io/packages/react

I have other plugins, but nothing else that should be doing anything with JSX. There are settings for the plugin and I have selected "Enable for All JavaScript Files". Maybe it's just not running in your JS files?

Hope you're able to get it working.

In reply to Daniel Ram

Here I have my basic application that I created with Create React app. I've run NPM start to start the development server and open it up in a browser. To get a feel for how I want to break an application out into individual components, I like to start by mocking up a static version right in the JSX, and that's what we're going to do here. So I'm going to start by deleting this paragraph and I'm going to update this heading, and I'm just going to make it say 'React Todos'. And I'm going to save the file and the browser will update. The body copy is gone and our heading has been updated.

So I'm going to start by creating a div that I'm going to wrap everything else in, and I want to give this div a class so that I can style it later. And if you notice when we look at the existing code, we have 'class name' rather than 'class' being used as the attribute. And the reason for this is simple -- classes are reserved for JavaScript.

So we'll come down here and we'll give this div a class name attribute, and then we'll call it, 'Todo-app'. And with that in place, we can start building out elements for our Todo app. We need a way to add a new Todo. So we'll start with a forum, and I'll give that forum an input of 'Type text', and we see that we have our inputs laid on the page.

And under a forum, I'm going to add another div, and I'm going to give this one a class name of 'Todo-list'. And in that list, I'm going to add an unordered list, and each item in our Todo list will be represented by an ally. So for now, just put some placeholder names in for our tasks. So we'll say 'Learn JSX', and then we'll duplicate that and add a couple more. And when I save this, the browser will update and we'll see our three list items displayed in the browser. And of course, we can't have a Todo app without the ability to mark items as complete. So let's add some checkboxes.

So I'm going to jump up to this first item, and inside the ally, before my text, I'm going to add an input, and I'm going to give it a tight attribute of 'Checkbox'. And I'm going to close this on itself, and I'm going to save this. And I just want to make sure when the browswer refreshes that I see the checkbox as I expect. And now that I know that worked, I'm just giong to copy this input and I'll paste it for each of the other Todos. And now, each Todo has its own checkbox. This is a pretty good starting point for breaking our application up into components, but it could look a little bit nicer. So let's add some CSS to clean it up.

I'm going to open up 'Add .CSS', and down at the bottom, I'm just going to paste in some styles. So you'll see I added just a little bit of styling starting with their parent div. I've changed the font size on the input and styled the list a little bit. So when we save this, we'll see it updated in the browser, and now, everything is nice and clean and lined up.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?