React Course Notes : Render my first app to the screen

 

Include a few different libraries and do that inside of the head tag

I will use more automated process in the future, but I want to do things manually for now because it’s important to see how all the pieces of the puzzle fit together. Otherwise I’ll rely on a lot of magic and I don’t really understand why things are the way they are.

Add 3 scripts tags

They’re going to have a url after http://””

  • The first library I include is called the “babel”

http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

Long story short, I can use all the fancy new features by using “babel” to convert ES6 javascript and JSX file.

  • Next up is the reactor library itself

http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js

  • Last it’s in a library called “react-dom”

http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js

Dom are both required if using react on the web. The reason they’re separate is because react is being used in a lot of other environments like on native iOS an android. So the reactive-dom is only necessary when using react on the web.

*The reactive-dom is only necessary when using react on the web

*I am going to be updating from script tags to web pack in a later section. But for now I want to keep things simple and newer versions of Babel don’t support the simple inclusion of a file like this. So for now I am going to use a slightly older version of Babe.

With these three libraries installed I am actually ready to render a app

http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js

http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js

http://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js

Add a new device

  • This device is going to have an id and I am going to send that id actually equal to app

<body></body>

This is going to be the container divs for my reactor application. All of react apps require some element that exists in website that it can attach to. In this case all I have is an empty div.

  • Add a script tag right inside of body

<body>

</body>

All the script tag is going to do is have an attribute with the type and this type is important and needs to be text forward slash babel. This is how Babel is going to know that it should actually do something with the code inside.

  • Call one function ReactDOM

<body>

ReactDOM.render(

);

</body>

And inside here I am going to call one function ReactDOM which is available because I loaded in react on dot render and this is how I am going to kick off all of my applications.(I am going to actually just use HTML and not to create a reactive component.)

  • And then paste 2 arguments

<body>

ReactDOM.render(

 

Hello React

,

document.getElementById('app')

);

</body>

The first is going to be a piece of JSX and the second is going to be the app element. So to kick things off I’m going to start typing H1 and notice I’m not wrapping it in strings or anything like that. This is JSX code which stands for javascript XML.

And the second argument is going to be the node. I am going to use document dot to getElementById and all I have to do is pass in the string name and this case the id is “app”.

  • Save my file over in the terminal and run node server.js

node server.js

  • Open browser and input localhost:3000

“Hello React” print to the screen.

Move the code into a separate file

  • Make a new file “app.jsx”

This is the extension used for a lot of react files that have JSX code inside of them.

  • Take the contents of script tag and past to app.jsx file

Save the file head over to index HTML.

  • Instead of having the code inside of the script tag, specify the source app

Add src=”app.jsx” and remove the empty space inside.

  • Save the file refresh the browser and see how it react

Still prints to the screen throughout the section I am going to be adding a lot more code to my application. so it’s important to move it into a separate file on its very own.