I´m using frontend-maven-plugin in a Spring Data REST application to use React as the front end library. Once I execute the Main application, I go to localhost:8080. Inside the Logo and the title in the index.html "ReactJS + Spring Data REST" appears correctly, so i´m assuming the app is correctly reading the index.html, but nothing of the boilerplate of React appears.
<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<!-- The title does appear correctly: -->
<title>ReactJS + Spring Data REST</title>
<link rel="stylesheet" href="/main.css" />
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
function App(){
return (
<div>
{/* This doesn´t appear: */}
<h3>Trying React in Spring</h3>
</div>
)
}
}
ReactDOM.render( <App />, document.getElementById('react'))
I don´t have any errors in the proyect. I honestly don´t know where could be the problem.
Here´s the error in the devtools appears: "Failed to load resource: the server responded with a status of 404 ()bundle.js"
Here´s how my files are structured right now:
Related
I have a blazor server app, with a registered custom element as below code:
builder.Services.AddServerSideBlazor(options =>
{
options.RootComponents.RegisterAsCustomElement<Counter>("my-blazor-counter");
});
I want to import this blazor custom element in another node.js application to convert it into a lit element(web component).
I have added below scripts in my node.js app
<script src="https://localhost:7075/_framework/blazor.server.js"></script>
<script src="https://localhost:7075/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script>
but while initializing the Blazor it still using node app port and failing while initialization.
I am not sure I am missing anything here or if there is any other way to do it.
The following describes how I resolved an issue similar to yours: trying to register a custom element, the client not rendering the component and no error message anywhere.
I followed the instructions but the there was nothing happening client-side. After inspecting the websocket's traffic using Firefox I ran into the following message from the client to the server (slightly edited for readability):
ùÀµEndInvokeJSFromDotNetÂÚÙ[
2,
false,
"Could not find 'registerBlazorCustomElement' ('registerBlazorCustomElement' was undefined).
findFunction/<#https://localhost:5001/_framework/blazor.server.js:1:497
findFunction#https://localhost:5001/_framework/blazor.server.js:1:465
E#https://localhost:5001/_framework/blazor.server.js:1:2606
attachWebRendererInterop/<#https://localhost:5001/_framework/blazor.server.js:1:33097
attachWebRendererInterop#https://localhost:5001/_framework/blazor.server.js:1:33145
beginInvokeJSFromDotNet/s<#https://localhost:5001/_framework/blazor.server.js:1:3501
beginInvokeJSFromDotNet#https://localhost:5001/_framework/blazor.server.js:1:3475
_invokeClientMethod/<#https://localhost:5001/_framework/blazor.server.js:1:71894
_invokeClientMethod#https://localhost:5001/_framework/blazor.server.js:1:71880
_processIncomingData#https://localhost:5001/_framework/blazor.server.js:1:69922
kt/this.connection.onreceive#https://localhost:5001/_framework/blazor.server.js:1:64322
connect/</o.onmessage#https://localhost:5001/_framework/blazor.server.js:1:48638
EventHandlerNonNull*connect/<#https://localhost:5001/_framework/blazor.server.js:1:48489
connect#https://localhost:5001/_framework/blazor.server.js:1:48005
_startTransport#https://localhost:5001/_framework/blazor.server.js:1:57626
_createTransport#https://localhost:5001/_framework/blazor.server.js:1:56195
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:54044
async*start#https://localhost:5001/_framework/blazor.server.js:1:51309
_startInternal#https://localhost:5001/_framework/blazor.server.js:1:66198
_startWithStateTransitions#https://localhost:5001/_framework/blazor.server.js:1:65598
start#https://localhost:5001/_framework/blazor.server.js:1:65262
Gn#https://localhost:5001/_framework/blazor.server.js:1:129904
Yn#https://localhost:5001/_framework/blazor.server.js:1:127771
async*#https://localhost:5001/_framework/blazor.server.js:1:131523
#https://localhost:5001/_framework/blazor.server.js:1:131529
"
]
In my case it was that I hadn't added <script src="/_content/Microsoft.AspNetCore.Components.CustomElements/BlazorCustomElements.js"></script> to the html.
I was struggling to get this working for a Blazor serverside app. I created a test.html page in the wwwroot of the blazor project.
The fix for me was to specify the base url.
My html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- my component is here -->
<blazor-counter></blazor-counter>
<base href="http://localhost:5144">
</head>
<body>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
I get the error index.pack.js:1 Uncaught SyntaxError: Unexpected token '<' I thought this was an error I made but no, i cant seem to find any errors, Here's the code for what i have got
Index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon#2.3.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
<script src="index.pack.js"></script>
</body>
</html>
Then 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')
);
Also then in the app
import React from "react"
function App() {
return (
<div>
<h1>Home Page</h1>
</div>
)
}
export default App
FYI< I have installed create-react-app and deleted some of those files >
Any help would be appreciated!
Here's the error when inspected
I fixed this by going into my index.html file (in visual studio code) and holding ctrl click on the index.pack.js link inside the tags. Visual studio code will come up with an error saying file cannot be found, would u like to create it? select yes, save and refresh your page. For me this was enough and my code worked perfectly error free.
I fixed this by going into my index.html file (in visual studio code) and holding ctrl click on the index.pack.js link inside the tags. Visual studio code will come up with an error saying file cannot be found, would u like to create it? select yes, save and refresh your page. For me this was enough and my code worked perfectly error free.
I'm migrating a web application Java/jsp to a reactjs.
The pages are built with jsp templates, which compose the final HTML.
So I cannot use (yet) Reactjs to render my entire application, but just for render some component into the DOM.
So I have a mixed rendering, like this
<html>
</html>
<body>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer> <!-- JSP code -->
</body>
Everyhting works fine so far, so I'm trying to introduce Redux to handle the state, but I got stucked when I should render the <Provider /> component as the docs says, since I don't have an entry point for my application.
So I tried adding one, wrapping all my app code into a div:
<html></html>
<body>
<div id="app">
<header></header>
<!-- etc... -->
</div>
</body>
And then in my index.js
render(
<Provider store={store}>
<div />
</Provider>,
window.document.getElementById('app')
);
But of course it doesn't work, all my page is blank now, and the block <div id="app"> is empty
Does this Provider element must include all my components in order to work? Can I use Redux with this mixed setup?
I'm kind of lost, any help would be great.
The Provider component should wrap all the components that will use your Redux store via connect(). Redux documentation recommends just wrapping all components in Provider because there is no problem since you're just using a single store.
In React you shouldn't need to ever put elements directly in the body because this is done dynamically.
Here is an example of what your main application files should look like:
index.html
<!doctype html>
<html lang="en">
<head>
... some scripts/css...
</head>
<body>
<div id="root">
// intentionally nothing here. will be dynamically inserted via React later
</div>
</body>
</html>
entry.tsx:
ReactDOM.render(
<Provider store={store}>
<header></header> <!-- JSP code -->
<div id="myComponent"></div> <!-- this is rendered by react -->
<article></article> <!-- JSP code -->
<div id="myOtherComponent"></div> <!-- this is rendered by react -->
<footer></footer>
</Provider>,
document.getElementById('root')
);
To make an entry point simply add the following to your webpack config file:
module.exports = {
entry: './entry.tsx',
...
}
This is the barebones of a React-Redux application that you should follow when you are ready to transition.
I'm having a really difficult time figuring out what I possibly could do wrong as probably most scenarios has been tested.
I'm writing web app using Spring Boot and ReactJS for frontend. I'm trying for now to write simple script showing some plain text which is imported from separate file to html one. After doing so, I ended up with nothing really showing up.
Here is my structure of project:
and here is my app.js in which I have my component defined:
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(<CommentBox />, document.getElementById('content')
);
Below is the cardists.html page:
<!DOCTYPE html>
<html>
<head>
<title>Cardists</title>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div id='root'></div>
<script src="react-15.0.1.js"></script>
<script src="react-dom-15.0.1.js"></script>
<script src="cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
<script type="text/babel" src="../public/js/app.js"></script>
</body>
</html>
[PROBLEM]
Where could I possibly made a mistake as everything for first glance seems ok to me, but I'm getting blank page ;/
You are rendering your application in content div like
ReactDOM.render(<CommentBox />, document.getElementById('content')
But in you html file there is no div with content id. There is one div with id root so you need to render your component in that div like
ReactDOM.render(<CommentBox />, document.getElementById('root')
I have an EJS view which is served up to a client:
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<%- reactContent %>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
main.bundle.js is the bundle that I create using browserify:
gulpfile.js (partial)
function bundle(filename) {
var bundler = browserify('./app/client/' + filename + '.js');
bundler.transform(babelify);
bundler.transform(reactify);
return bundler.bundle()
.pipe(source(filename + '.bundle.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./dist/client'));
}
And the client is ultimately served this code:
main.js (bundled into main.bundle.js)
import React from 'react';
import {Login} from './auth/login.react';
React.render(React.createElement(Login), document.getElementById('reactApp'));
alert('hi');
However, even though the browser requests and recieves the main.bundle.js script, the client does not run the alert('hi'); line, which leads me to believe that the React.render line does not work either. I can affirm that Javascript is enabled, and my browser is the latest version of Chrome. My react component (Login) is as follows:
login.react.js
import React from 'react';
export class Login extends React.Component
{
handleClick() {
alert('Hello!');
}
render() {
console.log('rendered');
return (
<button onClick={this.handleClick}>This is a React component</button>
);
}
}
So, very simple. However, none of the alerts that you see in the code is ever run. The console.log('rendered'); line is never run on the server, but when I check the source code for my page, I get:
HTML output of my page
<!DOCTYPE html>
<html>
<head>
<title>Example app</title>
</head>
<body>
<div id="reactApp">
<button data-reactid=".2fqdv331erk" data-react-checksum="436409093">Lel fuck u</button>
</div>
</body>
<script src="__res__/client/main.bundle.js" />
</html>
Which means that the server correctly renders my react component, but why does the client script not work? The handleClick function never runs, my console.log lines never run, and neither does the alert lines. What is happening? The reactid and checksum are rendered correctly, shouldn't it be working? Shouldn't the React code on the client-side be smart enough to find the component and run correctly?
In your index.ejs, adding a closing element to your script tag should fix the issue: <script src="__res__/client/main.bundle.js"></script>
On a separate note, in my testing, I was getting an error in login.react.js when loading the page until I added default to the export line: export default class Login extends React.Component. Not sure if you will need to do the same.