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>
Related
I've started to learn React lately and today to just memorize what i've learnt i decided to create a react component that contains a simple heading tag but i can't figure out why it won't be displayed in the browser here's my code
<html lang="en">
<head>
<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>Document</title>
</head>
<body>
<div id="app">
</div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="include-component.js" ></script>
</body>
</html>
and this is my react component which resides in file named include-component.js :
import React from "react";
import ReactDOM from "react-dom";
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const app= document.getElementById('app');
ReactDOM.render(<IncludeComponent/>,app);
can someone tell me why my component won't render ?
You are using a confusing mixture of non-compiled code and compiled code. Did you checked your console? You surely have errors guiding you...
This is for when you don't have a compiler and React and ReactDOM will be available globally:
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
I don't recommend you try this approach. It is sub optimal and none of the resources you will see online are using it.
Then you do this:
<script src="include-component.js"></script>
This will already cause an exception since you're using import statements inside this JS file, but you haven't said that it type="module". Normal JS files can't use import statements.
Finally you can't import React and ReactDOM like that anyway, since you imported the browser versions which just have global variables.
Instead just start a project with Create React App:
npx create-react-app my-app
cd my-app
yarn start
And start experimenting in that instead.
For completeness you would need to transform with babel:
<html lang="en">
<head>
<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>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script type="text/babel">
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const container = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<IncludeComponent/>);
</script>
</body>
</html>
You must import the test component!!
import TestComponent from './TestComponent';
function App() {
return (
<div className="App">
<TestComponent name='hello world' />
</div>
);
}
export default App;
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>
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>
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>