基本解釋了npm開始與我的reactjs代碼有關以及如何從瀏覽器運行它

Question

我對這個基本問題感到抱歉-但我試圖理解它。

我開始學習reactjs（ https://reactjs.org/tutorial/tutorial.html ），並創建了reactjs的新項目（使用npm .. create-react-app ...）。

我刪除src中的所有文件（即本教程中的內容）並創建兩個文件

index.js
index.scc

在文件index.js中，我添加代碼：

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>
        );
    }

現在，當我從文件夾“ src”運行“ npm start”時，我什么也看不到。 我也無法理解如何僅從瀏覽器運行它

Answer 1

您需要在dom中渲染ShoppingList組件，以查看其結果。 利用ReactDOM.render()方法做到這一點

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>

基本解釋了npm開始與我的reactjs代碼有關以及如何從瀏覽器運行它

問題描述

1 個解決方案

解決方案1
3 已采納 2018-03-04 08:03:09

基本解釋了npm開始與我的reactjs代碼有關以及如何從瀏覽器運行它

問題描述

1 個解決方案

解決方案1 3 已采納 2018-03-04 08:03:09

解決方案1
3 已采納 2018-03-04 08:03:09