I just started learning React and trying to get Render() to work.
I couldn't get the content to be added to my html page.
This is my index.html
<html>
<head>
<script async src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
and this is my main.js
import React from 'react';
import ReactDOM from 'react-dom';
class Layout extends React.Component{
render(){
return (
<h1>It works!</h1>
);
}
}
document.addEventListener('DOMContentLoaded', function() {
ReactDOM.render(<Layout />, document.getElementById('app'));
});
I have tried not using a js referenced code, but both do not work.
<html>
<head>
<script src="bundle.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
</script>
</body>
</html>
To render the dom you just need to put the script tag after the element you want to render on.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React app</title>
</head>
<body>
<div id="app"></div>
<script src="app.min.js"></script>
</body>
</html>
In main.js:
ReactDOM.render(<App />, document.getElementById('app'))
No need to put a event listener that way.
Related
I am trying to render reactJS a component on my laravel (5.7) but it does not seem to show up. This is what my files look like:
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>React JS</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{asset('css/app.css')}}" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));
App.js
import React from 'react';
class App extends React.Component() {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
export default App;
npm run watch is running and shows no errors.
Please what might I be doing wrong here?
Using defer fixed it for me
<script defer src="js/app.js"></script>
Use defer : The defer attribute is a boolean attribute.
<script defer type="text/javascript" src="{{ asset('js/app.js') }}"></script>
When present, it specifies that the script is executed when the page has finished parsing.
Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).
Source: MDN
Syntex
You have syntactic bug when you declare class in App.js. You don't use parentheses when you declare class in JavaScript.
class App extends React.Component {
render(){
return (
<div>
<h1>Hello</h1>
<p>What a REAVELation</p>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<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>
<div id="root"></div>
Add this inside the <head> </head>
<script src="{{ asset('js/manifest.js') }}"></script>
<script src="{{ asset('js/vendor.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
One way to solve this issue is by extracting the vendor library code in a separate file. To do so, open the webpack.mix.js file and update its code as follows:
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.react()
.extract(['react'])
.postCss('resources/css/app.css', 'public/css', [
//
]);
This code is working fine when running locally. When I upload this in 000webhost and use the path of bundle.js in WordPress page then facing this error.
I am getting the above-mentioned error without _registerComponent. Everywhere there is a solution for the error with _registerComponent.
Also I am getting the value of document.getElementById("app") as null.
app.js
import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
Code used in WordPress
<html>
<head>
</head>
<body>
<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 async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
As you are not using index.html in wordpress you will need to add root container div for react to use to render your application. Try adding div for app in wordpress html i.e <div id="app"></div>
<html>
<head>
</head>
<body>
<div id="app"></div>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
</body>
</html>
Try this, in app.js
import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";
const App = () => (
<div>
<Plans/>
</div>
);
ReactDOM.hydrate(
<App />,
document.getElementById('app')
);
Your variable "app" is undefined. Try this
render(<App />, document.getElementById('app'));
I am new to React and would at the moment like to run everything using CDNs. It seems that similar questions to avoid the same error I am getting ("Uncaught SyntaxError: Unexpected token <") are solved by including ''. But that is not working in this example when I run this very basic React app. Does it not work because Babel cannot transcompile the script from this same file?
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<meta charset="UTF-8">
<title>Title</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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
<script type="text/babel"></script>
<div id="app"></div>
</head>
<body>
<script>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>First React App</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>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
class Template extends React.Component{
render(){
return(
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
}
}
//ReactDom function starting
var AppRoot = document.getElementById('app')
ReactDOM.render(<Template/>, AppRoot)
</script>
</body>
</html>
Use Reactjs version 16. Create class-based component then render it. Use this documentary for better understanding. Link
You have to add type='text/babel' to your script. I also recommend to use at least react 16 if you want to start learning. You might also want to make sure to use UMD versions of react and reactDOM to make sure they run in the browser.
<!DOCTYPE html>
<html>
<head>
<title>First React App</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>
</head>
<body>
<div id='app'></div>
<script type='text/babel'>
console.log('App.js is running!');
var Template = (
<div>
<h1>John</h1>
<p>Age: 26</p>
<p>Location: Philadelphia</p>
</div>
)
var AppRoot = document.getElementById('app')
ReactDOM.render(Template, AppRoot)
</script>
</body>
</html>
I am not getting hello world as an output. Can anyone tell me what i am missing , its a basic code , got an output in a different way using createElement function. I am new to react.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox>,target);
</script>
</body>
</html>
Do these changes:
1. Include babel standalone script to transform your jsx, put the cdn links in the head part, script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
2. Instead of storyBox use StoryBox (capital S), check this answer for reason.
3. You forgot to close, here: <storyBox>, use this: <StoryBox />.
4. Instead of Div use div.
Check the working snippet:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="react-app"></div>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox/>,target)
</script>
</body>
</html>
You need to add babel as well, to transform your jsx into es5. Here is the sample code. NOTE: your cdn for react was throwing error so I have used other cdn.
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
P.S. If you want to try react using npm packages here is a simple github repository to start with.
You need to include a JSXTransformer in order to be able to execute raw JSX. Try running the code below:
<div id="react-app">
</div>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
ReactDOM.render(<StoryBox />, document.getElementById('react-app'))
</script>
You need to add JSX self-closing tag /> - when there is no children.
replace this line:
ReactDOM.render(<StoryBox>,target)
to
ReactDOM.render(<StoryBox />,target)
See working code:
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div>);
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox />,target)
<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="react-app"></div>
I am a newbie to ReactJS. I was trying yo render a simple div using ReactDOM but not able to do so. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React</title>
</head>
<body>
<div id="root">
</div>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Can anybody guide me as to why its happening ?
Note - I am using React 15.4.2 and Chrome version 57.
You need to add the transpiler babel to your project. you can adapt my example below to your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
</script>
</body>
</html>
see another example that doesn't use babel
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(React.createElement('h1', null, 'hello'), document.getElementById('root'));
</script>
</body>
</html>
You are attempting to use JSX without any transpiler (babel etc).
Try this instead:
ReactDOM.render(
React.createElement('hi', 'Hello, world!'),
document.getElementById('root')
);
Or add a script and type to handle JSX.