React Course Notes : First React Component & Atom Editor Plugins

First React Component

React components are the building blocks for web apps. Every one of them rendering something to the browser.

  • Create a variable and use one new function

var Greeter = React.createClass();

I’m going to make a variable in the beginning of my file called “Greeter”. The first letter of the first word should be uppercased and then if I have another word like this need to be a Camel-Case.

And then set it equal to React.createClass. I haven’t used this method before it’s actually the first time I am using the react library.

  • React create class takes as its one and only argument and options object, and this is where I can define the behavior for my component

Now the only thing that’s required of every act component is a render method. I’m going to go ahead and define my render method setting the render property equal to an anonymous function that doesn’t take any arguments.

This is all I have to define. I don’t have to define any other functions or methods.

  • All the render method expects is that I’ll return some JSX code that should get rendered to the browser

So in this case what I’m going to do is call it return. The only reason I’m using these parentheses is so I can properly format my opening and closing JSX tags.

So if I create a <div> right inside of my print, they’re on the same line which is nice. If I chose not to use the parentheses that just makes the code a little harder to read.

  • Take H1 tag from below and add it right in <div>

I’m going to go ahead and use command X to cut it out and then I’m going to paste it right inside of the <div>.

Now I have a react component that mimics the same behavior I had last time. Now I have a Greeter component to find and it’s supposed to render one H1 tag to the screen.

  • Using JSX the name of the tag is going to be the exact name of my variable

I am going to pass it as the first argument to ReactDom.render. In this case is “Greeter”. I don’t need to open and close the tag because there’s nothing inside of it.

I have my Greeter tag rendered right here and what it should do is print a <div> and an H1 tag to the screen.

  • Save the file and start up server from the terminal using node

node server.js

  • Open up server on local host 3000 over inside my browser

Right here “Hello React” prints to the screen.

  • When returning JSX, I could only return one root element

I try to Return multiple things from component by add <p></p> below <h1><h1/> in one <div>.

Notice here I have multiple HTLM elements but I return one root <div>. If I were to add a second to right here and put something in there, the program won’t render it. I can always render this but it needs to be rendered inside of the root.

Install Atom Plugins (Command+Comma)

Recommand Plugins

  • atom-beautify
  • react

Now if I go into app.jsx

I can see that my jsx file has syntax highlighting enabled both the javascript code like ReactDom.render and h1 tag. They both have syntax highlighting applied to them which is fantastic.