Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Grace Nellore
9,447 PointsReact code running from html inside <script> tags, but not when linked from .jsx file, screen stuck with "Loading..."
Hello, this is really stumping me. Same copy-pasted code from html <script> tags is not working inside .jsf file. How come? What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>scoreboard</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="container">Loading...</div>
<script src="https://unpkg.com/react@15.4.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.0/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<script type="text/babel" src="./app.jsx"></script>
<!-- <script type="text/babel">
function Application(){
return (
<div>
<h1>Hello from React</h1>
<p>I was rendered from the application component</p>
</div>
);
}
ReactDOM.render(<Application />, document.getElementById('container'));
</script> -->
</body>
</html>
app.jsx file:
function Application(){
return (
<div>
<h1>Hello from React</h1>
<p>I was rendered from the application component</p>
</div>
);
}
ReactDOM.render(<Application />, document.getElementById('container'));
Please help! Thank you!
Grace Nellore
9,447 PointsHey Ashish, thanks for the suggestion, and you are right! I am getting cross origin error in console
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I am using codepen.io as workaround. Thanks again @ashishsingh !
Ashish Singh
452 PointsOk you need to install local server in your system for making cross origin request.
Install xampp https://www.apachefriends.org/index.html
Run Apache Server
Paste your project files in xampp/htdocs directory
Open Browser and run it using localhost/project_dir_name
After that it will work fine...
Grace Nellore
9,447 PointsMind. thoroughly. blown. Wow. Thank You Ashish Singh !!!
Ashish Singh
452 PointsAshish Singh
452 PointsHey Grace Nellore , I run this code in my system and I get my component element render in my index.html.So I suggest you to please check console for errors and if you stuck again let us know.