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);
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 want to integrate a component into existing legacy application which uses angular js 1. I want to replace it with vuejs 3 and problem is that I cannot use webpack. I have created a standalone webpage with vuejs3 and bootstrap vue but somehow the component does not render. Any help or guidance what I am doing wrong? Is it doable with vuejs 3 to run a standalone component without any webpack?
Interesting thing is that it render the html page with a warning in console.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<!-- Add Bootstrap and Bootstrap-Vue CSS to the <head> section -->
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css"/>
<!-- Add Vue and Bootstrap-Vue JS just before the closing </body> tag -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.1/vue.global.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
</head>
<body>
<h1>Static HTML With Vue.js Single File Component</h1>
<div id="app">
</div>
<script type="module">
import app from './app.js'
const {createApp} = Vue;
createApp(app).mount('#app');
</script>
</body>
</html>
app.js
export default {
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
.............
]
}
},
computed: {
rows() {
return this.items.length
}
},
template: `
<div class="overflow-auto">
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
<b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
</div>
`,
};
Version 2.x.x of BootstrapVue does not support Vue 3.
The next major release BootstrapVue 3 (not yet released), will however support it. As of this post, an alpha of BootstrapVue 3 is aimed for Q1 of 2021.
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.
This question already has answers here:
ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
(44 answers)
Closed 5 years ago.
I tried checking other posts which stated that the same error message was seen, but none of them matched my context. I am new to ReactJS and I was working out on my own project. So, I created a two files 'index.html' and 'js/index.js'.
The 'index.html' file contains the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
<title>Profile</title>
<script crossorigin src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script src = "js/index.js" type="text/babel"></script>
</html>
And the 'js/index.js' file contains:
class Card extends React.component{
render(){
return(
<div className="card">
<div className="imagebox">
<img src = "2.jpg"/>
</div>
<div className = "biobox">
<p>Display Name</p>
<p>Username</p>
<p>Location</p>
</div>
<div>
<p>Updates</p>
</div>
</div>
)
}
}
ReactDOM.render(
<Card />, document.getElementById('app')
);
I don't know what's wrong with this code that I am getting the error.
You forgot to write a constructor?
constructor(props) {
super(props);
}
And I think React.component should be React.Component. No?
Just found out that the mistake is in the 'index.js' file. The code should have been:
class Card extends React.Component{}