I'm trying to add the react app I made to my existing website, I followed the existing documentation here but apparently the navigator doesn't regconize the import parts of my code, brobably because the babel parser isn't working properly?
Here's my index.js code:
I tried the babel as a type in my script, but no luck
here's my index.js code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
here's my index.html code:
<head>
<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/babel.min.js"></script>
</head><body>
<div id="root"></div>
<script src="index.js"></script>
</body>
the console output:
Uncaught SyntaxError: Unexpected identifier in index.js:1
You are loading your dependencies as globals using dedicated <script> elements.
Don't use import as well.
You are using JSX. You need to mark the script containing it as text/babel.
Related
I'm embedding a request form. I want to click a button in react to open the form, then add a button to go back/exit. Ive added the HTML tags into index.html but I'm having a hard time with control. I toggle the display: none/block to get it to appear/ disappear which works fine (also have to toggle display for all of the react app so only the form is shown.).
The Html I'm trying to embed has 3 tags. I'm not able to find an answer of how to use dangerouslySetInnerHTML with multiple tags.
I've also just tried to use dangerouslySetInnerHTML twice and just gave the react div the needed reference id. No luck, just a blank white page.
<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link rel="stylesheet" media="screen" href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css" />
<script src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"></script>
12 hours of trying.
(https://codesandbox.io/s/l9qmrwxqzq)
This worked pretty much immediately. Once I found it.
'''
import React from "react";
import ReactDOM from "react-dom";
import { Helmet } from "react-helmet";
import "./styles.css";
function App() {
return (
<div className="App">
<h1>Check if Helmet works as expected with script tags</h1>
<p>Check console output - you will see $ is undefined</p>
<Helmet>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"
/>
<script>
{`
console.log('Test', typeof $);
`}
</script>
</Helmet>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
'''
My final product
'''
import React from "react";
import { Helmet } from "react-helmet";
export default class Jobber extends React.Component {
render() {
return (
<div className="Application" id="f6f2802e-49e8-477b-b405-8b2b18dded97">
<Helmet>
<div id="f6f2802e-49e8-477b-b405-8b2b18dded97"></div>
<link
rel="stylesheet"
media="screen"
href="https://d3ey4dbjkt2f6s.cloudfront.net/assets/external/work_request_embed.css"
/>
<script
src="https://d3ey4dbjkt2f6s.cloudfront.net/assets/static_link/work_request_embed_snippet.js" clienthub_id="f6f2802e-49e8-477b-b405-8b2b18dded97" form_url="https://clienthub.getjobber.com/client_hubs/f6f2802e-49e8-477b-b405-8b2b18dded97/public/work_request/embedded_work_request_form"
/>
</Helmet>
</div>
);
}
}
'''
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<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/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>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/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
I am new to react, I am trying to run a simple code example I found, the perpuse of the code is to show a few tabs. I am running into some technical problems.
I am getting this error: " Uncaught ReferenceError: require is not defined " on the first line of my JS code: import React from 'react';
it seems like it doesnt recognize my react code.
please help,
Thank you very much :)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dashboard Support Tool Center</title>
<script type="application/javascript" src="https://unpkg.com/react#16.0.0/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
</body>
<script type="text/babel" src="/dashboards/react/dashboardCenter.js"></script>
</html>
React/JS:
import React from 'react';
import { render } from "react-dom";
import Tabs from './Tabs';
require('/dashboards/css/tabStyles.css');
function App() {
return (
<div>
<h1>Tabs Demo</h1>
<Tabs>
<div label="Gator">
See ya later, <em>Alligator</em>!
</div>
<div label="Croc">
After 'while, <em>Crocodile</em>!
</div>
<div label="Sarcosuchus">
Nothing to see here, this tab is <em>extinct</em>!
</div>
</Tabs>
</div>
);
}
const container = document.createElement('div');
document.body.appendChild(container);
render(<App />, container);
You have to include a reference to requrejs library in your html:
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" ></script>
Edit
import and require in your js file are not recognizable by most browsers. You have to use a ES6 module system. You have a long road ahead ;)
Im starting coding reactjs and im confusing how html5 work on reactjs. Do we need to build a separate html5 sheet or code html5 direct into jsx sheet?
React is component based java-script lib. so on your html code just link jsx by main.js code structure. your xml code build and make application in the extension of JSX like App.jsx . Refer here to build react app
index.html
This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index.js script which is our bundled app file.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
In my webpack, the entry point of the application is set to index.js:
entry: {
app: [
'react-hot-loader/patch',
'./client/index.js'
]
In node Js, For path / in my application, I am routing it to index.html
from routes.js on server side using:
app.route('/*')
.get((req, res) => {
res.sendFile(path.resolve(`${app.get('appPath')}/index.html`));
});
Above code understandably serves index.html.
But what if I wanted my application routing to be initialized using React-router?
index.html gets rendered but I don't see index.js getting initialized at all.It is defined as entry point in webpack so that should happen ,right?
Problem: To have React-routing initialized which should work once the flow gets to index.js
My routes.js in client folder looks like this :
import React from 'react';
import {Route, IndexRoute} from 'react-router';
import About from './components/About/About';
import Header from './components/Header/Header';
import Outlet from './components/Home/SelectOutlet';
console.log("routes file client")
export default (
<Route path="/" component={Header}>
<IndexRoute component={Outlet}/>
<Route path="about" component={Footer}/>
</Route>
);
and index.js
import 'babel-polyfill'; //certain functions like array.from , set, map can't be transpiled by babel so ue poyfill for that
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
//import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; //webpack can import CSS files too
import './styles/styles.css';
render((
<Router history={browserHistory} routes={routes}/>),
document.getElementById('app')
);
console.log("In index js render ")
Consoles in index.js and routes.js never get consoled and the application just serves index.html because of express routing
my webpack file is taken from here: https://github.com/Hashnode/mern-starter
but I don't see bundle.js getting created anywhere with npm start command.
Edit:
error screenshot:
screen 1:
error message
When I click on this error message:
I get all the content from html in js:
<!DOCTYPE html>
<html>
<head>
<title>
ABC
</title>
</head>
<body>
<h1> XYZ</h1>
<div id="app"></div>
<script src="index.js"></script>
</body>
</html>
Well... Are you including
<script src="index.js"></script>
in your index.html?...