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!:
Related
I have been attempting to run a simple hello world react application. I am not using any tools. I have created an index.html and index.js in the same directory. Within my index.js, if I turn the elements variable into a string, it works, but not how I expected it to work. It passes a string in and that string is displayed exactly as typed
<h1>Hello, world</h1>
I want to pass the html into the render method but I keep getting the following error:
Uncaught SyntaxError: Unexpected token <
See code below:
'use strict'
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('app'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>
The tutorial that I am following is:
https://reactjs.org/docs/rendering-elements.html
Without using babel, we can't use jsx. See the solution below and note the React.createElement function instead of passing html directly into the ReactDOM.render function.
Solution:
'use strict'
ReactDOM.render(React.createElement('h1', null, 'Hello, world'), document.getElementById('app'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I don't think it's possible to use JSX syntax without a bundler/Babel.
You have to use React.createElement('h1', null, 'Hello, world').
Source: https://medium.com/#clmyles/react-without-npm-babel-or-webpack-1e9a6049714
Edit:
If you plan to use Babel, #Chris answer in his comment (import React ...) is correct. React then needs to be in scope to use JSX.
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>
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 !!
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code