I'm creating a react project from a webstorm, I just don't know how to open it in a browser. Could anyone have given directions on how to open the project in the browser?
If you open your terminal in the program and run npm start.
Alternatively, you can configure it to run when you press the play button in the toolbar. You can read how to do that here.
Related
I am trying to learn React and I just downloaded a file for a project i'm working on with a friend. I cannot figure out how to run the terminal properly to show the react application on the local server.
What are the proper command lines to do so?
In root of project folder. first "npm i" - install all node-modules. npm start - start project.
I can't select any text or click on input fields in my React app. I have tried to search similar issue on the internet but can't find any. If anyone has encountered or is familiar with this issue, please advise. I have already tried disabling CSS, disabling packages and transferred it to new react app. Nothing helped.
Video Link: https://vimeo.com/614409488
I have run this command inside the project directory and working fine.
for android
npx react-native run-android
for iOS
npx react-native run-ios
I made an electron app with react, but I don't know how to make its MSI file for windows.
actually, I know what the problem is, it is because Reac app needs to run on localhost:3000 and after that electron can launch it through mainWindow.loadURL, but the MSI file doesn't work like this, and it doesn't launch it, please help me how to solve this problem
note: in development, it works fine because I first run the react app and then the electron app which causes it can load URL from localhost:3000 but when I make its MSI file through the electron packager then it doesn't work
You want to use electron-builder to make an .msi file. The necessary command to build a windows app (once you've gotten your electron app set up) is electron-builder --windows.
If you want to use a template with all of this already set up, you can use secure-electron-template. Disclaimer: I am the author of this template.
I am using visual studio code IDE to develop react native app and am not using expo library.
Before that I was working on the android studio, debugging in that is straightforward and simple.
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?
If you want to debug the app in VS Code itself, like in other IDEs. Then on approach can be to follow the following steps:
Install React Native Tools Extension (provided by Microsoft) to VS Code.
This is a nice add on to VS Code's capabilities for React Native.
Then go to Debug option from left menu and click on Add Configuration.
If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.
Now if already have Launch configuration added, then you can click on Add Configuration button then you will see more options related to React Native.
You can add configurations for React Native: Attach to Packager, React Native: Debug to Android, React Native: Debug to iOS in your launch.json file. It is present in .vscode folder.
Then add your breakpoints in code. Now suppose you already have your app running on emulator then you can choose option Attach to Packager.
Then on emulator or device open developer options (Ctrl + M for Windows + Android) and click on Debug JS Remotely.
Now your breakpoints should be working. Similarly if your app wasn't working already then you can go for Debug Android or Debug iOS accordingly.
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option.
Step3: In your Browser type Url http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.
Okay So I'm extremely confused on how this all works...
I want to run my app on my device and not through Expo.
So I'm reading the Facebook documentation and told me to open up my ios directory and open up the xcode file. While I proceeded to look inside my directory of course I don't find my ios folder...lol (Don't understand why they don't tell us the step to actual create the folder..)
So I'm google and googling and find that I needed to eject. But in that documentation it told me it was permanent... Doesn't sound safe at all.... So I did it anyway and it created my ios folder.
I opened it up on xCode and deploy it to my phone.. Why is that the app looks completely different from the one it ran on expo locally...
If you look at the picture below, they're two different app..lol. Like come on what sort of trickery do I need to go through just to have my app run on my device without going through expo.
Why is it showing 2 different apps?
Future wise, Should I only eject when the app is completely done? Since I can't run it on expo anymore.. hence the permanent changes.. How would I test native device features? This honestly makes no sense.
How to start working on react-native ios without expo.
brew install node
npm install -g react-native-cli
react-native init AwesomeProject
open ios/AwsomeProject.xcodeproj in xcode
You can also install cocoa pod and use AwsomeProject.xcworkspace.
In account add ur ID Apple Id and download certificate manually
In general menu add your apple id and press run
For next time open terminal
cd project
react-native run-ios --device "iPhone"
Note: Write your device instead of iPhone. Hope I made things clear for beginners please feel free to correct me if i am wrong.