I'm trying to build a React app using babel-standalone instead of proper Babel transpiling (to make it easier for non-Node users to customize without having to transpile).
Here's my setup (you'll have to run this locally due to StackOverflow sandboxing):
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router#3.2.0/umd/ReactRouter.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const App = props => (
<ReactRouter.Router history={ReactRouter.browserHistory}>
<ReactRouter.Route path='/' component={A} />
<ReactRouter.Route path='/b' component={B} />
</ReactRouter.Router>
)
const Link = ReactRouter.Link
const A = props => <h1><Link to='/b'>Link to B</Link></h1>
const B = props => <h1>Welcome to B</h1>
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
This works fine for linking from component A to B. However, if I link to B then refresh the page, I get a 404 from my static server. Is there a way to fix this such that route B will load if a user requests host_address/b? Any suggestions would be greatly helpful!
I'm happy enough using the hashHistory argument to history, which stores all routes in /#/ and therefore allows refreshes:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router#3.2.0/umd/ReactRouter.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const App = props => (
<ReactRouter.Router history={ReactRouter.hashHistory}>
<ReactRouter.Route path='/' component={A} />
<ReactRouter.Route path='/b' component={B} />
</ReactRouter.Router>
)
const Link = ReactRouter.Link
const A = props => <h1><Link to='/b'>Link to B</Link></h1>
const B = props => <h1>Welcome to B</h1>
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
Related
Please I am trying to run react app using external CDN, and having issues on the html file saying:
Uncaught ReferenceError: require is not defined index.html:3
This is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom#5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
import Todo from 'component/Todo.js';
const App = () =>(
<div>
<h1>My Todos</h1>
<Todo />
</div>
)
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
And this the JavaScript code
function Todo (){
return (<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>);
}
export default Todo;
you can import external scripts from another server like this :
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
Then to make sure your file is loaded :
scriptLoaded() {
// your stuff to do!
}
Another way is using react Helmet:
first install it using :
npm install --save react-helmet
then use it like this
<Helmet>
<script src="www.test.ts" />
</Helmet>
note that in this way your script will load in the <head>
I am creating a simple voting_app in React while learning from a book.I have an index.html file,all the css files are in respective folders,app1.js file,I've put all those files below.
The issue is when i call a component app1.js through ReactDOM.render() method ,it doesn't show in the browser.
app-1.js
class ProductList extends React.Component {
render() {
return (<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>);
}}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
Index.html
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic.css"/>
<link rel="stylesheet" href="./style.css"/>
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
Your first React Web Application14
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script type="text/babel"
data-plugins="transform-class-properties"
src="./js/app.js"></script><!--Delete the script tag below to get started.-->
<script src="vendor/react.js"></script>
</body>
</html>
The problem might comes from the babel transpilation, try to use the following script declaration (also note that your script file is named app-1.js not app.js)
<script type="text/babel" src="js/app-1.js" data-presets="es2015,react"></script>
As you can see below, your component is displayed correctly
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
<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>
<div id="content"></div>
I'm trying to make some innovations on this big JSF-javaBackend app we have
So I am working with ReactJS and thinking why not both. So far I can call the reactJS library and print some small component, also the same logic using JSX. And both of them work just fine
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
<title>Test React JSF</title>
<link rel="stylesheet" type="text/css" href="../../../../../resources/Adamantium/adamantium-layout/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="../../../../../resources/css/style.css"/>
<link rel="stylesheet" type="text/css" href="./static/css/main.1ab75c23.chunk.css"/>
</h:head>
<h:body >
<h2> React vanilla </h2>
<!-- We will put our React component inside this div. -->
<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" ></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" ></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
<br/>
<br/>
<br/>
<h2> JSX </h2>
<div id="babel"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('babel')
);
</script>
<br/>
<br/>
<br/>
<script src="./static/js/1.6105a37c.chunk.js" type="application/javascript" ></script>
<script src="./static/js/main.7bbc540b.chunk.js" type="application/javascript" ></script>
<h2> React JSXs Bundles </h2>
<div id="root"></div>
</h:body>
</html>
My problem starts when I try to use something a little bit more complex, which is a build with babel create-react-app (npm run build) which prints nothing, no errors, no warnings, no weblogic fail on parsing, just do nothing. I have experience with both frameworks but I can't merge them even for a dumb component (no state component)
I suspect of XHTML trying to read my bundled react app not as a JavaScript file, but it should have been fixed with the "type="application/javascript" tag.
I will leave here the like button, the JSX and vanilla react are examples from the react docs
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
I am trying to run the html file below and i cannot understand why it wont work. I pretty sure I have all the components. The only thing that gets displayed is the "Single Page Application" h1. I cannot display the Hello world h1.
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/Babel">
const hello = <h1>Hello world</h1>;
ReactDOM.render( {hello} , document.getElementById('MyContainer') );
</script>
</html>
Try to implement a simple functional component:
const hello = props => <h1>Hello world</h1>;
There are a few problems with your code. For one thing,
const hello = <h1>Hello world</h1>;
is not a valid React component. Components are case sensitive (Hello), and for this case, must be designed as a function.
Additionally, when you are calling ReactDOM.render(), you need to treat your component as if it were an html element, i.e. <Hello />.
This code is correct:
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/babel">
const Hello = props => (
<h1>Hello world</h1>
);
ReactDOM.render(
<Hello />,
document.getElementById('MyContainer')
);
</script>
</html>
You should check out the tutorial on the React homepage, it is very helpful.
I was wondering if its possible to render an entire react app in a non react web page. I tried many links where it suggested code snippets as follows which shows to render just a component,
<!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">
<h1>POC</h1>
</body>
<script type="text/babel">
class Application extends React.Component {
render() {
//debugger
console.log('hi there')
return (
<div>
<h1>hello world</h1>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('root'));
</script>
</html>
But i want to know is its possible to have my react app in the same path like,
- htdocs
- plainhtmljswebapp.html
- react-app-folder
- index.html
- main.js
- src
- components
- actions
- reducers
- package.json
- webpack.config.js
as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.
Thanks alot
See comments on question for more context on this answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="/bundle.js"></script>
</head>
<body>
<div id="content1">
</div>
<script type="text/javascript">
mount("content1", "testing")
</script>
<div id="content2">
</div>
<script type="text/javascript">
mount("content2", "more testing")
</script>
</body>
</html>
index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { App } from './app'
window.mount = function(id, customText) {
const store = createStore((state = {}) => state)
render(
<Provider store={store}>
<App text={customText} />
</Provider>,
document.getElementById(id)
)
}
app.js
import React from 'react'
export const App = ({ text }) => {
return (
<div>{text}</div>
)
}
This only has redux integration in so far as it creates a store and wraps the app in a Provider, but I can't see any reason why it wont work like normal from there.
I tested this using webpack to bundle and webpack-dev-server to serve.