CODEWITHSUNDEEP
javascriptreactjs
Max
Max

Reputation: 207

React js: Why is the html not rendering?

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>

Upvotes: 1

Views: 4313

Answers (2)

Yury Tarabanko
Yury Tarabanko

Reputation: 45106

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>

Upvotes: 2

Justin
Justin

Reputation: 568

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>

Upvotes: 0

Related Questions