admin管理员组文章数量:1336597
I have installed fresh react js on local as:
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Wele to React</h2>
</div>
<div id="root"></div>
<div id="test"></div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
ReactDOM.render(
<h1>Hello, world Root!</h1>,
document.getElementById('root')
);
ReactDOM.render(
<h1>Hello, world Test!</h1>,
document.getElementById('test')
);
export default App;
index.html:
<body>
<div id="root"></div>
<div id="test"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
The issue is that i am able to print only Hello, world Test! and not Hello, world Root! although I am not getting any error too means it is a DOM element than way i am not getting any thing. I inspected it also and their also it is not rendering.
Also one more thing I added div with id 'test' in index.html so it a fine approach to add div in that.
I am new to React any help please.
I have installed fresh react js on local as:
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Wele to React</h2>
</div>
<div id="root"></div>
<div id="test"></div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
ReactDOM.render(
<h1>Hello, world Root!</h1>,
document.getElementById('root')
);
ReactDOM.render(
<h1>Hello, world Test!</h1>,
document.getElementById('test')
);
export default App;
index.html:
<body>
<div id="root"></div>
<div id="test"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
The issue is that i am able to print only Hello, world Test! and not Hello, world Root! although I am not getting any error too means it is a DOM element than way i am not getting any thing. I inspected it also and their also it is not rendering.
Also one more thing I added div with id 'test' in index.html so it a fine approach to add div in that.
I am new to React any help please.
- 1 I have no idea why u got 2 ~3 render function in a single class. – PSo Commented Feb 3, 2017 at 7:14
- 1 I think you should look up a React tutorial first instead. – A. L Commented Feb 3, 2017 at 7:15
- 1 ohk thanks although i was going through: facebook.github.io/react/docs/hello-world.html, actually if i am adding only one ReactDOM.render function with id root that also its not printing. I posted it with both to clarify what issue i am getting. In my app every time i am rendering on root nothing happerns. Meanwhile i am going through tuts but unable to figure out what is this issue – Narendra Vyas Commented Feb 3, 2017 at 7:22
- Clearly you need to go and read the documentation, even if they answer your question you need to understand what's going on. Check this facebook.github.io/react/docs/hello-world.html – damianfabian Commented Feb 3, 2017 at 7:23
1 Answer
Reset to default 4Answer to your question:
The render is already stand for ReactDOM.render, is the same thing, so in the tutorial, it is like
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
which is the same as
render() {
return (
<h1>Hello, world!</h1>
)
}
React little tutorial: Is a plain HTML without state and props, i guess you are doing simply like this.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Wele to React</h2>
</div>
<div id="root">
<h1>Hello, world Root!</h1>
</div>
<div id="test">
<h1>Hello, world Test!</h1>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
To use state/props, you can do something like:
state:
constructor() {
super();
this.state = {
text: "Hello, world Root!"
};
}
replace the text with:
<div id="test">
<h1>{this.state.text}</h1>
</div>
And similarly, if you have props = "Hello, world Root!", you can:
props:
<div id="root">
<h1>{this.props.root}</h1>
</div>
本文标签： javascriptRender DOM element in REACT jsStack Overflow
版权声明：本文标题：javascript - Render DOM element in REACT js - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742410476a2469685.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论