SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( Components ) – PART 2
Tags: webdev, android, ios, react
Published: 2022-01-12 20:25:12

---
title: SINGLE APP FOR WEB, IOS, AND ANDROID USING REACT-NATIVE ( Components ) – PART 2
published: true
date: 2022-01-10 13:00:00 UTC
tags: WebDevelopment,Android,iOS,react
canonical_url: https://fibocolon.com/web-development/single-app-for-web-mobile-part-2/?utm_source=rss&utm_medium=rss&utm_campaign=single-app-for-web-mobile-part-2
---
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uav9djvtzvwpsg9dhgaw.png)

This is the second part of the article. In the [previous part](https://dev.to/anazari96/single-app-for-web-ios-and-android-using-react-native-new-approach-part-1-18dg), we have examined how to configure a project and run it on all environments (iOS, Android, and Web). In this part, we want to explain how to create different containers and components to develop the logic and UI part of our project on various platforms.

Creating a single application for every environment (Web, iOS, and Android) with one codebase.

## Concept

As we know, Web projects are working with DOM, and native projects have their native components. So we need to separate the UI parts of the different platforms to solve the issue.

For this purpose, we should keep the logic codes apart from the UI and put them in the different components called containers. For separating the UI parts at platforms, we can use the following two extensions: `.native.tsx` , `.web.tsx`

At the rest of the article, I explained the listed majors:

1. How to create a mock server for getting data
2. How to create container for the logic 
3. How to create components for the UI of the application

## Prerequisite

For calling AJAX request `axios` the library is needed, so let’s execute the following command at the terminal:

```
$ npm install axios
```

## Mock Server

There are many libraries and tools to make a mock server for your project; I chose the mocks-server to create the mock server. For installing this lib execute the following command in the terminal of the project:

```
$ npm i @mocks-server/main --save-dev
```

Then add the following code to the _scripts_ part of your `package.json` file:

```
"mocks": "mocks-server"
```

After putting the above code, you can execute the mocks from your terminal with this command:

```
$ npm run mocks
```

After running the command, you’ll see that some files and directories will be created on the project. The mocks-server will generate a sample API for getting users inside the _/mocks/routes/users.js_ route.

## Container

This is a place for putting the logical codes there. Everythings that are the same between different platforms and related to the data should be in containers.

The containers can be named like XConatiner.jsx, and the “X” will be the name of the related feature or component.

For now, we need `UsersContainer.jsx` to get the user’s data and pass it to the corresponding component.   
_There are many ways to structure the React and React-Native projects, and this article doesn’t focus on them._

First of all, we need a folder inside the src directory called Users. So let’s execute the following command at the terminal:

```
$ cd ./src && mkdir Users && cd ./Users
```

Then run the below command to create the mentioned file:

```
$ touch UsersContainer.jsx
```

As mentioned, we need to retrieve the users and pass them to the related UI component in this container, so let’s put the below code inside the `UsersContainer.jsx`:

```
import React, {useState, useEffect} from 'react';
import axios from 'axios';
import UsersComponent from './UsersComponent';

export const UsersContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get('http://localhost:3100/api/users')
      .then(response => {
        setUsers(response.data);
      })
      .catch(err => {
        console.log('error', err);
      });
  }, []);

  return users.length > 0 ? <UsersComponent users={users} /> : null;
};
```

## Components

Here we have the distinction for the different platforms for the UI part. All the visual things and other specific libraries for one platform should be in these components.

We need two components for web and mobile, `UsersComponent.web.jsx` and `UsersComponent.native.jsx`. Create these files inside the `Users` directory with the following command:

```
$ cd ./src/Users && touch UsersComponent.web.jsx UsersComponent.native.jsx
```

These components should get users from their parent container and render it. Let’s put the following code for each file:

```
import React from 'react';

const UsersComponent = ({users}) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UsersComponent;

import React from 'react';
import {View, Text} from 'react-native';

const UsersComponent = ({users}) => {
  return (
    <View>
      {users.map(user => (
        <Text key={user.id}>{user.name}</Text>
      ))}
    </View>
  );
};

export default UsersComponent;
```

According to the container, you noticed that you didn’t mention importing the component .native or .web. Yes! This is the power of the Webpack and Metro, they can understand which one should be compiled, and you don’t need to worry!