3

I have created my first react-js app, just saying 'Hello world'. After I change the 'Hello world' to another text, nothing changes when I refresh the browser, even if I empty the cache. The changes take place only when I close the local server and reopen it with npm start. Could anyone help me?

Michael Cheng
  • 9,644
  • 6
  • 46
  • 48
Ahmed Hussein
  • 715
  • 1
  • 15
  • 38
  • Can you post your code so we can see whats going on? include your html and your component that has 'hello world'/changed text. – iceveda06 Apr 11 '18 at 15:07

2 Answers2

2

If you want to create new react app from-scratch. You can use :

> npx create-react-app my-app
> cd my-app
> npm start

After that, you will have the initial configured react project structure :

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

See react app seed in Github : https://github.com/facebook/create-react-app.

LaPoule
  • 324
  • 1
  • 11
  • Would it be different if I follow this tutorial: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm ? Would this be the reason that I cannot refresh the browser ? – Ahmed Hussein Apr 11 '18 at 15:16
  • Yes, with `npx` you don't need to a configure the webpack. You have a registerServiceWorker.js instead and your app is run with "start": "react-scripts start". In your tuto, it's start your app with "start": "webpack-dev-server --hot" in package.json – LaPoule Apr 11 '18 at 17:16
  • See https://stackoverflow.com/questions/46337918/difference-between-webpack-babel-and-react-scripts – LaPoule Apr 11 '18 at 17:19
0

Sam's answer is probably the best way to do it but if you want do refresh it without adding all the bells and whistles of create-react-app you can go for browsersync.

https://browsersync.io/

It watches over your CSS, HTML, JS. I usually use create-react-app but in some cases browsersync does the trick as well.

iceveda06
  • 601
  • 8
  • 21