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

Question

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:

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?

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" } }

Answer 1

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

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

Question

1 answers

solution1
1 2018-08-28 16:53:48

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

Question

1 answers

solution1 1 2018-08-28 16:53:48

solution1
1 2018-08-28 16:53:48