React | Multiple render - javascript

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?

I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)

You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));

We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>

Related

Nested Web Compontent render multipli

I just start building my first Web Compontent. I want to understand those frameworks out there and I start from scratch
MyProblem ist that the Components are rendering multipli times. So I have some parts more than once in a nested element.
An example will show you what is going wrong.
<html>
<head>
</head>
<body>
<wc-form>
<wc-box>
<wc-input></wc-input>
</wc-box>
</wc-form>
<script type="module">
import {Input} from './js/input.js';
import {Form} from './js/form.js';
import {Box} from './js/box.js';
</script>
</body>
</html>
Every Import i one of this Web Compontent I create like these one example
export class Form extends HTMLElement {
constructor() {
super()
}
render() {
this.innerHTML = `
<form style="border:5tpx solid green">
${this.innerHTML}
</form>`
}
}
window.customElements.define('wc-form', Form);
So I developed the slots function with the output from innerHTML. When I run this code I get nested boxes multipli because some parts are often rendered than ones. That is because I use the innerHTMl so so script always starts to render again and again.
When i do the import the right way as the elements can be strucred I don't get the Problem.

Why local browser won't show anything?

i have start learning with reactjs and purely new.i have created a new app in react and wrote the following code in Blog.js:
import React,{Component} from 'react';
const blogBody=()=>{
return(
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Written By Ali</h5>
<p>Some text..</p>
</div>
)
}
class Blog extends Component {
render() {
return (
<div>
<blogBody/>
</div>
);
}
}
export default Blog;
and my App.js is:
import React,{Component} from 'react';
import Blog from './Blog'
class App extends Component {
render() {
return (
<div className="container">
<Blog/>
</div>
);
}
}
export default App ;
when i execute npm start, it shows nothing. then when i go to developer tools it is saying under the tab
You need to enable JavaScript to run this app.
did i do anything wrong with my code or in any setting? but when i run he initial page after creating new app fresh, it is showing the react thing with enable src regular stuff.
where did i do wrong?
this is my first post....please let me know if i break any rules and please help..
Component names have to start with capital letters.
Since blogBody doesn't, it is treated as an unknown HTML element and just inserted into the DOM.

Cannot render component inside component

I have really basic Vue app (on Rails):
hello_vue.js:
import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)
import CollectionSet from '../collection_set.vue'
document.addEventListener('turbolinks:load', () => {
const app = new Vue({
el: '#app',
components: { CollectionSet }
})
})
collection_set.vue:
<script>
import Collectable from './collectable.vue'
export default {
components: { Collectable }
}
</script>
<template>
<p>test</p>
<collectable />
</template>
collectable.vue:
<script>
export default {
name: 'collectable'
}
</script>
<template>
<p>test 2</p>
</template>
my webpage:
<div id="app"><collection-set /></div>
With above example I don't see anything, but when I remove <collectable /> from collection_set.vue, I see test. I don't have any errors.
Why collectable is not being rendered?
Change the template code of collection_set.vue to
<template>
<div>
<p>test</p>
<collectable />
</div>
</template>
the reason for error is that Component template should contain exactly one root element
Here we were trying to craete two root elements p and collectable
Now that I wrapped it within a parent div container, it works just fine.
Please try and let me know if it helps.
One suggestion is that always check into console of browser devtools to check what could be the issue. In this case, the console gave the exact error, also the code compilation failed with same error.
In Vue, each component must have only ONE root element, meaning you need to have a tag like <p> or <div> and inside it all your template.

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed
You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));

Module breaks when using a react component within a nested component

I am trying to render a simple nested React component called Navbar but when I use another component (or a Link tag in this case) within it, the console gives me 'Uncaught Error: Cannot find module "../Navbar"'. If I remove the Link tag, the h1 tag is shown and there are no errors. I can use the Link tag in the App component so I know it should work in the project.
My App.js code looks like this:
import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';
export default React.createClass({
render: function() {
return (
<div className='App'>
<Link to="about">About</Link>
<Navbar />
<RouteHandler />
</div>
);
}
});
My Navbar.js code looks like this:
import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';
export default React.createClass({
mixins: [PureRenderMixin],
render: function () {
return (
<h1>Navbar</h1>
<Link to="about">About</Link>
);
}
});
I'm using React-Router, Webpack, and Browser-Sync but besides nested components, routing, building, and syncing seem to be working fine.
Your render method in Navbar is trying to return two values at once, the <h1> and the <Link>. This is a syntax error. You need to wrap them in a single element, e.g. a <div>.
See also http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html

Categories