React js: Why is the html not rendering?

Question

I have tried to run this code in a web browser, however it displays a blank page. Can you explain why the html does not render when opened in a web browser? Where am I going wrong? thanks

    <DOCTYPE! html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library -->
		<title>My react page</title>
	</head>

	<body>
		<div id="content"></div>
		
		<script type="text/jsx">
			
			var myComponent = React.createClass({
				//component classes must have a render function that returns some HTML
				render: function() {
					return(
						<h2>This is a core component</h2>
					);
				}
			});

			React.render(<myComponent />, document.getElementById('content'));
		</script>
		
	</body>
</html>

I believe you need reactDOM to do this in browser because you have nothing reading your jsx for you right now. Also I would recommend using a newer version if you can... 15 or 14 at least. You also don't have to use JSX if you don't want to compile it. — ajmajmajma
– ajmajmajma, Commented Aug 2, 2016 at 15:50
I've included this link cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js and still I get a blank page — Max
– Max, Commented Aug 2, 2016 at 15:54
Yeah that's react dom for react 15.3, you are currently using 0.13.3 right now in your example. You'd need to render using the reactDOM itself and a browser helper. Look at this fiddle running react for example - jsfiddle.net/reactjs/69z2wepo .There is react, reactDOM, and a react -babel script made for fiddles (to transpile). The react docs explain all of this with examples. Your problem is you need the JSX to be read and transpiled. Lots of people like to use babel for this in a build process. — ajmajmajma
– ajmajmajma, Commented Aug 2, 2016 at 15:58

Yury Tarabanko · Accepted Answer · 2016-08-03 06:19:21Z

2

As @Hugo Dozois said. React compiles components with names starting with lower case letter as if they were HTML elements.

React.createElement("myAnotherComponent", null)

You can run code snippet with dev tools to see generated code. Anyway you shouldn't use JSXTransformer in production as warning said.

    <DOCTYPE! html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
		<title>My react page</title>
	</head>

	<body>
		<div id="content"></div>
		
		<script type="text/jsx">
            var myAnotherComponent = React.createClass({
               render: function() {
                  throw new Error('Never actually called');
                  return (<span>test</span>)
               }
            });
			
			var MyComponent = React.createClass({
				render: function() {
                    console.log('Render MyComponent');
                    debugger;
					return (<h2>This is a core component <myAnotherComponent /></h2>);
				}
			});
			React.render(<MyComponent />, document.getElementById('content'));
            

		</script>
		
	</body>
</html>

edited Aug 3, 2016 at 6:19

answered Aug 2, 2016 at 15:53

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Hugo Dozois Over a year ago

As far as I remember, this is not a bug and is by design.

Yury Tarabanko Over a year ago

@HugoDozois Might be.

Hugo Dozois Over a year ago

If they didn't do that you would have to keep a list of all the possible html5 tag... which includes completely custom ones, so it's basically impossible. That way all lowercase get rendered to the dom as is, and capitalized are user defined components. (Im trying to find the source back)

Hugo Dozois Over a year ago

"SX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components)." from facebook.github.io/react/blog/2015/09/10/react-v0.14-rc1.html there must be a better source he!

Hugo Dozois Over a year ago

Oh yeah better source here facebook.github.io/react/docs/…

Justin · Accepted Answer · 2016-08-02 16:18:26Z

The problem you are having is the case of the component myComponent.

React documentation states:

To render an HTML tag, just use lower-case tag names in JSX:

To render a React Component, just create a local variable that starts with an upper-case letter:

You can read more here: https://facebook.github.io/react/docs/jsx-in-depth.html#html-tags-vs.-react-components

So, to fix your issue, simply change the name from myComponent to MyComponent

However, to agree with everyone else, it is much wiser to drop the JSX Transformer and go with a more up-to-date method of compiling your JSX into regular JS. There are many ways to do this: Gulp, Webpack, etc... just find what works best for you!

    <DOCTYPE! html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script> <!-- react library -->
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script><!-- special type of javascript syntax-->
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- jquery library -->
		<title>My react page</title>
	</head>

	<body>
		<div id="content"></div>
		
		<script type="text/jsx">
			
			var MyComponent = React.createClass({
				//component classes must have a render function that returns some HTML
				render: function() {
					return(
						<h2>This is a core component</h2>
					);
				}
			});

			React.render(<MyComponent />, document.getElementById('content'));
		</script>
		
	</body>
</html>

Collectives™ on Stack Overflow

React js: Why is the html not rendering?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related