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>
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;
Steps:
I have many custom components. Hence, I created standalone package.
I did it bundle using webpack.
Include that bundle file in HTML page using script tag.
Now, I just want to use it in HTML page like below example, but I cant access it.
<!DOCTYPE html />
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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="build.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/jsx">
ReactDOM.render(<CustomButton />, document.getElementById('root'));
</script>
</body>
</html>
Is it possible to access component once bundle ?
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>
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