CODEWITHSUNDEEP
javascriptreactjs
Yanshof
Yanshof

Reputation: 9926

basic explain for what does npm start do with my reactjs code and how to run it from browser

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

  1. index.js
  2. 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

Upvotes: 2

Views: 65

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281764

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>

Upvotes: 3

Related Questions