React — Share code between web and apps
Ever wanted to build a web and native application using minimal resources and didn’t know where to start with? Ever wondered which framework to start with to build your web and native application? Ever wondered how many git repos are required to maintain all these work ? Boom! Turns out there is a clear solution to your problems
Facebook has already solved a few of the above-mentioned problems with React and React-Native.You can go ahead and learn JSX and build your web and native applications. But the problem here is you have to write code multiple times, once for your web application and once for your native application at the least
Not anymore, With the framework, I’m going to introduce you can write your code once and you can run it both on web and native apps. This article introduces you to the strategy of building this application .We are going to implement this using the RenderProps mechanism .We are also going to compare the build sizes when these are built as a different applications to my approach where all the code is put in one repository
pre-requisites: Basic understanding of React
Let’s get started with the strategy of building the above-mentioned application.The demo application with this approach can be found below. You can get started with your application by cloning this repo
This repo contains three main folders Web, App, Common.
Web folder contains presentational components for web application written in React and App contains presentational components for native applications written in React Native. Common folder contains all the shared code between app and web.The goal is to make most of the code to sit in the common folder and just the bare minimum dumb presentational components to sit in Web and App folders.The common folder can contain all of your network requests, Data transformers and the redux store( if you want to use one).In the demo application I have provided , the network request is made from the common folder and the data is transformed and then sent to the presentational components of both Web and App folders.
Render Props is used to render the components here. Let me give a brief introduction to render props
As the React documentation states
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.
A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)}/>In the starter kit git repo https://github.com/Narik44/Web-Mobile.git , I have provided an example of using render props to render the data from a network request
This is a react presentational component which just renders the information provided by GetJson (This is where the service calls are made and data is transformed)
This is a react native presentational component which just renders the information provided by GetJson (This is where the service calls are made and data is transformed)
This is the component where the data is fetched and passed to both react and react native presentational components
With this set up you must be able to run both your web and mobile applications from the same code base. The bundles sizes of both mobile and web application when built individually and when built using this approach didn’t change much because the independent dependencies are placed in the package.json of that particular application and the common dependencies are resolved by placing an extra node modules resolver in the config file as shown below
config = {
extraNodeModules: {
“react-native”: path.resolve(__dirname, “node_modules/react-native”),
react: path.resolve(__dirname, “node_modules/react”),
axios: path.resolve(__dirname, “node_modules/axios”)
}
};There is a lot of ongoing work going in this repo right now regarding how to use the dependencies effectively, how to incorporate shiny new React Hooks and many other things. Any contributions to this repo are welcome. There will be a follow-up article to this post which talks about using react hooks. Until then keep coding and motivate me to keep writing by providing some claps!
