Project Setup for desiloed development with react-native (iOS, Android, Web)

create-react-app is a zero configuration bootstrapping framework that is super easy to get you started on react web development.

React Native is an amazing framework that makes iOS and Android development apps a breeze. You can use the same code to develop for 2 platforms.

What if you could also share the code for web. Thanks to an amazing project called react-native-web that brings all the react-native components API to the web.

Combining all these, here are simple steps in how you can setup your react-native project for web development using create-react-app

  1. Create a new react-native project using the react-native-cli
react-native init HelloRNWebiOSAndroid

2. Add these modules to your project

yarn add react-dom react-native-web react-scripts

[Update1: You will need to install react-art as well if you encountered

./node_modules/react-native-web/dist/exports/ART/index.js
Module not found: Can't resolve 'react-art' in

Install react-art

yarn add react-art

]

3. Copy these commands to the scripts section in the package.json

"start-web": "react-scripts start",
"build-web": "react-scripts build",
"test-web": "react-scripts test --env=jsdom",
"eject-web": "react-scripts eject"

4. Copy the public directory from a project created by create-react-app into the root directory of your react-native project

5. Create a src directory in your project root directory and move the App.js file inside it.

6. Modify your react-native’s index.js accordingly in the root directory as shown

import { AppRegistry } from "react-native";
import App from "./src/App";
AppRegistry.registerComponent("HelloRNWebiOSAndroid", () => App);

7. Create an index.js file inside the src directory with the following content

import { AppRegistry } from "react-native";
import App from "./App";
AppRegistry.registerComponent("HelloRNWebiOSAndroid", () => App);
AppRegistry.runApplication("HelloRNWebiOSAndroid", {
rootTag: document.getElementById("root")
});

8. yarn start-web and go to http://localhost:3000

That’s it. You can find working sample project with these steps at https://github.com/agenthunt/rn-dev-ios-android-web/tree/master/HelloRNWebiOSAndroid

--

--

--

Solving Problems. Making Software Better. Intrigued by Elegant Solutions. https://twitter.com/agent_hunt

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shailesh

Shailesh

Solving Problems. Making Software Better. Intrigued by Elegant Solutions. https://twitter.com/agent_hunt

More from Medium

The 7 Reasons Why We Recommend React.js For Developing Mobile App

How To Customize The Experience For Joining Live Video Chat Apps

How to learn React Native and Firebase in a month.