I started learning react by writhing this simple code. but it shows me different output in the browser I mean my previous example. I refresh it many times but noting has changed. I write code in visual studio code.
I write this code as App.js
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
and this as main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
This will produce the following result.
this as index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="shortcut icon" href="">
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app">
</div>
<script src="build/bundle.js"></script>
</body>
</html>
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'm trying to make a webpage, with angular, and make a header with component. For making the files i'm using the ng g c commons/header that make the html,scss,ts and .spec.ts files, and modify the app.module.ts file like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './commons/header/header.component';
import { FooterComponent } from './commons/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgbModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
but, when i'm put it in the index.html file, the component html doesen't show up.
<!DOCTYPE html>
<head>
<title>TEST</title>
<meta name="keywords"
content="" />
<meta name="description" content="" />
<meta name="author" content="Szabó Boldizsár">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="styles.scss" rel="stylesheet" type="text/scss">
</head>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>
the generic files(what the console command made) is still the same, i didn't modifyd it.
What can be the wrong? I'm using even bootswatch.
In Angular index.html file have only app-root tag like this:
<body>
<app-root></app-root>
</body>
just put your header & footer in app.component.html file, which is parent component wrapper of all components in your application.
<div class="wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
It isn't how Angular works : you can't just render your components into a .html file.
As a SPA (Single Page Application), your content is rendered into a container (app-root by default).
It advice you to follow the official Angular tutorial to understand how components are rendered into the application.
You have to put the selectors of the header and footer component in the template of the AppComponent instead of putting it in Index.html .
AppComponent is your bootstrap component , as you can see in the #NgModule metadata property .
You can think of the components mentioned in the bootstrap array as the starting point of you angular application . So any other angular components has to be inside those Base components in order to show up.
And also please refer to the official angular tutorial.
I am using vantajs wave library and my issue is how do i get the waves to continue to render on a CSS selector after I click through the tablinks of my react app?
The first error I get is on Brave browser when it says:
"three.r92.min.js:28 Uncaught TypeError: Cannot read property 'precision' of null"
and doesn't render the wave at all initially.
However, if i go to Google Chrome and look at the background of my selected element there is the wave effect that I implemented provided by https://www.vantajs.com/?effect=waves#(backgroundAlpha:1,color:2105474,shininess:30,waveHeight:15,waveSpeed:1,zoom:1)
But then, after I switch from the home tab to another tab, then come back to home (where my selected element is), the wave effect is no longer behind the selected element as it says:
"vanta.waves.min.js:161 [VANTA] Cannot find element .showcase__container
Here is my HTML:
<meta charset='utf-8' lang="EN-US">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="./src/three.r92.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>DigitalWebFlex</title>
</head>
<body>
<div id='root'></div>
<script type='text/javascript' src='/dist/bundle.js' charset='utf-8'></script>
<script>
VANTA.WAVES('#showcase__container');
</script>
</body>
And my React:
<div className="showcase__container" id="showcase__container">
<button className="button button--animated button--white" onClick={this.setPagePortfolio}>Portfolio</button>
</div>
Thanks in advance!
hey you can install vanta using npm i vanta
and include three.js in the head
and then
import React from 'react'
import WAVES from 'vanta/dist/vanta.waves.min'
class MyComponent extends React.Component {
constructor() {
super()
this.vantaRef = React.createRef()
}
componentDidMount() {
this.vantaEffect = WAVES({
el: this.vantaRef.current
})
}
componentWillUnmount() {
if (this.vantaEffect) this.vantaEffect.destroy()
}
render() {
return (
<div ref={this.vantaRef}>
/* Foreground content goes here */
</div>
)
}
}
This should help, You can refer to this page and Vanta.js README for a better understanding
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'));