i'm using spring boot and my index.html is in src/main/resources/templates directory and below is the content. If i render a static content from html itself it renders but when i try to render from react component it doesn't render anything
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>ReactJS + Spring Data REST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
my react component is in src/main/js/ directory and app.js file
Below is the all the codes i have in the app.js file
import React from 'react';
import {render} from 'react-dom';
import RendorTest from 'components/RendorTest';
class RendorTest extends React.component{
rendor(){
return(
<div><h1>Spring Boot + Rest + React.js</h1></div>
);
}
}
var element = <RendorTest />;
ReactDOM.render(
element,document.getElementById('react')
)
I'm not sure why you're importing RendorTest and then declaring another class of the same name, but you are also extending the wrong method on the React object. You need to extend React.Component { } not .component.
You could also import React, { Component } from "react"; and then extend Component { }
As ahutch mentioned, you also need to call the render() method, rendor() is not a method of React.Component.
Kyle is right and also you want to call render() and not rendor(). This component is also probably better written as a stateless functional component, for example:
const RendorTest = (props) => {
return (
<div>
<h1>Spring Boot + Rest + React.js</h1>
</div>
)
}
Related
I am trying to embed a jobber request form in my react application but I am not sure how to go about this https://stackoverflow.com/questions/73739326/how-to-render-embedded-html-with-multiple-tags-in-react/73743146#73743146 has a similar question where the use of react-helmet was the solve.
I'd like for it to be button that would activate the form request. I have the button built, but not sure how to integrate the code below to make it all work.
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 just have a blank page.
After using Vue and Nuxt for more than a year, I decided to learn React and Next.js and almost immediately noticed the horrible Developer Experience.
Every stylesheet and component needs to be imported so there's always bloated import hell at the start of each component.
Not to mention if you need an extra library as you can't hook into any global object like Nuxt's this.$plugin option.
Is there some package to manage these imports for Nextjs? As far as I know, everyone who uses it doesn't mind it and that's what surprises me.
This Question may come as an insult to React and it is, but I just want at least one reason to join the hype-train as to why React is more popular.
create a file in pages directory named it _doucument.js or _document.ts (for TypeScript) and import React in it like below :
(below codes are TypeScript)
import React from 'react';
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document';
export default class CustomDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<title>Your title</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
and any more doesn't require that import React in any components.
I am learning react.js by myself, so you may find this question a silly one. But, I want to learn concepts.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
ReactDOM.render(<AppStyle />, document.getElementById('style'));
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
<div id="style"></div>
</body>
</html>
In my index.html, I have placed two divs, which are calling two different components, but the only first component is loaded on the page. Is there any way to call both of them? And if not then why?
Here is the pattern.
home.js
import React from 'react';
import ReactDOM from 'react-dom';
class AppStyle extends React.Component {
render() {
var myStyle = {
fontSize: 100,
color: '#FF0000'
}
return (
<div>
<h1 style = {myStyle}>Header Style</h1>
</div>
);
}
}
export default AppStyle;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<>
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
<Home />
</>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
export default App; // not necessary since you are rendering already...
you can also create a seperate component for the code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<title>Learn React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Nothing is importing and rendering Home. If you really wanted to render into two separate elements on the same page, then import Home into index.js and then you can render both.
import React from 'react';
import ReactDOM from 'react-dom';
import AppStyle from './home';
class App extends React.Component {
render() {
var i = 1;
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
<h1>{1+1}</h1>
<h1>{i === 1 ? 'True' : 'False'}</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<AppStyle />, document.getElementById('style'));
As others have pointed out though, the normal pattern is to only render a single react application per page.
This question already has an answer here:
import from base component can't find variable
(1 answer)
Closed 4 years ago.
I've just started to learn React and I would like to create simple page with form. Form should contain inputs keywords and city, select list date and submit buttom.
It's structure of my project
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Application</title>
</head>
<body>
<div id="root">
<div class="form-container"></div>
</div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './bootstrap.min.css';
import './SearchForm.js';
SearchForm.js
const formContainer = document.querySelector('.form-container')
class SeacrhForm extends React.Component {
constructor(props) {
super(props)
this.state = {
keywords: '',
city: '',
date: ''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
render() {
return (
<form className='search-form' onSubmit={this.handleSubmit}>
<h1>Say Hi!</h1>
</form>
)
}
}
ReactDOM.render(<SeacrhForm />, formContainer)
And I got errors on my page in browser
What did I do wrong?
Okay You need to add the following imports to you searchform.js file
import React from 'react';
import ReactDOM from 'react-dom';
and remove this line:
const formContainer = document.querySelector('.form-container')
And don't change the index.html file ever, instead create a new component like you have created searchform.js and render it in app.js and then react will automatically render that component inside
<div id=root></div>
you may not need to manually do it.
check out the following link, It may help you to understand reactJs better.
https://reactjs.org/docs/hello-world.html
Add
import React from 'react'
import ReactDOM from 'react-dom'
to SearchForm.js
Modern JS works well with ES modules, that means that you need to import dependencies into every file(module), otherwise such libraries will not be available.
From this question (Is it OK to use React.render() multiple times in the DOM?) it seem like we can call React.render() multiple times in a page. However when I tried following code I got " _registerComponent(...): Target container is not a DOM element." error on the second component.
import React, {Component} from 'react';
import {render} from 'react-dom';
import {Button} from 'office-ui-fabric-react/lib/components/Button'
class App extends Component {
render () {
</div>;
return(
<div><Button>I am a button.</Button></div>
)
}
}
render(<App/>, document.getElementById('app'));
render(<App/>, document.getElementById('app2'));
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<div id="app2" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
You have a closing div above the return statement in you render function,apart from that as stated in the docs of office-ui-fabric-react Button is being import from lib and not lib/components
Import it like
import { Button } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
render () {
return(
<div>I am a button</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
ReactDOM.render(<App/>, document.getElementById('app2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<div id="app2"></div>