From React in web to react in mobile
Tags: webdev, javascript, beginners, react
Published: 2023-01-23 14:07:28

Transitioning from one domain to another is often overwhelming and confusing, whether you are looking for a job switch or want to get your hands dirty with certain technologies or like me, wants to explore.

In this blog, I'll briefly share how I got started with my first mobile app project. The problems I faced and the fixes.

In the beginning, I personally started with the simplest things like HTML, CSS and JS . With time I wanted to get started with MERN stack so, as suggested by most experienced people I learnt React and it didn't stop there. It took me couple months to be able to make a project with both client in React and server in Node , MongoDB as the database.

After making some projects, contributing to open source repositories, events like Hacktoberfest, participating in Hackathons, I thought of doing something different. Native mobile apps were out of option as I don't use macOS and Android Studio is ought to destroy my laptop for real ! Sorry , jk.

There were 2 options for me to get started with cross-platform app development.  They were flutter and react native. For flutter, dart language is used. I, being familiar with React chose react native. 

So, I found out from youtube and the official docs that react native is nothing different than react itself. We use react in web with the help of react-dom. In case of react native, we don't use the typical dom element tags like div, p, section, a, etc but we use pre-defined elements which are then converted to native elements for android and ios respectively. This is what happens over the hood.

To create a project, I used the explo-cli. It was suggested to use expo cli because it helps in a lot of ways : 
- Not much manual configurations required to get started, which helps a beginner to actually get their hands dirty instead of fixing configuration bugs.
- Super fast. Expo makes the react project running in couple of minutes. This saves a lot of time for a beginner, who can focus on things which are more important.
- Now, the fun part. The app can be developed without android studio, xcode on your smartphone only. Expo go app is required to remotely develop the app.

**How did I use Expo go ?**
So, once I had created the project using `npx create-react-native-app app-name `

> Note that, I couldn't use expo init, the cli asked the users to migrate to `npx create-react-native-app` instead.

Then, I moved inside the project dir by using `cd my-app`. I used the `expo start` command to start the metro builder. The UI for metro server is no longer shown so everything is to be done from the cli. I had installed the Expo go app and scanned the QR code shown in the terminal.

> Note that, ios users need to scan the QR with their camera app.

That was it, my project was running on my smartphone !! Whenever I changed the contents in my VSCode, it was instantly reflected to screen on my smartphone.

> There are few things to remember while using the expo go app
> The remote device (smartphone) needs to be connected to the same WLAN network with the local setup (computer).
> If there is an error, like java socket timeout, using the command `expo start --tunnel` would fix it. This might be slower option but it works. This command requires a dependency `@expo/ngrok`.

I haven't gone through the debugging part yet, so I cannot tell. Apparently errors in code are reflected on the mobile screen, so one can fix it most of the time.

---

So, this was my experience. It might have been too long but I tried to keep it simple and to the point. Hope this could help my fellow developers to get started with their react-native journey.

If you find any problem or want to add something, comment down below so we work on it.

You can connect with me on :
[LinkedIn](https://www.linkedin.com/in/sumanroy369)
[Github](https://github.com/Suman373)
[Twitter](https://twitter.com/sumanroy369)