trying this react example after I start the server at port 3000 I get a blank page. Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById('app')
);
</script>
</body>
</html>
So why I get blank page ?
I see there is an error in the console but I dont know if this is the problem or not. I am on windows 10
it seems last version of babel has a problem I switched to 5.8.23 and I get "Hello Ract" normally !!
Related
The div id on line 9 is not getting invoked.
The output does not show the text invoked under the reactDom.render function. It only prints only the "Hello World from the index form within the HTML" on line 10. What am I missing ???
Using the express web server to run.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<title>React App</title>
</head>
<body>
<h1>Hello world from the index</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>
The CDN links looks outdated. This works just fine:
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello</h1>,
document.getElementById('root')
);
</script>
Ah, I think your issue in the updated code seems to be with babel link. It should be babel not browser.
So, for example, just replace:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js
With:
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js
Here's a working fiddle.
Here are the list of links through which you may consider using specific version:
https://cdnjs.com/libraries/react
https://cdnjs.com/libraries/react-dom
https://cdnjs.com/libraries/babel-standalone
That seems to be an old version of React in your script which doesn't include the ReactDOM object. However with the latest React version and changing ReactDom to ReactDOM your code compiles fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<h1>Hello world from the index form within HTML</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>
Following is code for simplest webpage in React.js. If I write that in notepad and open it in web-browser as html doc, shouldn't it display "Hello World"? As opposed, browser displays nothing. Any other dependency is required for React.js to work?
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script type="text/babel">
<div id="app"></div>
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app');
);
</script>
</body>
</html>
The following is a fully functional example tested in Firefox and Chrome. Below I analyze the parts where your posted example had some problems:
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app')
);
</script>
</body>
</html>
If you start with your original example and look at the developer console when opening the web page (F12 on most browsers), you'll see the following error on line 13:
SyntaxError: missing ) after argument list
That error is occurring because of the extra semicolon after the document.getElementById('app');. Remove that:
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app') // No more semicolon here
);
Then the console will show the following error:
ReferenceError: ReactDOM is not defined
That's because you have some nesting issues with your script tags and the fbme links to the React libraries don't go through. Change to this and add the Babel library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Now your example should work fine.
Modifying your code produces the desired output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app')
);
</script>
</body>
</html>
Make use of babel-standalone and wrap the React contents within <script type="text/babel">
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
<div id="app"></div>
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app');
);
</script>
Although I would suggest you to make use of webpack as a transpiler. You can set up a React app with create-react-app too
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<script src='./index.js' type='text/babel'></script>
<div id="root"></div>
</body>
</html>
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world</h1>,
document.getElementById('root')
);
The webpage is completely empty, tried reinstalling react and react-dom several times. There's no compilation errors from babel or node. The webpage is just empty.
Here is the simple example to get started!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React App</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#latest/babel.min.js"></script>
<script type="text/babel">
var ex = <h1>It worked!</h1>;
ReactDOM.render(
ex,
document.getElementById('root')
);
</script>
</head>
<body>
<div id="root"/>
</body>
</html>
First you need to add react, reactdom, babel files in your index.html file.
Option 1:
then you can able to see the output by moving the index.js script inside the index.html as below. where you can see the output by opening the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" >
ReactDOM.render(
<h1>Hi! My react App</h1>,
document.getElementById('app')
)
</script>
</body>
</html>
Option 2: Adding external js file:
If you are adding some external react js file,
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="index.js" >
</script>
</body>
</html>
index.js:
ReactDOM.render(
<h1>Hi Now your react app works</h1>,
document.getElementById('root')
);
first you have to create an http server. Else you will see some file load error in console something like Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Steps to create simple http-server using node:
1) Install node JS -> https://nodejs.org/en/download/
2) Run: npm install -g http-server
3) Run: http-server [folderpath] // folder path which contains index.html
once you started the http server, you will see the msg like below
Starting up http-server, serving [folder name]
Available on:
http://127.0.0.1:8080
http://192.168.1.6:8080
Now access the URL (http://127.0.0.1:8080) you could see the index.html output. Hope it helps!!!
Include the index.js after the dom element div creation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src='./index.js' type='text/babel'></script>
</body>
</html>
When index.js is executing, it requires the dom element to fill it with the react rendering
I have written a simple hello world code in ReactJS, but when I run the code, the browser displays nothing. There is not any error displayed on console. Please tell what can be the problem. I am using WebStrom compiler, Chrome as browser and Windows 8.1 is the OS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First React App</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.jsx" type="text/babel"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
script.js
var MyComponent = React.createClass({
render :function() {
return(
<h2>Heading 2</h2>
);
}
});
React.render(
<MyComponent/>, document.getElementById('content')
);
project directory
browser display
It could be that your script.js should be script.jsx?
It's a babel issue you're running into. Try replacing JSXTransformer with the official babel package:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
I am trying to make an "Hello World" program as suggest on react tutorial.
But I created helloworld.js under src and helloworld.html in root. When I try to run my helloworld.html nothing happens (at all). And when I try to run helloworld.js error described below comes.
Is it some issue with babel?
Your first question, why helloworld.html returns nothing at all:
You should not need to add src="src/helloworld.js" in the tag. Otherwise the will try to load your helloworld.js (which causes your second question). I have created a plunker - it works without the src="src/helloworld.js"
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>test</div>,
document.getElementById('example')
);
</script>
</body>
</html>
Demo:
http://plnkr.co/edit/ONtPtVkCsnEqNYYtDFAv?p=preview
For your second question. I guess you try to separate the script to a new file out from the helloworld.html. You do not need import because you add the react.js and react-dom.js in the html's head tag already. ReactDOM.render is already known when you load the src/helloworld.js from the script tag.
html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="src/helloworld.js">
</script>
</body>
</html>
src/helloworld.js
ReactDOM.render(
<h1>Hello, world</h1>,
document.getElementById('example')
);
Demo:
http://plnkr.co/edit/9uNkyaz65A4FMTHwdCtr?p=preview
Edit:
Click on the browser, for example, I clicked Chrome and got Hello World!: