How to link react component to html?

How to link react component to html? - reactjs

I am trying to load react component from another js file, but i am not able to link that file...it says reference error..ads is not defined..I don't know how to solve this....i am doing this in django and react is also working fine.
//home.html
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/home.css' %}" type="text/css"/>
<script src="{% static 'root/react.min.js' %}"></script>
<script src="{% static 'root/react-dom.min.js' %}"></script>
<script src="{% static 'root/browser.js' %}"></script>
<script src="{% static 'javascript/ads.js' %}"></script>
</head>
<body id="root">
<script type="text/babel">
class Home extends React.Component{
render(){
return(
<div id="home">
<Header/>
<div id="container">
<div id="left">
<User/>
<Foo/>
</div>
<Post/>
<div id="right">
<Tranding/>
<Ads/>
</div>
</div>
<div id="upload">
<img src="{% static 'images/large.jpg' %}"/>
<div id="caption">
<input type="text" placeholder="Write a caption"/>
</div>
</div>
</div>
)
}
}
// ads.js
export class Ads extends React.Component{
render(){
return(<div id="ads">
<div id="head">Ads</div>
</div>)
}
}

You are not using import in your script. You are trying to use the script tag to import... this does not work the same way. You should instead either import Ads from 'javascript/ads.js' or you leave the script inclusion and instead in your ads.js file attach window.Ads = Ads
Also, do not forget to use export syntax properly. It would be export default class Ads not export class Ads

Please make sure Ads class is exported from ads.js.

Related

Django React div with id won't load from js file?

Very new to React + Django
The frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>React App</h1>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
The frontend/src/index.js:
import App from './components/App';
Then I have the frontend/templates/frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<title>Lead Manager</title>
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
When I run the server and go to localhost:8000:
The <div id="app"></div> remains empty. No errors raised.
I am not sure what the issue might be. I double checked the file against the tutorial I am following.

How to Render React App in Custom HTML5 Element instead div[id=root]

I am at requirement that I have build some ReactJs components but need to use them inside Custom HTML tags( just like normal tags )
I am trying to create a "Board" component which just displays a text "In board...". Now I am trying to use this in my HTML page as .
My board.js file:
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
My HTML page:
<html>
<head>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="board.js" type="text/babel"></script>
</head>
<body>
<Board />
</body>
</html>
tag must be treated like an HTML tag and should load React component and display the text "In board....".

In your case, you have to create using customElements API. You can use customElements.define Method to create your own but name should be hyphen separated.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
}
);
Below is the Working Example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script>
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
});
</script>
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
ReactDOM.render(
<Board />,
document.getElementsByTagName('message-board')[0]
);
</script>
<script>
</script>
</head>
<body>
<message-board />
</body>
</html>

Creating a custom element and rendering React component to this custom element can be done as below. Assuming "Board" is an React component.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
A working solution to convert a simple React component to HTML Custom element
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/#webcomponents/webcomponentsjs#2.0.3/custom-elements-es5-adapter.js"></script >
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
</script>
</head>
<body>
<div>
<message-board />
</div>
<div>
<message-board />
</div>
</body>
</html>

add react to a website : how import external node module?

from this ressource https://reactjs.org/docs/add-react-to-a-website.html I have integrate into my static website a basic component
<body>
<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" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
like_button.js :
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return (
<div>
<button onClick={() => this.setState({ liked: true }) }>
Like
</button>
<Facebook /> ???????????
</div>
);
}
}
let domContainer = document.querySelector('#like_button_container');
ReactDOM.render(<LikeButton />, domContainer);
How to use in this component an external module like https://www.npmjs.com/package/react-content-loader ?
I tried to add script https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js into html page with import satement in my component but I have an error "Uncaught ReferenceError: Facebook is not defined"

I never tried the code in Add React to a Website chapter of the React documentation. It was a good time to tinker with it.
There are more than one potential problem with your attached code. You do not load Babel in your index.html. At least in the question. So you could not use jsx syntax in the like_button.js.
The second one is that you could not use import here. You have to find what is the namespace of the package. I logged out the window object, checked that and it is ContentLoader.
The rest is easy I created a standalone index.html with babel:
https://codesandbox.io/s/w27pjmq355
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<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>
<script
src="https://unpkg.com/react-content-loader#3.4.1/dist/react-content-loader.min.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
console.log('window', window);
class App extends React.Component {
render() {
return (
<div>
<h1>Hello world!</h1>
<ContentLoader.Facebook />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
I think you could try out React this way, but Babel usage is not recommended like this in production. I strongly recommend to install node and use create-react-app. This way you can use the whole toolchain in no time.
Or event create a new React sandbox on CodeSandbox.io

React without npm

How to import js file with code on Babel if i'm not using npm? I'm write my own server on Golang and serving html and js files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TODO APP</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type='text/babel' src="./js/App.js"></script>
<script type='text/babel' src="./js/Info.js"></script>
</body>
</html>
App.js
class App extends React.Component {
render(){
return(
<div>
<span onClick={() => {alert('clicked')}}>{Date.now().toString()}</span>
<Info />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Info.js
export default class Info extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: true,
};
this.handleClick = this.handleClick.bind(this);
}
render() {
const text = <label htmlFor="new-text">{this.state.isOpen ? 'Open' : "Closed"}</label>
return (
<div>
<button onClick={this.handleClick}>
{text}
</button>
</div>
)
}
handleClick(e) {
this.setState({
isOpen: !this.state.isOpen,
})
}
}
So i didn't know how to add Info to App. import didn't work cause i'm not using npm.

Import and export won't work. You need to add the script tags in proper order so that the dependencies are resolved.
index.html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Order is important -->
<script src="/info.js" type="text/babel"></script>
<script src="/index.js" type="text/babel"></script>
</body>
</html>
info.js
class Info extends React.Component {
render(){
return(
<div>
Hello World Info
</div>
)
}
}
index.js
class App extends React.Component {
render(){
return(
<div>
Hello World
<Info/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))

Wow slider with react.js is not working

I have created a page with fullpage.js and in one of the sections I've integrated wow slider. Same thing is working perfectly in html page but not when integrated in react.js. Getting following error.
Uncaught TypeError: Cannot read property 'replace' of undefined
at N
Script for wow slider
function ws_glass_parallax(d,l,m){var f=jQuery;var i=f(this);var j=d.parallax||0.25;var k=f("<div>").css({position:"absolute",display:"none",top:0,left:0,width:"100%",height:"100%",overflow:"hidden"}).addClass("ws_effect ws_glass_parallax").appendTo(m);var h=!d.noCanvas&&!window.opera&&!!document.createElement("canvas").getContext;if(h){try{document.createElement("canvas").getContext("2d").getImageData(0,0,1,1)}catch(q){h=0}}function t(e){return Math.round(e*1000)/1000}var u=f("<div>").css({position:"absolute",left:0,top:0,overflow:"hidden",width:"100%",height:"100%",transform:"translate3d(0,0,0)",zIndex:1}).appendTo(k);var s=u.clone().appendTo(k);var r=u.clone().css({width:"20%"}).appendTo(k);var c;var p=u.clone().appendTo(k).css({zIndex:0});this.go=function(C,A,x){var e=f(l.get(A));e={position:"absolute",width:e.width(),height:e.height(),marginTop:e.css("marginTop"),marginLeft:e.css("marginLeft")};x=x?1:-1;var E=f(l.get(A)).clone().css(e).appendTo(u);var z=f(l.get(C)).clone().css(e).appendTo(s);var v=f(l.get(C)).clone().css(e).appendTo(r);if(x==-1){r.css({left:"auto",right:0});v.css({left:"auto",right:0})}else{r.css({left:0,right:"auto"});v.css({left:0,right:"auto"})}var D=(m.width()||d.width)*1.3;var B=m.height()||d.height;var y;if(h){if(!c){c=f("<canvas>").css({position:"absolute",left:0,top:0}).attr({width:e.width,height:e.height}).appendTo(p)}c.css(e).attr({width:e.width,height:e.height});y=o(f(l.get(C)),e,10,c.get(0))}if(!h||!y){h=0}wowAnimate(function(G){G=f.easing.swing(G);var L=t(x*G*D),F=t(x*(-D+G*D-(1-G)*D*0.2)),J=t(x*(-D*1.4+G*(D*1.4+D/1.3))),w=t(-x*D*j*G),H=t(x*D*j*(1-G)),I=t(-x*D*(j+0.2)*G),K=t(x*(-D*0.2+G*D*0.4));if(d.support.transform){u.css("transform","translate3d("+L+"px,0,0)");E.css("transform","translate3d("+w+"px,0,0)");s.css("transform","translate3d("+F+"px,0,0)");z.css("transform","translate3d("+H+"px,0,0)");r.css("transform","translate3d("+J+"px,0,0)");v.css("transform","scale(1.6) translate3d("+I+"px,0,0)");p.css("transform","translate3d("+K+"px,0,0)")}else{u.css("left",L);E.css("margin-left",w);s.css("left",F);z.css("margin-left",H);r.css("left",J);v.css("margin-left",I);p.css("left",K)}},0,1,d.duration,function(){k.hide();E.remove();z.remove();v.remove();i.trigger("effectEnd")})};function o(C,A,B,v){var F=(parseInt(C.parent().css("z-index"))||0)+1;if(h){var I=v.getContext("2d");I.drawImage(C.get(0),0,0,A.width,A.height);if(!a(I,0,0,v.width,v.height,B)){return 0}return f(v)}var J=f("<div></div>").css({position:"absolute","z-index":F,left:0,top:0}).css(A).appendTo(v);var H=(Math.sqrt(5)+1)/2;var w=1-H/2;for(var z=0;w*z<B;z++){var D=Math.PI*H*z;var e=(w*z+1);var G=e*Math.cos(D);var E=e*Math.sin(D);f(document.createElement("img")).attr("src",C.attr("src")).css({opacity:1/(z/1.8+1),position:"absolute","z-index":F,left:Math.round(G)+"px",top:Math.round(E)+"px",width:"100%",height:"100%"}).appendTo(J)}return J}var g=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];var n=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function a(am,U,S,v,w,ad){if(isNaN(ad)||ad<1){return}ad|=0;var ah;try{ah=am.getImageData(U,S,v,w)}catch(al){console.log("error:unable to access image data: "+al);return false}var C=ah.data;var ab,aa,aj,ag,J,M,G,A,B,R,H,T,P,X,ac,K,F,L,N,W;var ak=ad+ad+1;var Y=v<<2;var I=v-1;var af=w-1;var E=ad+1;var ae=E*(E+1)/2;var V=new b();var Q=V;for(aj=1;aj<ak;aj++){Q=Q.next=new b();if(aj==E){var D=Q}}Q.next=V;var ai=null;var Z=null;G=M=0;var O=g[ad];var z=n[ad];for(aa=0;aa<w;aa++){X=ac=K=A=B=R=0;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}for(aj=1;aj<E;aj++){ag=M+((I<aj?I:aj)<<2);A+=(Q.r=(F=C[ag]))*(W=E-aj);B+=(Q.g=(L=C[ag+1]))*W;R+=(Q.b=(N=C[ag+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next}ai=V;Z=D;for(ab=0;ab<v;ab++){C[M]=(A*O)>>z;C[M+1]=(B*O)>>z;C[M+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(G+((ag=ab+ad+1)<I?ag:I))<<2;X+=(ai.r=C[ag]);ac+=(ai.g=C[ag+1]);K+=(ai.b=C[ag+2]);A+=X;B+=ac;R+=K;ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=4}G+=v}for(ab=0;ab<v;ab++){ac=K=X=B=R=A=0;M=ab<<2;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}J=v;for(aj=1;aj<=ad;aj++){M=(J+ab)<<2;A+=(Q.r=(F=C[M]))*(W=E-aj);B+=(Q.g=(L=C[M+1]))*W;R+=(Q.b=(N=C[M+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next;if(aj<af){J+=v}}M=ab;ai=V;Z=D;for(aa=0;aa<w;aa++){ag=M<<2;C[ag]=(A*O)>>z;C[ag+1]=(B*O)>>z;C[ag+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(ab+(((ag=aa+E)<af?ag:af)*v))<<2;A+=(X+=(ai.r=C[ag]));B+=(ac+=(ai.g=C[ag+1]));R+=(K+=(ai.b=C[ag+2]));ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=v}}am.putImageData(ah,U,S);return true}function b(){this.r=0;this.g=0;this.b=0;this.a=0;this.next=null}};
jQuery("#wowslider-container1").wowSlider({effect:"glass_parallax",prev:"",next:"",duration:20*100,delay:20*100,width:640,height:360,autoPlay:false,autoPlayVideo:false,playPause:false,stopOnHover:false,loop:false,bullets:1,caption:true,captionEffect:"traces",controls:false,controlsThumb:false,responsive:2,fullScreen:false,gestures:2,onBeforeStep:0,images:0});
Created app using create-react-app
App.js code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<ul id="menu">
<li data-menuanchor="firstPage">firstPage</li>
<li data-menuanchor="secondPage">secondPage</li>
<li data-menuanchor="3rdPage">3rdPage</li>
<li data-menuanchor="4thpage">4thpage</li>
<li data-menuanchor="5thpage">5thpage</li>
</ul>
<div id="fullpage">
<div className="section " id="section0">
<div className="intro">
<p>Your Virtual Assistant</p>
<p>Free your time for the things that matter to you.</p>
<p>be part of the first release, <br/> duw out shortly</p>
Sign up today
</div>
</div>
<div className="section" id="section1">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section2">
<div id="wowslider-container1">
<div className="ws_images"><ul>
<li><img src="images/background_1.jpg" alt="Background_1" title="Background_1" id="wows1_0"/></li>
<li><img src="images/sample_1.jpg" alt="Sample_1" title="Sample_1" id="wows1_1"/></li>
<li><img src="images/sample_2.jpg" alt="javascript carousel" title="Sample_2" id="wows1_2"/></li>
<li><img src="images/sample_3.jpg" alt="Sample_3" title="Sample_3" id="wows1_3"/></li>
</ul></div>
<div className="ws_bullets"><div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div></div><div className="ws_script" >css image gallery by WOWSlider.com v8.8m</div>
<div className="ws_shadow"></div>
</div>
</div>
<div className="section" id="section3">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section4">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
index.html page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.min.css">
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/examples.js"></script>
<script type="text/javascript" src="js/wowslider.js"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
// anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
sectionsColor: ['#4A6FB1', '#939FAA', '#323539','#4A6FB1','#939FAA'],
// scrollOverflow: true
// sectionsColor: ['', '#939FAA', '#fff','#fff','','#fff','',''],
anchors:
['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage','6thpage','7thpage','8thpage'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000,
scrollOverflow: true,
fixedElements: '10',
// paddingTop: '3em',
lockAnchors: true,
// scrollBar:true,
onLeave: function(){
}
});
});
</script>
</body>
</html>

If you want to keep the revision as little as possible, try to prefix the window to external library (use as global variable)
jQuery("#wowslider-container1").wowSlider(...)
to
window.jQuery("#wowslider-container1").wowSlider(...)
Here is explanation on CRA doc.
The part I could not understand is that why you need the function
function ws_glass_parallax(d,l,m){...}
in your script.js.
But I cannot make sure it would work as expected cause that I think this is not the anticipated way to develop in react.
My suggestion, including the fullpage utilization you deployed in index.html should just move to componentDidMount() which could roughly seem as the same place as $(document).ready(function() {})
so the whole picture should be:
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
window.JQuery(this.refs.fullpageEle).fullpage({...});
window.JQuery(this.refs.wow).wowSlider({...});
}
render() {
return (
<div className="App">
<ul id="menu"> ... </ul>
<div id="fullpage" ref="fullpage" >
<div className="section" id="section0"> ... </div>
<div className="section" id="section1"> ... </div>
<div className="section" id="section2">
<div id="wowslider-container1" ref="wow">
</div>
</div>
<div className="section" id="section3"> ... </div>
<div className="section" id="section4"> ... </div>
</div>
</div>);
}
}
export default App;
Something may be new to you is ref which I add in your target element and we refer the element by it in componenetDidMount(), here is the description on official doc.
And leave index.html only including external source but not JS code.

Develop Reference

c reactjs sql-server angularjs arrays wpf database batch-file google-app-engine silverlight

How to link react component to html? - reactjs

Please make sure Ads class is exported from ads.js.

Related

Django React div with id won't load from js file?

How to Render React App in Custom HTML5 Element instead div[id=root]

add react to a website : how import external node module?

React without npm

Wow slider with react.js is not working

Categories

Resources