I wonder if we can add multiple react components into HTML without having the related files usually downloaded with npm, or added to a normal HTML but we add a certain component for a chat app as my attempt here, here is a long example:
<html lang="en">
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
state={
messages:[
{ }
],
userId:''
}
addMessage=(message)=>{
message.num = Math.random();
message.id=this.state.messages.id;
let messages = [...this.state.messages, message];
this.setState({
messages })
}
addId=(userId)=>{
this.setState({
userId
})
}
render() {
return (
<div className="appContainer">
<User userId={this.addId} />
<TopSection Users={this.state.userId}/>
<Messages userId = {this.state.userId} messages={this.state.messages}/>
<AddMessage addMessage={this.addMessage} />
</div>
);
}
}
}
const Messages = ({messages, userId}) =>{
const messageList= (messages.length)? (messages.slice(1).map(message=>{
return(
<div className="message" key={message.num}>
<span key={userId.num}>{message.content?(userId):(null)}</span>
<p>{message.content}</p>
</div>
)
})) : (null);
return(
<div className="textContainer">
{messageList}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
</body>
</html>
please let me know if there is away to get this to work.
You mean add components to different dom nodes ?
import {render} from 'reactDOM'
import React from 'react'
import AppOne from './appOne'
import AppTwo from './appTwo'
render(<AppOne />, document.getElementById('appOne'));
render(<AppTwo />, document.getElementById('appTwo'));
React v16 has portals as well for adding componnets to differnt parts of the dom tree
Related
I have static html file and used umd script like:
<script src="https://unpkg.com/react#16.8/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16.8/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js" crossorigin></script>
I can use <MyContext.Provider> and <MyContext.Consumer>. But unable to use
static contextType = MyContext;
The output to console.log(this.context) is getting an empty object
I am running this example from https://medium.com/#muddassirm/react-context-api-made-simple-a778ec819fa7 . This does seem to work !
Code running in Plunker https://plnkr.co/edit/A4YCEJR3GvqVgs6X?preview
const Context = React.createContext();
const ContextApp = () => {
return (
<Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
<CustomComponent/>
</Context.Provider>
)
}
class CustomComponent extends React.Component {
render(){
let context = this.context
return(<div>{context.map((item) => <li>{item}</li>)}</div>)
}
}
CustomComponent.contextType = Context
// Render it
ReactDOM.render(
<ContextApp />,
document.getElementById("react")
);
<div id="react"></div>
<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>
I have the following 'List' component where I'm trying to update this.state from props. I can't seem to get getDrivedStateFromProps to work correctly with componentDidUpdate. There's a problem with the logic but it doesn't seem that gDSFC ever fires as I get the same response whether it's commented out or not.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>list</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
<script type = 'text/jsx'>
class FilteredList extends React.Component{
constructor(props){
super(props);
this.state={list:this.props.list};
}
filter(input){
var newList = this.state.list.filter(function(item){
return (item.search(input.target.value)!=-1);
});
this.setState({list:newList});
}
render(){
return(
<div>
<input type='text' placeholder='Filter' onChange={this.filter.bind(this)} />
<List items={this.state.list} />
</div>
);
}
}
class List extends React.Component{
constructor(props){
super(props);
this.state={items:this.props.items};
}
static getDerivedStateFromProps(nextProps, prevState) {
console.log('hello1');
if (nextProps.items !== prevState.items) {
return {
items: nextProps.items,
};
}
// Return null if the state hasn't changed
return null;
}
componentDidUpdate(nextProps,prevState){
console.log('hello2');
if(nextProps.items !== prevState.items)
this.setState({items:nextProps.items});
}
render(){
return(
<ul>
{this.state.items.map(function(item){
return(<li key={item}>{item}</li>);
})}
</ul>
);
}
}
ReactDOM.render(
<div><FilteredList list={['anteater','bear','cat','dog','elephant','fox']} /></div>,
document.getElementById('container')
);
</script>
Upgrade to v5.2.1 or higher and this open issue should be fixed
yarn upgrade -L react-helmet
I think you need 16.3.1 or later, possibly 16.3.3
I'm new to Reactjs and I am getting the "unexpected token error" in my first attempt to build a series of components.
My console reports this:
SyntaxError: http://localhost:3004/app.js: Unexpected token (14:11)
class AnnouncementList extends React.Component
{
render() {
^
return (
I got really frustrated when searching the console output on Google it really messes up when we insert code in the search keywords. I have the babel plugin set up.
class AnnouncementsDashboard extends React.Component
{
render() {
return (
<div>
<AnnouncementList/>
<div>
);
}
}
class AnnouncementList extends React.Component
{
render() {
return (
<div>
<Announcement />
</div>
);
}
}
class Announcement extends React.Component
{
render(){
return (
<div></div>
);
}
}
/**
* #jsx React.DOM
*/
ReactDOM.render(<AnnouncementDashboard />, document.getElementById('container'));
updated, html included.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Disable browser cache -->
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<title>Project Two: Timers</title>
<link rel="stylesheet" href="vendor/semantic-ui/semantic.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="vendor/babel-core-5.8.25.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
<script src="vendor/uuid.js"></script>
<script src="vendor/fetch.js"></script>
</head>
<body>
<div id="main" class="main ui">
<h1 class="ui dividing centered header">Timers</h1>
<div id="container"></div>
</div>
<script type="text/babel" src="./client.js"></script>
<script type="text/babel" src="./helpers.js"></script>
<script type="text/babel" data-plugins="transform-class-properties" src="./app.js"></script>
</body>
</html>
Adding a scenario that works:
/* eslint-disable react/prefer-stateless-function */
/* eslint-disable react/jsx-boolean-value */
class AnnouncementDashboard extends React.Component
{
render() {
return (<div>"I'm am React, when something goes wrong I always say - unexpected token" </div>);
}
}
ReactDOM.render(<AnnouncementDashboard/>, document.getElementById('container'));
the only issue I see is the AnnouncementsDashboard component is missing a closing slash on the container div. Also I would restructure the code to use stateless functions. Unless you plan on adding state to them later on.
const Announcement = () => {
return (
<div></div>
);
}
const AnnouncementList = () => {
return (
<div>
<Announcement />
</div>
);
}
const AnnouncementsDashboard = () => {
return (
<div>
<AnnouncementList/>
</div>
);
}
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
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>