Learning ReactJs
Part II
I love functions. It’s why I have a low-level disgust for pure html (joking). I love how reliable they are, how they compartmentalize the program so you can easily pinpoint where the program is breaking down. I love stringing them together and making a monster of a program. So you can imagine my sheer joy…glee… giddiness, when I released that React just allows you to use functions to spit out HTML.
The last module I did was about setting up my workspace and creating my first component: the beloved “Hello World”. Most of the time was taken downloading modules (I used a blank workspace on c9 for learning’s sake). Now we are getting into the thick of it with manipulating components. Starting with passing in “arguments”, ie properties to the components.
When we do add properties to our components, we can reference them by using
this.props
Now, after adding the props from the video, I knew I could not test the script the same way. Because I am using C9 , I cannot just run it through the webpack dev server and have it all be dandy. So I just used the production command from the last video (npm run production) in the terminal and then ran the html in the index file using the in-house sever.
But, for some reason, my javascript file was not showing up (in the chrome dev tools)… at all…blank…just not there… in the ether. I had a similar problem with the css on another problem and realized I needed to clear the cache. I did not want to have to remember any of my passwords again so I installed an extension called Clear Cache that would clear the cache on a page to page basis. After a little click, it all worked beautiful.
After this, the video has me modifying what we already have to start creating the “Github Battle App”.
Things to note:
- Things you render need to be rendered inside a container component, like a div
- Components should follow the F.I.R.S.T rule. Focused, Independent, Reusable, Small, Testable. These are the same tenants that go with a good function in programming or Maths in general… or programming in general .
That’s it for the second video. In the end, my code looked like this:
index.js
var USER_DATA = {
name: ‘Vera Worri’,
username: ‘vworri’,
image: ‘https://avatars0.githubusercontent.com/u/20686845?v=3&s=460'
}
var React = require(‘react’);
var ReactDOM = require(‘react-dom’);
var ProfilePic = React.createClass({
render: function () {
return <img src={this.props.imageUrl} style={{height: 100, width: 100}}></img>}});
var ProfileLink = React.createClass({
render: function () {
return (
<div>
<a href={‘https://www.github.com/' + this.props.username}>
{this.props.username}
</a>
</div>);}});
var ProfileName = React.createClass({
render: function (){
return <div>{this.props.name}</div>}});
var Avatar = React.createClass({
render: function () {
return(
<div>
<ProfilePic imageUrl={this.props.user.image}/>
<ProfileName name={this.props.user.name}/>
<ProfileLink username={this.props.user.username}/>
</div>);}});
ReactDOM.render(<Avatar user={USER_DATA} />, document.getElementById(‘app’));
index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<title>Github Battle</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type=”text/css” />
<script type=”text/javascript” src=”index.js”></script>
</head>
<body>
<div id=”app”</div>
</body>
</html>
None of this code is mine. Tyler gives this all to us but I am writing this article because of all the strange things that pop up. Like the cache problem. These things, no one ever TEACHES you. You have to learn from experience… while commiserating with fellow travelers.
