I tried to render a simple text, but it renders nothing. I already installed react, reactdom, webpack, and bable. Any idea on why is it not working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
</head>
<body>
<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
Removing import statements works for me. Please check the working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
It works...its just that import is not understood by the browser
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<div id="root"></div>
Related
I am new to React and would like to ask why the following code in vs code wont render the h1 component in my html page?
When I run the html page, it just shows empty page. Anyone know what is happening?
Code as follows:
My index.html code as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
My index.js code as follows:
ReactDOM.render(<p>Hello, everyone!</p>,document.getElementById("root"))
Whenever I run the html file, it just shows blank page rather than "Hello, everyone!". Does anyone know what is going on here?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
React uses JSX to render all the components. This means in simple terms, it collects all the components and converts them into an HTML page.
React renders each component as a tree. So it is not advisable to add all your code to a single component. As in your case, you tried to print Hello Everyone! on the render function without specifying the HTML tag.
App.js
import React from "react";
function App() {
return (
<div>
<h1>Hello Everyone</h1>
</div>
);
}
export default App;
If you're wondering how I'm importing App.js and CSS files, It is called path specifying for the files. If the files are present are on the same folder then use ./filename.extension(css/js)
What is React.StrictMode?
It renders all the child components in strict mode.
This prevents certain actions being taken and throws errors/warnings if there are any
Most importantly it does a lot of checking which will be really helpful to correct all the possible errors.
You should not open the HTML page to see changes instead use any package managers to run the react code. For Example:
npm start or yarn start
All the best! 😁
<html>
<head>
<script
src="https://unpkg.com/react#17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<p>Hello world!</p>, document.getElementById("root"));
</script>
</body>
</html>
here you have to specify the data-preset="react"
<script src="index.js" type="text/babel" data-preset="react"></script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel" data-preset="react"></script>
</body>
</html>
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>
I am new to React. I read the official tutorial of React and I try to create a basic hello world react app but I dont succeed.
I looked in the web and also here for an answer and I didnt find one.
Can you please tell me what I am missing and what I need to do?
The following is my html and javascript files:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, World</h1>,
document.getElementById('root')
);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script type="text/jsx" src="inputPhoneNumber.js"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div id="root" class="container">
</div>
</div>
</body>
</html>
All you should need is the react and react-dom scripts like you already have, a root element like the div with id root you have, and a file which uses ReactDOM to render the topmost component into the root element.
Example
ReactDOM.render(
React.createElement('h1', {}, 'Hello, World'),
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
My code is as below, but "hello world" is not displayed
is there problem with my code ?
please help
<html>
<head>
<script src="theme/public/js/react.production.min.js"></script>
<script src="theme/public/js/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
you also need to import babel
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
This is from the official docs which is using the development version docs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.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">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
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