React importing and rendering other component not working without tooling - javascript

I am trying to render a component inside another component and then render that code into a html file. I tried everything I knew but can't get to work. I am new to React JS and want to learn it as plain as possible without any tooling and bundlers. Hence I am linking react, react-dom and babel in my html file and creating two different component js files. Can you please look at the code and guide what is wrong with it and how to fix it. I have tried export default before class Header and just export and in App.js file I tried import {Header} from './Header'; but still did not work. Thank you.
/* Header Component in a Header.js file */
class Header extends React.Component
{
render()
{
return(
<div>
<h1>My Beautiful Website</h1>
<hr />
</div>
);
}
}
export default Header;
/* App Component in App.js file */
import Header from './Header';
class App extends React.Component
{
render()
{
return (
<div>
<Header />
<section>
<h2>I am trying to make this React thing work</h2>
<p>
It should be easy to do I am trying to do but may be I am a little confused about
things in React JS. Sooner or later though everything gets easier and most importantly
crystal clear to the human mind when you persevere. I believe.
</p>
</section>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.8/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Hello world</title>
</head>
<body>
<div id="root"></div>
<script src="./App.js" type="text/babel"></script>
</body>
</html>

You have to pass additional attribute transform-es2015-modules-umd to scripts if you want to use import,export and jsx
<script data-plugins="transform-es2015-modules-umd" src="./Header.js" type="text/babel"></script>
<script data-plugins="transform-es2015-modules-umd" src="./App.js" type="text/babel"></script>
Example
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel" data-plugins="transform-es2015-modules-umd">
class Header extends React.Component
{
render()
{
return(
<div>
<h1>My Beautiful Website</h1>
<hr />
</div>
);
}
}
export default Header;
</script>
<script type="text/babel" data-plugins="transform-es2015-modules-umd">
// import Header from "./Header";
const Header = window.InlineBabelScript.default
class App extends React.Component
{
render()
{
return (
<div>
<Header/>
<section>
<h2>I am trying to make this React thing work</h2>
<p>
It should be easy to do I am trying to do but may be I am a little confused about
things in React JS. Sooner or later though everything gets easier and most importantly
crystal clear to the human mind when you persevere. I believe.
</p>
</section>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>

Related

react-text-fun rendering text twice?

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.

How to get another component on ReactJs use ES6 modules

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.

Trying to make sense with React

I recently discovered React and I'm trying to understand how it works.
I put this code:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
Super simple, but my page is blank instead of showing h1 element I suposedly rendered here.
Can someone explain why doesn't it work and what am I missing to make it work?
There is also a simple element in the HTML file along with all instructed code from the React doc page:
<div id="app"></div>
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
<script src="index.js"></script>
Stack Snippet:
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Hello World</h1>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
<div id="app"></div>
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
I suspect you don't have anything in place to handle JSX. Note that <App /> is invalid JavaScript syntax. It's a JavaScript extension called JSX. You don't have to use JSX with React, but most people do.
If you want to use JSX, you'll need to use Babel or similar to compile (aka "transpile") the JSX into calls to React.createElement. Usually you do that as a build step so that what's deployed is already transpiled (and minified and bundled). There is an in-browser way of doing it with Babel Standalone, but it's (strongly) not recommended for production. (This meta question shows using Babel standalone.)

How do I use Next JS's Head tag

I've only just started looking at Next JS for my project but am having issues with the Head tag not working. According to the documentation, I should just be able to import head from next/head and insert the title tag. However, it's not working for me, be it using the Layout component which gets imported to each page or directly injecting it.
Here is the code as a layout (/components/layout.jsx)
import Link from 'next/link';
import Head from 'next/head';
export default function Layout({
children,
title = 'Default Title'
}) {
return(
<div>
<Head>
<title>{title}</title>
<meta charSet='utf-8' />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"></link>
</Head>
<nav>
<div className='nav-wrapper'>
<ul class='right hide-on-med-and-down'>
<li>
<Link href='/'>
<a>Home</a>
</Link>
</li>
<li>
<Link href='/about'>
<a>About</a>
</Link>
</li>
</ul>
</div>
</nav>
{children}
{/* Footer to go in here */}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</div>
)
}
And this is the about page (/pages/about.jsx)
import React from 'react';
import Layout from '../components/layouts';
function About() {
return(
<Layout>
<div>
<h1>Test Page</h1>
</div>
</Layout>
);
}
export default About;
It just doesn't work at all. The title is not updated and if I inspect the components, I can't see anything that I've added. I originally thought that it's because I set up the Next app myself and I did something wrong. However, I tried bootstrapping it with npx create-next-app and I am seeing the same issue.
Any help is appreciated!
Cheers
First, create a new component, eg. seo.jsx
import Head from "next/head";
const SEO = ({ pageTitle, pageDescription }) => (
<Head>
<title>{pageTitle}</title>
<meta name="description" content={pageDescription} />
...
</Head>
);
export default SEO;
Second, import to your page (eg. home.jsx):
import SEO from "#components/seo"; //change to your path
const Home = () => {
...
return (
<div>
<SEO pageTitle="Homepage" pageDescription="Welcome to my website" />
...
</div>
);
};
export default Home;
In this scenario you will be able to change title and description (or any other props you need) in any page of your app, without worrying about meta key duplicates.
More info here.
I took your exact code and created a sandbox and I can see the title working as expected provided you use .jsx in your import
import Layout from '../components/layouts';
to
import Layout from '../components/layouts.jsx';
or if you want to use without extension, use .js instead
**Code Sandbox - ** https://codesandbox.io/s/vigorous-wind-4e035?file=/pages/index.js
Next JS Discussion - https://github.com/vercel/next.js/issues/2391#issuecomment-311735189
I didn't do anything specific to the title but to make the sandbox work and to print the document title.
I modified paths without the folder and the default IndexPage next sandbox
Modified Index to print the document title
Instead of importing components/layout, imported components/layout.jsx
The Codesandbox crashed when i tried to import the file without the JSX extension.
Let me know if this helps or we can explore further!
I also got that the head tag is not a working issue, what I did was added a tag for cover and the layout of the body
ex:
<main>
<head>
{..head elements }
</head>
<div>
{ other elements }
<div>
</main>

How use React without web pack, node, nom etc

I'm trying to use React without webpack, node etc.
I want structure each component in separate file, this is what I'm doing:
index.html
<html>
<body>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="js/demandAnalysis/app.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
App.js
import SimpleButton from './componets/Buttons/SimpleButton.js';
class App extends React.Component {
render() {
return (
<div>
<Button/>
</div>
);
}
}
SimpleButton.js
class SimpleButton extends React.Component {
render() {
return (
<div>
<button type="button">Click me!</button>
</div>
);
}
}
But give me this error in console:
Uncaught ReferenceError: require is not defined
I think is caused by the import, how can use this structure also without node or web pack?
import is an ES6 feature, which is currently not supported by many browsers. That is the reason why babel is used to transpile your code into ES5. This is also true for class, extends and JSX that you are using.
If you do not want to use a transpiler you should use require instead of import and React.createClass({ ... }) instead of class.
An example of require instead of import:
var SimpleButton = require('./componets/Buttons/SimpleButton.js');

Categories

Resources