CODEWITHSUNDEEP
javascriptnode.jsreactjs
Alan Judi
Alan Judi

Reputation: 1092

Can't see changes to react application When I update the code and rebuild the solution

I use this tutorial to create a Node.js and React app in Visual Studio. I successfully followed everything in the tutorial and I hit Ctrl + F5, I get the Welcome to React message.

The problem arises when I add further code to app.tsx. I wrote two more components and rendered them, but when I build the solution and run the application, nothing changes from the initial "Welcome to React!!" message. Here the additional code that I added to app.tsx:

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to Reactive!!</h1>
        );
    }
}

class Paragraph extends React.Component {
    render() {
        return (
            <p1>We the best music!! </p1>
        );
    }
}

class ShoppingList extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));
ReactDOM.render(<Paragraph />, document.getElementById('main'));
ReactDOM.render(<ShoppingList />, document.getElementById('list'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Here the code I have in my index.html file:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="root"></div>
    <div id="main"></div>
    <div id="list"></div>
    <!-- scripts -->
    <script src="./dist/app-bundle.js"></script>
</body>
</html>

I should note that no matter what code I add to either index.html or app.tsx, the same Welcome to React message shows up when I build the solution. Here is the picture of the message:

Welcome to React

I should further note that everytime I build (Ctrl + F5), I get a message saying that the project is out of date, do I want to rebuild it?

Project out of date

Here is my webpack-config:

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
};

Here is my package.json: 

{
  "name": "dcwims-menu",
  "version": "0.0.0",
  "description": "DCWIMS MENU",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "dependencies": {
    "express": "4.16.2",
    "path": "0.12.7",
    "react": "16.4.0",
    "react-dom": "16.4.0",
    "ts-loader": "4.0.1",
    "typescript": "2.7.2",
    "webpack": "4.1.1",
    "webpack-cli": "2.0.11"
  }
}

Upvotes: 1

Views: 5007

Answers (1)

Vladislav Sorokin
Vladislav Sorokin

Reputation: 415

Well, usually with React you leave your index.html with just one 

<div id="root"></div>

And put an App component in it

ReactDOM.render(<App />, document.getElementById('root'));

Then in App Component you import all other components:

import { Loading } from '../components/loading.js'
import { GridView } from '../components/news/GridView'
import { TextView } from '../components/news/TextView'
import { FilterTag } from '../components/shared/FilterTag'

class App extends React.Component {
    render() {
        return (
            <div>
            <Loading />
            <GridView />
            <TextView />
            <FilterTag />
            </div>
        );
    }
}

Upvotes: 1

Related Questions