I know how to set up a React project using npm, yeoman and it works fine.
When I follow this tutorial
http://danprince.github.io/learn-react/lessons/ex1.html and apply React from CDN, it also works - but it's an old version. If I try to apply a new version of React via CDN, I can't figure out how to render ANYTHING on the screen. For example, what's wrong with the following code?:
react:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'>
html:
<body>
<div id="root"> </div>
</body>
js (based on Code School tutorial exaple):
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
Since react v15.6.0 the ReactDOM module has been moved to a separate package add this to below your react <script ... /> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
Snippet:
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"> </div>
I think you should look at some updated react tutorials e.g.
Simple React Development in 2017
Related
I want build a React component like
class MyComponent extends React.Component {
render(){
return (<div>This is a simple component</div>);
}
}
and use it like
<MyComponent></MyComponent>
in several different pages and even multiple times in a single html page.
I dont want to create a SPA just to enhance my web application's UI with React components.
Use
ReactDOM.render(<MyComponent />, document.getElementById('id'));
You can render in your HTML like this:
<div id="id"></div>
What you are asking for is not possible right now with React, you want to use what is known as web components.
https://webdesign.tutsplus.com/articles/how-to-create-your-own-html-elements-with-web-components--cms-21524
Read this to learn how to.
The other method is obviously
ReactDOM.render(<MyComponent />, document.getElementById('id'));
If you have to stick with React.
In index.jsx change the typical search for element root getElementById and change the logic to a getElementsByTagName scheme.
let elements=document.getElementsByTagName('MyComponent');
for (element of elements){
ReactDOM.render( <MyComponent />, element );
}
Simply adding React components into HTML code is not possible, because <MyComponent></MyComponent> is not HTML at all, it is JSX.
Explaination
JSX is a special syntax that can be 'transpiled' to Javascript, so in essence <MyComponent></MyComponent> will end up beeing Javascript code, which obviously can not just be put into HTML code.
The Javascript code generated from JSX then will be executed and generates actual HTML code.
It is possible to add HTML tags into JSX, because HTML can be interpreted as JSX (and will be transpiled to Javascript as well), like:
class MyComponent extends React.Component {
render(){
return <div>
<h2>HTML in JSX works</h2>
<SomeOtherJsxComponent />
</div>;
}
}
But it is not possible to add JSX into HTML, like:
<body>
<div>
<JsxInHtmlDoesNotWork />
</div>
</body>
React is Javascript, so everything that is necessary to add Javascript functionality to HTML also applies to adding React to HTML.
(nearest) Solution
So what you could do is to move your existing HTML into to some JSX wrapper (which is probably not what you would like to do, because this goes in the direction of creating a SPA, what you don't want), e.g.:
<html><head>
<title>My web site</title>
</head><body>
<h1>Some HTML title</h1>
<p>Some HTML content.</p>
<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>
<!-- import the react libraray -->
<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/babel.min.js"></script>
<!-- setup react root component other components -->
<script type="text/babel">
class RootComponent extends React.Component {
render(){
return <div>
<MyComponent />
</div>;
}
}
class MyComponent extends React.Component {
render(){
return (<div>This is a simple component</div>);
}
}
const domContainer = document.querySelector('#injected-react-content');
ReactDOM.render( React.createElement(RootComponent), domContainer );
</script>
</body></html>
For some more background information on how to add React to an existing HTML website, see e.g.:
stackoverflow.com/questions/65917670/how-to-use-react-components-as-part-of-legacy-html-js-app
stackoverflow.com/questions/69607103/react-component-not-displayed-in-html
There are couple of options which can be explored here
parcel bundle
https://javascriptpros.com/creating-react-widgets-embedded-anywhere/
direflow bundle
https://jhinter.medium.com/using-react-based-web-components-in-wordpress-f0d4097aca38
My react codepen is not showing anything.
JS
class HelloWorld extends React.Component {
render() {
return (<div>Hello World!</div>);
}
}
var app = document.getElementById("mainapp");
React.render(<HelloWorld />, app);
HTML
<div id='mainapp'></div>
I imported React and ReactDOM trough a cdn. And if I type React/ReactDOM in the console it is imported correctly. This code doesn't show any errors yet I see nothing. I tested this on multiple browsers (chrome, firefox, icecat) but still no results... I'm using bable is a preprocessor.
ReactDOM.render not React.render.
class HelloWorld extends React.Component {
render() {
return <div>Hello World!</div>;
}
}
var app = document.getElementById("mainapp");
ReactDOM.render(
<HelloWorld/>,
app
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
<div id='mainapp'></div>
Your component needs to return an element instead of a naked string. Try to modify it to <div>Hello World!</div>
Two things
You need to return a valid react element
Use ReactDOM.render instead of React.render
Snippet
class HelloWorld extends React.Component {
render() {
return <div>"Hello World!"</div>
}
}
var app = document.getElementById("mainapp");
ReactDOM.render(<HelloWorld />, app);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="mainapp"></div>
Also see this answer on why you should use ReactDOM
react vs react DOM confusion
I want to be able to mount React components based on the HTML markup of a document rendered by a PHP framework and I can't find a way to achieve this.
Here is the HTML markup of my document:
<html>
<head>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
<Foo bar="lorem"></Foo>
<Foo bar="ipsum"></Foo>
<Foo bar="dolor"></Foo>
</div>
<script src="js/index.js"></script>
</body>
</html>
Here is the Foo component implementation (foo.js):
const React = require('react');
class Foo extends React.Component {
render() {
return React.createElement('div', {
className: 'foo'
}, `Hello ${this.props.bar}`);
}
}
module.exports = Foo;
And here is my App implementation (app.js):
const React = require('react');
const ReactDOM = require('react-dom');
require('./foo');
ReactDOM.render(
React.createElement('div'),
document.getElementById('app')
);
module.exports = {};
I'm expecting React to recursively mount every components found inside the #app div but for some reason only the #app div is mounted resulting in the following markup:
<div id="app">
<div data-reactroot=""></div>
</div>
I can't put my fingers on what I am doing wrong here.
So, in you app.js when you are rendering react DOM
ReactDOM.render(
React.createElement('div'),
document.getElementById('app')
);
In this case you are creating a div element and rendering it inside root div with id=app
In order to create multiple foo elements all you have to do is this
const Foo = require('./foo');
ReactDOM.render(
<div>
<Foo bar="lorem"></Foo>
<Foo bar="ipsum"></Foo>
<Foo bar="dolor"></Foo>
</div>
document.getElementById('app')
);
Hope this helps
From this question (Is it OK to use React.render() multiple times in the DOM?) it seem like we can call React.render() multiple times in a page. However when I tried following code I got " _registerComponent(...): Target container is not a DOM element." error on the second component.
import React, {Component} from 'react';
import {render} from 'react-dom';
import {Button} from 'office-ui-fabric-react/lib/components/Button'
class App extends Component {
render () {
</div>;
return(
<div><Button>I am a button.</Button></div>
)
}
}
render(<App/>, document.getElementById('app'));
render(<App/>, document.getElementById('app2'));
<html>
<head>
<meta charset="utf-8">
<title>React.js using NPM, Babel6 and Webpack</title>
</head>
<body>
<div id="app" />
<div id="app2" />
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
You have a closing div above the return statement in you render function,apart from that as stated in the docs of office-ui-fabric-react Button is being import from lib and not lib/components
Import it like
import { Button } from 'office-ui-fabric-react/lib/Button';
class App extends React.Component {
render () {
return(
<div>I am a button</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
ReactDOM.render(<App/>, document.getElementById('app2'));
<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="app"></div>
<div id="app2"></div>
I am trying to use http://www.material-ui.com/ for front end design. I am trying to execute the first example within the getting started tutorial. I have following html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
and following App.js and MyAwesomeReactComponent.js files as defined in ( http://www.material-ui.com/#/get-started/usage )
App.js :
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
MyAwesomeReactComponent.js:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
But when I run the index file, I can't see any output.
The problem is here since you are implementing ES6 code, you need to use a javascript compiler like babel to transform your ES6 code to ES5 which is current javascript standard that is supported by browsers.
It would be a good practice to use babel with webpack as a loader.
Following React's get started page's instruction is a good starting point. I'd suggest reading the instructions carefully.
Finally, if you want to use pure ES6 without transforming, the compatibility table is available here: https://kangax.github.io/compat-table/es6/