Problems with rendering with react

Problems with rendering with react
0

#1

Hi, I’ve been going through the tutorial on react here: https://online.reacttraining.com/courses/ and wanted to make sure I understood the concepts by recreating the code given without looking at it which is the code below. After comparing it to his original code which is here: https://github.com/ReactjsProgram/React-Fundamentals/blob/video3/app/index.js and not seeing any differences that should matter I ran it and nothing appeared. So I guess the question is what is the difference between my code and his code that is making my code not work.

var React = require('react');
var ReactDOM = require('react-dom');

var userData = {
    image:'https://scontent-ord1-1.xx.fbcdn.net/v/t1.0-1/p240x240/16388413_10211992655360452_8633343728153861257_n.jpg?oh=efc0b144bd0eebed143751a8f5e17e49&oe=59716B4D',
    name:'Grant',
    userName:'grif1179'
}

var userPic = React.createClass({
    render:function(){
        return <img src={this.props.image}></img>
    }
});

var userName = React.createClass({
    render:function(){
        return (
            <a href = {'https://github.com/'+ this.props.userName}>
                {this.props.userName}
            </a>
        );
    }
});

var name = React.createClass({
    render:function(){
        return <div>{this.props.name}</div>
    }
});

var Avatar = React.createClass({
    render:function(){
        return (
            <div>
                <userPic image = {this.props.data.image}/>
                <userName userName = {this.props.data.userName}/>
                <name name = {this.props.data.name}/>
            </div>
        );
    }
});

ReactDOM.render(<Avatar data = {userData}/>,document.getElementById('app'));

#2

How did you run your app? Did you just double click index.html to open it in the browser? You are missing some things: You need babel to compile your JSX, and you need to have a link to the React and ReactDOM files that you are trying to require for your JS file.


#3

If you copy and paste this into index.html, and then double click to run it, you’ll see that it will work locally in your browser:

<!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">
  <script src="https://unpkg.com/[email protected]/dist/react.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
  	var USER_DATA = {
  name: 'Tyler McGinnis',
  username: 'tylermcginnis',
  image: 'https://avatars0.githubusercontent.com/u/2933430?v=3$s=460'
}



/*
  Focused
  Independent
  Reusable
  Small
  Testable
*/

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'));
  </script>
</body>
</html>

#4

Thank you for replying, but I guess I should clarify my problem isn’t getting react to work. I am currently using babel to convert the jsx to js and a webpack server to see the changes. For more specific information I have it set up exactly like it is here https://github.com/ReactjsProgram/React-Fundamentals/tree/video3. My problem is I can run his code and it works fine, but if I run my code nothing happens even though I see no critical differences between my code and his. Again thank you for replying and I’ll clarify more if you needed me to.


#5

Ok I got it working but I am not sure why it worked because the only thing I changed was I capitalized the names of the react components I created.

Not working code:

userData = {
    username:'Grif1179',
    Name:'Grant Park',
    image:'https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-1/p160x160/16388413_10211992655360452_8633343728153861257_n.jpg?oh=2f53bc7fef02ec988771cc529679a69d&oe=59403F26'
    
}


var React = require('react');
var ReactDOM = require('react-dom');

var userPic = React.createClass({
  render: function () {
    return <img src={this.props.image} style={{height: 100, width: 100}}></img>
  }
});

var userName = React.createClass({
    render:function(){
        return <div>{this.props.username}</div>
    }
});

var nameUser = React.createClass({
    render:function(){
        return <div>{this.props.Name}</div>
    }
});


var Avatar = React.createClass({
    render:function(){
        return(
            <div>
                <userPic image = {this.props.data.image}/>
                <userName username = {this.props.data.username}/>
                <nameUser Name = {this.props.data.Name}/>
            </div>
        );
    }
});

ReactDOM.render(<Avatar data = {userData}/>,document.getElementById('app'));

working code:

userData = {
    username:'Grif1179',
    Name:'Grant Park',
    image:'https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-1/p160x160/16388413_10211992655360452_8633343728153861257_n.jpg?oh=2f53bc7fef02ec988771cc529679a69d&oe=59403F26'
}

var React = require('react');
var ReactDOM = require('react-dom');

var UserPic = React.createClass({
  render: function () {
    return <img src={this.props.image} style={{height: 100, width: 100}}></img>
  }
});

var UserName = React.createClass({
    render:function(){
        return <div>{this.props.username}</div>
    }
});

var NameUser = React.createClass({
    render:function(){
        return <div>{this.props.Name}</div>
    }
});


var Avatar = React.createClass({
    render:function(){
        return(
            <div>
                <UserPic image = {this.props.data.image}/>
                <UserName username = {this.props.data.username}/>
                <NameUser Name = {this.props.data.Name}/>
            </div>
        );
    }
});

ReactDOM.render(<Avatar data = {userData}/>,document.getElementById('app'));

#6

Ah, I never realized that, not having proper capitilization will break your react code :open_mouth:


#7

Use PascalCase for the component function declarations.
Pascal case : the first letter in the identifier and the first letter of each subsequent concatenated word are capitalized. E.g. ThisIsPascalCase
This is particularly important when using JSX. Lower case tags are treated as HTML/SVG elements and the Pascal case elements are your components.


#8

Thank you for the responses.