More

    React In Android – Create React App In Android

    - Advertisement -

    React is a javascript library that is used for building UI components. One can simply set up react js working environment on desktop but when it comes to setting up react js environment on an android phone it can be tricky. So in this article, I’ll tell you guys how you can set up react in android with the help of the termux application and start creating react apps from your android phone.

    react in android

    To set up React development server on your phone follow the steps given below to install react in android.




    Required Applications For React In Android

    As I told you guys earlier we’ll be using the Termux application to run react on android, so make sure you have installed termux in your phone. If it is not installed on your phone click the button below to download it and then install it.




    What is Termux ?

    A termux is an android terminal emulator that you can use to run so many Linux packages on an android phone without root. You can download termux by clicking here. To know more about the termux application click here.




    Another recommended application that you can use is Acode editor to write code for your react application conveniently or you can use nano text editor, but nano text editor is not that convenient for writing code.

    - Advertisement -

    Click Here To Download Acode Editor




    Installing React In Termux

    Now that you’ve installed the termux application. Open your termux application and follow the commands given below to set up react in android.

    • Update the list of packages.
    apt update
    • Upgrade upgradeable packages.
    apt upgrade -y
    • Install nodejs.
    apt install nodejs -y
    • Install create-react-app.
    npm -i create-react-app -g




    • After the execution of above command is completed now, you can create your own react app using npx ceate-react-app and then app name. For example I’ll create a app named ‘amanbytes‘.
    npx create-react-app amanbytes
    Note : If you get error while creating a react app then execute npm install -g [email protected] command in your terminal and after the execution of that command is completed then you can create react app using the above command without any errors.
    - Advertisement -




    Starting React Development Server

    You can run the development server of react application by typing the command npm start in your react app directory. For example, I have an app called amanbytes so I’ll get inside that directory using cd amanbytes command, and then I have to type npm start to run the development server.

    In most cases, the server is hosted on localhost:3000 but sometimes it can vary. Anyway, after the react development server is started it will ask you which browser to use to visit the development server and from there you can see the address of your development server.

    react on android - development server




    Using Acode Editor To Write React Code

    In termux, one can use text editors like nano text editor to write code. Writing a few lines of code using these types of text editors is fine but, when one has to write so many lines of code it can be a pain in the ass to write code using text editors like nano text editor. So I’ll recommend you to use Acode editor, which you can use to write code for your react in android.




    Follow the steps given below to setup your react application with Acode editor:

    • Open Acode editor.
    • Swipe from left to right and then click on open folder.

      acode in android for react

    • Click on the top plus (+) buton and select Add Path option.

      acode in android for react

    • Now name your path anything you want like amanbytes react app and then click on select path.

      acode in android for react

    • File manager will open, swipe from left to right and click on Termux.
      - Advertisement -

      acode in android for react

    • Click on your react app folder and then click on Use This Folder button.

      acode in android for react

    • Allow Acode to access files.

      acode in android for react

    • Now you’ll be back to Acode app, here click on OK.

      acode in android for react

    • You’ll see your folder now, click on it and then click on select folder.

      acode in android for react

    • Now you can directly edit all the files of your react app directly from Acode editor. All you have to do is to swipe from left to right and then click on your react folder and then you can edit code of your react on android.

      acode in android for react




    Conclusion

    So this is how you can set up react in android, if you get stuck somewhere watch the video given below in which I’ve demonstrated all the steps.

    - Advertisement -

    Recent Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here