I'm studying Reactjs. In my website project I have two .js files with codes of react elements and I need to integrate the element from one .js file into the index.html page and the element from the second .js file - into the second .html page. But both elements can display only on the index.html page. I run the project on localhost via command "npm start" using file package.json and node_modules I uploaded. How to display my react element from the second file on the second page of my site?
file "index.html"
<h1>My react element №1</h1>
<div id="app1">
</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="https://cdnjs.cloudflare.com/ajax/libs/babel-
standalone/6.25.0/babel.min.js"></script>
<script type="text/babel" src="element1.js">
</script>
file "element1.js"
class Element1 extends React.Component {
/* code */
}
ReactDOM.render(
<Element1/>,
document.getElementById("app1")
);
file "page2.html"
<h1>My react element №2</h1>
<div id="app2">
</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="https://cdnjs.cloudflare.com/ajax/libs/babel-
standalone/6.25.0/babel.min.js"></script>
<script type="text/babel" src="element2.js">
</script>
file "element2.js"
class Element2 extends React.Component {
/* code */
}
ReactDOM.render(
<Element2/>,
document.getElementById("app2")
);
file "package.json"
{
"name": "reactapp",
"version": "1.0.0",
"scripts": {
"start": "lite-server"
},
"devDependencies": {
"lite-server": "^2.2.2"
},
"dependencies": {
"create-react-app": "^3.1.1"
}
}
Related
my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</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>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}
Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server
from this ressource https://reactjs.org/docs/add-react-to-a-website.html I have integrate into my static website a basic component
<body>
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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 src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
like_button.js :
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<div>
<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
<Facebook /> ???????????
</div>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
How to use in this component an external module like https://www.npmjs.com/package/react-content-loader ?
I tried to add script https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js into html page with import satement in my component but I have an error "Uncaught ReferenceError: Facebook is not defined"
I never tried the code in Add React to a Website chapter of the React documentation. It was a good time to tinker with it.
There are more than one potential problem with your attached code. You do not load Babel in your index.html. At least in the question. So you could not use jsx syntax in the like_button.js.
The second one is that you could not use import here. You have to find what is the namespace of the package. I logged out the window object, checked that and it is ContentLoader.
The rest is easy I created a standalone index.html with babel:
https://codesandbox.io/s/w27pjmq355
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</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/react-content-loader#3.4.1/dist/react-content-loader.min.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
console.log('window', window);
class App extends React.Component {
render() {
return (
<div>
<h1>Hello world!</h1>
<ContentLoader.Facebook />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
I think you could try out React this way, but Babel usage is not recommended like this in production. I strongly recommend to install node and use create-react-app. This way you can use the whole toolchain in no time.
Or event create a new React sandbox on CodeSandbox.io
I'm using babel-standalone and am trying to add external file for react jsx code. I use npm install http-server -g and have that working. I place both my html and js file in the server public directory. When I try to load with the following:
<script src ='react001.jsx' type='text/jsx'></script>
the file doesn't load. When I load with:
<script src ='react001.jsx' ></script>
the file loads but I get unexpected token error in the console.
Here are the two files:
react001.html:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/create-react-class#15.6.2/create-react-class.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.4.0/react-dom.min.js"></script>
<title>React Example</title>
</head>
<body>
<div id='container'></div>
<script type='text/jsx' src='react001.jsx' ></script>
</body>
</html>
and here is the jsx file:
class HelloUser extends React.Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}!</h1>
<h1>Hello</h1>
</div>
);
}
}
ReactDOM.render(
<HelloUser name='Blobby2' />,
document.getElementById('container')
)
I have a basic HTML/ JS project and have been trying to get react to run. For various reasons, I need to run install React from existing project and not from create-react-app.
Project directory:
|-node_modules
|
|- public
| |- js
| | |- index.js
| |
| |- index.html
|
|- package.json
|
| - ...
Inside index.js:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
Inside index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
inside package.json:
{
"name": "developer",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node_modules/http-server/bin/http-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"http-server": "^0.10.0"
},
"dependencies": {
"react": "15.6.1",
"react-dom": "15.6.1"
}
}
Super basic. I am following instruction from FB React Installation. However, when I ran npm start and went to 8080, it shows a completely blank page.
What am I missing?
This is simplest implementation of react without bundle setup.
From documentation itself: single-file-example.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</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#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>
</body>
</html>
You can use babel with webpack or gulp to set up your react development environment. This has great explanation to things and getting started.
Also you can use create-react-app to get started with your project and all the settings will be done before hand.
You should use a webpack or browserify to render into a browser.
If you are using react tag is not HTML tag but it is react html tag:
h1 : React.HTMLProps
So, it will not render as HTML. This react html is called as JSX.
Browser don't understand JSX you need a parser for it. To parse this JSX you may use babel.
** All html tags in react are bot actual html tags but react's tags
Probably you forgot to nest the content in a return function in your component.
I am familiar with Chrome's policy on inline scripts in Extensions. However, I don't think I have one in my files? All I have is very basic and I'm just attempting to place an input field onto the page.
main.js:
class Container extends React.Component {
render() {
return (
<div className="locationSearchBarContainer">
<SearchBar />
</div>
);
}
}
class SearchBar extends React.Component {
render() {
return (
<input className="searchBar" id="locationSearchBar" />
);
}
}
ReactDOM.render(
<Container />,
document.getElementById('container')
);
main.html:
<!doctype html>
<html>
<head>
<title>New Tab</title>
<script src="../scripts/plugins/react.min.js"></script>
<script src="../scripts/plugins/react-dom.min.js"></script>
<script src="../scripts/plugins/babel.min.js" charset="utf-8"></script>
<script src="../scripts/main.js" type="text/babel"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
manifest.json
{
"manifest_version": 2,
"name": "",
"description": "See what's happening around you and add events to your calendar",
"version": "0.01",
"browser_action": {
"default_icon": "img/icon.png",
"default_title": "Click here!"
},
"chrome_url_overrides" : {
"newtab": "html/main.html"
},
"permissions": [
"activeTab"
]
}
I believe the problem is that in this version of Babel you can't just prototype a site and include the library in a script tag, or it'll execute in-line. I don't have this problem anymore going through the Browserify route.