basic explain for what does npm start do with my reactjs code and how to run it from browser
Question
i sorry about this basic question - but i trying to understand it.
I start to learn reactjs ( https://reactjs.org/tutorial/tutorial.html ) and i create new project of reactjs (using npm .. create-react-app ... ).
I delete all the files in src ( that what was in the tutorial ) and create two files
- index.js
- index.scc
In the file index.js i add code :
import React from 'react';
import './index.css';
class ShoppingList extends React.Component{
render(){
return(
<div className="shopping-list">
<h1>Shopping List for{this.props.name}</h1>
<ul>
<li>App1</li>
<li>App2</li>
<li>App3</li>
</ul>
</div>
);
}
Now, when i run "npm start" from folder "src" i don't see nothing. I also can't understand how to run it only from browser
1 answers
solution1
3 ACCPTED 2018-03-04 08:03:09
You need to render the ShoppingList component in the dom, to see its result. Make use of ReactDOM.render() method to do that
class ShoppingList extends React.Component{
render(){
return(
<div className="shopping-list">
<h1>Shopping List for{this.props.name}</h1>
<ul>
<li>App1</li>
<li>App2</li>
<li>App3</li>
</ul>
</div>
);
}
ReactDOM.render(<ShoppingList name={"Shop"}/>, document.getElementById('root')); // here root is the DOM element in `index.html`
index.html
<body>
<div id="root"/>
<script src="path/to/bundle.js"></script> // this is the bundled file generated using webpack
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.