I'm trying to render a simple div on the main html file using ReactDOM render method, but the div is not rendered on the screen and there are no exceptions thrown. Am I doing it wrong?
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1> Hi! </h1>, document.getElementById('root')
);
index.html:
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1> Hello World! </h1>
<div id="root"></div>
</body>
</html>
The screen only shows the "Hello World!" h1 tag.
I'm also using webpack webpack dev server and Babel.
Reason is you forgot to include your bundle.js file in html, add this line in body:
<script src = "bundle.js"></script>
Try this:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1> Hello World! </h1>
<div id="root"></div>
<script src = "bundle.js"></script>
</body>
</html>
Instead of <!doctype html> use <!DOCTYPE html>.
bundle.js: When you run webpack, it starts the process from the entry point you defined in webpack.config.js, It will compile all your files and create a bundle file. You need to include that bundle in html file.
Note: change the path and file name if you are using name other than bundle.js.
Check this answer for user defined components: Simple Component is not rendering: React js
Related
I'm a project and that project have a "bootstrap" own, and i would want to import it for my render.
I created an archive HTML with the scripts:
<html>
<head>
<script> //1.www.s81c.com/common/v18/css/www.css</script>
<script> //1.www.s81c.com/common/stats/ida_stats.js</script>
<script> //1.www.s81c.com/common/v18/js/www.js</script>
</head>
</html>
and imported in my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
</header>
To get started, edit <code>src/App.js</code> and save to reload.
</div>
);
}
}
export default App;
but given that error:
> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
| <head>
| <script> //1.www.s81c.com/common/v18/css/www.css</script>
Resume:
I want to import scripts for i to use in my App.js
I think the tag for the .css file should be <link>.
There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.
/// public/index.html ///
<html>
<head>
<script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
<link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///
Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc
Have you tried this?
<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>
and for following can you try a regular <link /> instead of <script>
import those in index.html path is public.index.html. Because your app put in one of div of same html page.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Read this how webpack work.
https://webpack.js.org/configuration/externals/
else other way is save file and import at App.js
import './App.scss';
Any pointers would be appreciated. I'm new to React and JSX and Babel and am just trying to get something bare-bones working. I've been at this for a while and I'm at a dead end.
Here's my html page:
<!DOCTYPE html>
<html>
<head>
<title>Test React</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="../TestReact/res/js/main.jsx"></script>
</head>
<body>
<div>Page to Test React Library</div>
<p></p>
<div>
<button onclick="addComponent()">Add Component</button>
</div>
<p></p>
<div id="root">
</div>
</body>
</html>
And here's my "main.jsx" file:
addComponent = function (){
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
};
I'm using Chrome 61.
If I include either type="text/babel" or type="text/jsx" on my script tag, I get an exception: "Uncaught ReferenceError: addComponent is not defined".
If I remove this type attribute on the script tag, then (of course) I get an error for "unexpected token <" because the html/xml is not going to be transpiled.
When I have the type attribute (for jsx/babel) on the script tag removed AND I enclose the html in my addComponent method in quotes, then I get no errors, but I end up with the literal string
"<h1>Hello, world!</h1>"
rendered on the page in the 'root' div instead of an embedded header element - naturally, but at least that tells me that my small javascript and ReactDOM library are imported and working.
So it seems like the problem is that the JSX transpiling is not happening for some reason.
<---- UPDATE 201710011830 ---->
It seems that the problem I'm having is related to having ReactDOM.render called from within a javascript function ("addComponent") in my JSX file that is supposed to handle a button onclick event. If I remove the addComponent function so that main.jsx looks like this:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
then the h1 element is inserted on the page as it should be.
So the question then becomes, why won't it work the way I initially intended? Is it because of the syntax I used to define that addComponent function within the original JSX script?
You need to add bundle.js to your index.html file like below.
<body>
....
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
bundle.js is the distribution which packs all the react components and dependencies and put them together in your dev environment using webpack.
Add type="text/babel" to your script tag will transform your code which in main.jsx file. I think this transform effect your addComponent function that makes your code doesn't work.
You can try just put the jsx or react component code in main.jsx, like: window.Hello = <h1>hello</h1>; then in the html（or somewhere out of main.jsx）, you can write
addComponent = function (){
const Hello = window.Hello;
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
};
But I highly recommend use webpack, a simple demo: https://github.com/yujiangshui/react-i18n-demo
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
//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/babel"></script>
<div id="content"></div> //show the content of component here
</body>
</html>
//js code
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
File directory structure:
package.json:
I want to show "hello world"in the html page without webpack to babel nor online files,because i use npm tool download react,react-dom and babel to node_modules,then i use "import React from 'react';"to import what i need,but see nothing in the page,i can't know why
If you are creating a bundle file from all your js files using webpack,provide a path to that bundle file in your script tag and place the script tag below the div with id=content
Hey bruh but what is that <div> tag for?
It doesn't describe anything.
First make some content in your <div>
for example:
<head>
<style>
.container {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
This is just a example,but for js use <script> tag.
<script>
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
</script>
Whoops I made a mistake, REALLY gave there this, it was written on my starter notes And i have saw it and though it is ok.Sorry. ;-)
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!: