I'm following the w3schools tutorial on react.
So the first thing I'm told to do is to create the create-react-app : npm install -g create-react-app
Then create a React application named myfirstreact : npx create-react-app myfirstreact
The app get created and every thing seems good at this point.
Now I'm asked to Run the React Application by doing the following: cd myfirstreact and npm start, and this is what the Terminal display
myfirstreact#0.1.0 start /root/myfirstreact
react-scripts start
Compiled successfully!
You can now view myfirstreact in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.43.128:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
No new window gets opened in Firefox, nothing happens.
So I open the link http://localhost:3000 on Firefox and all I got is "EOF", I check the page source and the only thing there is is : EOF (which is the same thing I get If I access http://localhost:3000 on Firefox without starting react )
And what I want is to get the default react app.
Edit: I just downloaded Opera browser and when tried, The app works just fine. So the problem seems to be a Firefox problem.
Here you can see all the screenshots.
Terminal 1
Terminal 2
Terminal 3
Browser "EOF"
I closed Firefox, Started the app all over again npm start. And for some reason the app is working now
Related
i have a this little issue.
I have a new laptop, and I decided to do react project.
I installed the Node's stable version, installed the the npm create-react-app globally, and created a new project using this command npx create-react-app tip-calculator.
Everything was set up for me, only deleted a few files on the src folder, and kept the essentials (index.js, app.js and index.css).
My issues, is on my previous laptop, when doing projects, the webpack (is what i think it is) didn't show up in the console, and on the new laptop, it shows, and I would like it removed.
This is a freshly baked react project, so I didn't touch it's code, aside from the files I deleted.
It's not an issue, it's expected behavior by react-scripts because these logs are hardcoded in react-scripts and currently, there are no options for disabling them. You have probably had an older version of create-react-app in your previous laptop which might have not logged this information on the console.
What is really happening is that you are running react-scripts with npm start and react-scripts are logging webpack logs.
There is also this question which is similar to yours about running react-scripts silently.
If you really don't want to see the output you can redirect it to null:
Linux & Mac: npm start > /dev/null
Windows CMD: npm start > null
Windows Powershell: npm start > $null
I created a new project with react-native init .
I am using react-native with the following:"react": "16.13.1","react-native": "0.63.2".
When i am trying to run the app with react-native run-android command it shows build successful in the terminal but nothing appears in my metro bundler(I am attaching the image of it) and my emulator shows the 'Unable to load script' issue.
Unable to load script
If I press 'R' to reload the app in node(bundler) it says there is no device attached to it but my emulator is running. I encountered the same problem with personal device also.
metro bundler not running
I also tried by creating the assets folder in android/app/src/main/assets and run the below command:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res.
With this only once the app gets displayed on the emulator and when I make changes in the App.js file and save it there is no change in the emulator.
If I reload the error "Could not connect to the development server" pops up.
could not connect to development server
Even tried the adb reverse and changing 'dev' options to local host and port 8081, but it was not useful. (If there is any specific path where I should try the above steps please mention).
What is that I have done wrong?
Can anyone help please.
P.S.: I am using a windows 10 machine.
Thank you.
"react-native": "0.64.1",
I used other solution but I've resolved this issue in other way.
I resolved it by changing bundleInDebug: true, in project.ext.react in android > app > build.gradle.
project.ext.react = [
bundleInDebug: true,
enableHermes: ***,
]
I am also facing this issue and I try the below method to fix the issue.
for start the npm server use npx react-native start
in another tab npx react-native run-android for run the application.
Many devs have different environment setup and this complicates the solution.
I'm working on Windows with WSL2. Initially, I followed this react-native setup guide with no problems but later encountered this error, not sure why.
After many hours of searching and trying most of the answers from this duplicate question, among others, I had no luck.
Eventually, all I had to do from WSL2 was pass the host option to react-native start in order to connect to the adb server running on Windows.
yarn start --host 127.0.0.1
# or npx react-native start --host 127.0.0.1
I got this issue, I solved with close the app form emulator or if you use android or iphone device you can uninstall the app.
start again npm server use npx react-native start
reinstall app use npx react-native run-android
Whenever I click 'run in iOS simulator' after running expo start in terminal, I'm getting stuck at a screen with "Downloading Javascript bundle 100.00%" in the app.
I'm creating a React native application and I tried all solutions including:
deleting Expo app
restarting simulator
erasing settings on simulator
rechecking code for bugs
Debug remote JS / stop remote debugging
See example of loading screen:
https://i.stack.imgur.com/RzEdZ.png
Delete your package-lock.json file, node_modules directory and then,
run npm cache clean -f.
Then run a new npm install as a regular user.
Finally, run an npm start again
try clearing the cache with expo start -c
I've got a problem with localhost when running yarn start. It seems that everything is okay, but my web page is blank when it opens. Should be at least the React logo. I am using windows 10.
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000/
On Your Network: http://...............:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
Create-react-app ServiceWorker does not work in Chrome. White page with source code is shown when refreshing the browser. See screenshot below. This problem does not exist in Safari and Firefox.
Steps to reproduce:
create-react-app foo
cd foo
npm install
change serviceWorker.unregister() to serviceWorker.register() in index.js
npm run build
serve -s build
open http://localhost:5000 (or whatever port number is shown) in Chrome.
refresh browser after you see spinning react logo
now white page with source code is shown instead (see screenshot below)
Do you get the same or is it just my Chrome? Any idea what causes this problem?