I've been playing around with some libraries and tested out react-text fun. I placed the blotter script in my html file and installed the library. When I test out an effect, I get two rendered elements on my page. Any ideas on how to fix this?
public HTML:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://unpkg.com/blotterjs-fork#0.1.0/build/blotter.min.js"></script>
</body>
component:
import React from 'react'
import { LiquidDistortionText } from 'react-text-fun'
// styles
import { Header, HeroContainer } from './Home.styles'
// components
export default function Home() {
return (
<Header>
<HeroContainer>
<LiquidDistortionText
text="Text"
speed={0.25}
rotation={0.2}
distortX={0}
distortY={0.2}
noiseAmplitude={0.1}
noiseVolatility={1}
/>
</HeroContainer>
</Header>
)
}
rendered webpage
Everything looks correct. You should look at your Header Component and HeroContainer. Maybe you used children twice times.
Related
I am trying to render a React component in an html file without using all too much code or too many files. The end goal is to let others render my React component in their html files with as little work for them as possible, hence the necessity for few files.
If I set up a project containing two files (index.html and index.js), one for defining the react component and another for rendering it, I do not get an error, but my component does not show up.
My files look like this:
index.html
<html>
<head>
<title>hello world</title>
</head>
<body>
<div>hello world</div>
<p>trying to load a react component</p>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import { createRoot } from "react-dom/client";
const Component = () => {
return <div>hello this is literally react. not a joke LOL</div>;
};
const root = createRoot(document.getElementById("root"));
root.render(<Component />);
When I then run the project in the browser, the react component does not load whereas all other components do laod.
What do I do?
i need help for integrate frontend ReactJS on my site. currently i avoid to use nodeJS or NPM for implement my reactJS. but i'm using ReactJS CDN. so i not run npm start when develop the reactJS. i just want to use the frontend.
Hope this will understand from the start. so i have a question, how do i able to get another component and place it on single file.
I Created file App.js. I plan that this file will become a centralize for other components.
let me share what i'm doing right now.
here is my file structure
this is my code on index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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="buynow/index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
this is my code on index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js'
ReactDOM.render(<App />, document.getElementById('root'));
this is my code on App.js
import React from 'react';
import Navbar from './components/Navbar.js'
function App(props){
return (
<div>
<Navbar/>
Hello App
</div>
);
}
export default App;
this is my code on Navbar.js
import React from 'react';
function NavBar(props) {
return (
<div>
<Navbar/>
Hi NavBar
</div>
);
}
export default NavBar;
but i got this error, and pointed on file index.js line:1
Uncaught ReferenceError: require is not defined
this is error
I confuse how to solve this. I start with the simple code just for testing if it can work or not.
please help.
https://reactjs.org/docs/react-without-jsx.html
JSX is not a requirement for using React. Using React without JSX is
especially convenient when you don’t want to set up compilation in
your build environment.
So you can't use JSX/TSX directly in your browser (need compilation). Also, you can't use import outside a module (so basically now, you can already use your function components by adding the import of all your files in the index.html).
In my experience I suggest that you use the benefits of JSX / TSX and compile your code with NPM to be more comfortable (everything is way more intuitive with jsx).
In any case, in the link that I have included, you will find how to do the equivalent of JSX with pure javascript. That's what you need. (as you can see in my small snippet)
If you want keep using react from CDN and without compiling, your code, should be something like this:
// For the Snippet i have all of your js here
// But you could just import in your index.html every separate component file you have (without any import/export syntax)
function NavBar(props) {
return React.createElement('span', null,props.title);
}
function App(props){
return React.createElement('span', null, React.createElement(NavBar, {title: 'Header'}, null),
React.createElement('span', null,'Hello App'));
}
ReactDOM.render(React.createElement(App, {}, null), document.getElementById('root'));
<html>
<head>
<meta charset="UTF-8" />
<title>Buynow Project</title>
<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>
</head>
<body>
<div id="root"></div>
</body>
</html>
Anyway, as you see, the code is not so readable this way...
EDIT
I made the same snippet on stackblitz with separated files
https://stackblitz.com/edit/web-platform-4ruju9?file=index.html
Ps. Also, don't put NavBar inside NavBar or you'll get a render loop
You have to enable module support in script tag
<script type="text/babel" data-type="module" src="./index.js"></script>
Remove React import statements as they can be directly used.
I´m a newbie on react and gatsby but i´m working on a little project as practice anda I have a little problem. I want to add a custom JS file to the project (little functions for a calculator on the index). I used Helmet to import them and on develop enviroment is working fine, but once build, is not.
import Helmet from "react-helmet"
import { withPrefix, Link } from "gatsby"
export default function homePage() {
return (
<main>
<Helmet>
<script src={withPrefix('/functions.js')} type="text/javascript" />
<script src={withPrefix('/escritura.js')} type="text/javascript" />
</Helmet>
}
I´m not sure what I am doing wrong. Someone can help me, please? You can see the project proof version live here:
https://modest-hoover-aac2d1.netlify.app/
In the final version, every input should be filled automatically, but is not happening.
withPrefix is a helper function that only works in build mode because in development mode paths don't need to be prefixed:
For pathnames you construct manually, there’s a helper function,
withPrefix that prepends your path prefix in production (but doesn’t
during development where paths don’t need to be prefixed).
So if your code works well under development mode, just remove withPrefix and leave your code as:
export default function homePage() {
return (
<main>
<Helmet>
<script src={`/functions.js`} type="text/javascript" />
<script src={`/escritura.js`} type="text/javascript" />
</Helmet>
}
I want to implement this into my Next.js App
https://codepen.io/Lemonzillah/pen/rmQLRm
I tried to add both libraries needed for this to work in the _document.js file and then link the js code in text-slider from /public
<Main />
<NextScript />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="public/text-Slider.js"></script>
But it ain't working, somehow - it doesn't show any error. It's just now working - hope you can help me!
First of all. It is recommended to not use jquery in react or next js app.
Then if you want to use jquery in next js app you can use next docuemnt..
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
**Here you can use custom css link or font link like bootstrap cdn
</Head>
<body>
<Main />
<NextScript />
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="public/text-Slider.js"></script>
</Html>
)
}
}
export default MyDocument
You can use now slick by calling slick slider cdns link in script and css. Ans use them. It is recommend to use React slick in next js app
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.