How to Get Started with React Native for Web?

Overview

Hello Amigos, here we have a smash topic to learn. React Native for Web is a congruity layer between React DOM and React Native. It can be used in new as well as existing applications. React native for web uses React DOM to accurately render React Native compatible JavaScript code in the web browser.

Topics-

1. Modern React
2. Modern Web
3. Components
4. Add React Native Web in to projects

Modern React : — React Native for web is make off with modern React APIs including function components and hooks.

Modern Web :- React Native for Web makes direct use of native DOM APIs to implement certain features. Although certain APIs in the project have remained unchanged since inception, the implementation has become smaller and faster by migrating to new DOM APIs as they become broadly available in browsers.

Components :- React Native for Web provides all the core components you’d expect from React Native. You will mostly work with View, Image, Text, TextInput, and Scrollview.

Now let’s Dive in How to add React Native Web to add existing React Native projects.

Step : 1 Using Plain React Native Project:-

• First Initialize your project : react-native init project_name

Step : 2 npx react-native init Project_Name

• Add new dependencies to support react native web.

Step : 3 yarn add react-native-web

yarn add -D babel-plugin-react-native-web webpack webpack-cli webpack-dev-server html-webpack-plugin react-dom babel-loader url-loader @svgr/webpack

Next Steps include adding new files in the project.

1. Index.html
2. Index.web.js
3. webpack.config.js

Let’s Understand files in extensive :-

Index.html

This is the root file of your app, react uses this file to populate the page with components. As of now we just set up the basic styles to make the main div in full height and width.

Add below Code in your index.html file:-

Index.web.js

By Using this file we can separate the entry between web and mobile.

The index.web.js extension makes it so that this file is only picked up for the web and not for mobile.

Add below code in your index.web.js file:-

Webpack.config.js

This file includes all of the instructions for building the web app.

Add below code in your webpack.config.js file:-

Now Let’s understand why we use this code in web.config.js file In Sections:

• The first step is compiling any native library to the web.

NOTE: [Add all the native libraries for competition purpose]

• Then we include all of the files and folders containing the source code.
• We’re compiling index.web.js, app.web.js, everything under the src folder, and all of the libraries that were compiled in the step above.

• Next, we have a few libraries to load png and svg files. We are using url-loader and @svgr/webpack , as well as the babel-loader configuration from the previous step.

• Next, we are going to add three plugins.
• HtmlWebpackPlugin : To Create the HTML
• HotModuleReplacementPlugin : for hot module reloading
• DefinePlugin : to define variables to define variables like __DEV__ or NODE_ENV in react-native-web

Package.json file changes:-

Modify the scripts section under package.json file.
This Step will add to be in need of build and serve commands.

Add Below lines in to scripts section:

“build”: “rm -rf dist/ && webpack — mode=production — config webpack.config.js”,

“web”: “webpack serve — mode=development — config webpack.config.js”

Run your project by using below command:

• yarn run web

Or if you would like to deploy it to the web using Vercel:

• yarn build
• cd dist
• vercel

Now you can open your browser to test the app.

I hope that you find this post useful.