https://github.com/noriller/react-reusability-poc
React: learn once, write the logic once, render it in React Web and React Native!
https://github.com/noriller/react-reusability-poc
javascript poc react react-hooks react-native reactjs
Last synced: 3 months ago
JSON representation
React: learn once, write the logic once, render it in React Web and React Native!
- Host: GitHub
- URL: https://github.com/noriller/react-reusability-poc
- Owner: Noriller
- Created: 2022-10-16T17:00:26.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-10-16T18:54:55.000Z (almost 4 years ago)
- Last Synced: 2025-04-08T00:45:42.566Z (over 1 year ago)
- Topics: javascript, poc, react, react-hooks, react-native, reactjs
- Language: JavaScript
- Homepage:
- Size: 316 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Reusability POC
This is a proof of concept of how you can write React code once and render it in both Web and Native apps.
## How to use
```bash
yarn install
yarn --global add expo-cli
yarn start # for react native
# yarn tunnel # if the normal way don't work or your phone is in another network
yarn dev # for react web
```
## The humble object
Usually used for testing, you split the logic from the GUI and make the GUI humble.
This separations makes it easier to test the logic since you don't need to worry about the GUI and how to call the functions through it.
This also makes it easier to render the same logic in different components, even if those components will be rendered by different engines.
## The POC
With that in mind, I used a basic `create-expo-app` and a `create-react-app` and "merged" them.
I made a `Counter` component split into the "logic", and then the "web" and "native" components.
Since React for web and for native has different needs and components to be able to render, each has it's own implementation. But the logic behind them is exactly the same and could be reused without problems.
For this example I wanted to have all components and logic next to each other, and while I do think that having everything next to each other improves the experience for writing everything, I know that it would take a lot of configuring stuff (transpiler, test, lint, etc).
Then again I used the most basic options just because I wanted to see if with minimal configuration I would be able to do this.
### Making this better
For React Native, we pretty much "only" have `expo` as an alternative. For the Web part however... `cra`, `vite`, `next`, `remix`, `redwood`...
The idea I believe would be most stable and meta-framework agnostic to work and to deploy would be to make this into a `monorepo`.
We could neatly split the dependencies and config and then split the logic hooks from the web/native parts.