{"id":3985,"date":"2023-11-04T23:13:58","date_gmt":"2023-11-04T23:13:58","guid":{"rendered":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/"},"modified":"2023-11-05T05:48:25","modified_gmt":"2023-11-05T05:48:25","slug":"building-web-applications-with-react-native","status":"publish","type":"post","link":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/","title":{"rendered":"Building web applications with React Native"},"content":{"rendered":"<p>React Native is a JavaScript library that allows developers to build mobile applications for iOS and Android platforms using the same code base. It is based on the popular React web framework developed by Facebook. But did you know that it is also possible to build web applications using React Native? In this tutorial, we will explore how to use React Native for web development.<\/p>\n<h2>Getting Started<\/h2>\n<p>Before we begin, ensure that you have the following requirements installed in your system:<\/p>\n<ul>\n<li>Node.js<\/li>\n<li>npm or yarn package manager<\/li>\n<li>React Native CLI<\/li>\n<\/ul>\n<p>To create a new React Native project, open your terminal and execute the following command:<\/p>\n<pre><code class=\"language-bash\">npx react-native init my-app\n<\/code><\/pre>\n<p>This command creates a new project named <code>my-app<\/code> in your current working directory. Once the process is complete, navigate to the project directory and execute the command below to start the development server:<\/p>\n<pre><code class=\"language-bash\">cd my-app\nnpm start\n<\/code><\/pre>\n<p>This opens the <strong>Metro Bundler<\/strong> console in your terminal. Metro is a JavaScript bundler responsible for building your application. In addition to the bundler console, it opens a browser tab where you can run your application in development mode.<\/p>\n<h2>Configuring React Native for Web<\/h2>\n<p>In order to use React Native for web development, you will need to install the <strong>react-native-web<\/strong> package. This package provides a way to render React Native components in the browser using CSS and HTML.<\/p>\n<p>To install it, execute the following command:<\/p>\n<pre><code class=\"language-bash\">npm install react-native-web\n<\/code><\/pre>\n<p>After installing the package, we need to modify the project configuration to support web development. In the project root directory, create a file named <code>metro.config.js<\/code> and include the following modifications:<\/p>\n<pre><code class=\"language-js\">const { getDefaultConfig } = require('metro-config');\n\nconst config = getDefaultConfig(__dirname);\n\nmodule.exports = {\n  ...config,\n  resolver: {\n    ...config.resolver,\n    sourceExts: [...config.resolver.sourceExts, \"web.js\", \"web.ts\", \"web.tsx\"],\n  },\n};\n<\/code><\/pre>\n<p>This configuration maps all the <code>.web.js<\/code>, <code>.web.ts<\/code>, and <code>.web.tsx<\/code> files to be recognized by the bundler. We will use these files to write web-specific code.<\/p>\n<h2>Creating a Shared Component<\/h2>\n<p>We will start by creating a shared component that we will use in both platforms. In the <code>src<\/code> directory, create a file named <code>Button.js<\/code>. This file defines a simple button component that accepts the <code>title<\/code> and <code>onPress<\/code> props:<\/p>\n<pre><code class=\"language-js\">import React from \"react\";\nimport { TouchableOpacity } from \"react-native\";\n\nconst Button = ({ title, onPress }) =&gt; (\n  &lt;TouchableOpacity onPress={onPress} style={{ backgroundColor: '#6495ED', padding: 10 }}&gt;\n    &lt;Text&gt;{title}&lt;\/Text&gt;\n  &lt;\/TouchableOpacity&gt;\n);\n\nexport default Button;\n<\/code><\/pre>\n<p>This button component will have the same appearance in both the web and mobile platforms. To use this component in the web platform, we will create a duplicate file named <code>Button.web.js<\/code> that renders the same button using HTML and CSS:<\/p>\n<pre><code class=\"language-js\">import React from \"react\";\n\nconst Button = ({ title, onPress }) =&gt; (\n  &lt;button onClick={onPress} style={{ backgroundColor: '#6495ED', padding: 10 }}&gt;\n    {title}\n  &lt;\/button&gt;\n);\n\nexport default Button;\n<\/code><\/pre>\n<p>Notice that we changed the <code>TouchableOpacity<\/code> component to a button HTML element. Also, we removed the <code>import { TouchableOpacity } from \"react-native\";<\/code> line.<\/p>\n<h2>Creating the Web Platform<\/h2>\n<p>With the shared component ready, let&#8217;s create the web platform by adding a new file named <code>index.web.js<\/code> in the project root directory. This file will contain the web application entry point.<\/p>\n<pre><code class=\"language-js\">import { AppRegistry } from \"react-native\";\nimport App from \".\/src\/App\";\nimport { name as appName } from \".\/app.json\";\n\nAppRegistry.registerComponent(appName, () =&gt; App);\n\nAppRegistry.runApplication(appName, {\n  initialProps: {},\n  rootTag: document.getElementById(\"root\"),\n});\n<\/code><\/pre>\n<p>This code registers the main <code>App<\/code> component and runs it on the <code>#root<\/code> element in the <code>index.html<\/code> file. In order to use React Native components in the web platform, we need to modify the <code>index.html<\/code> file to include the necessary script tags. In the project root directory, create a file named <code>index.html<\/code> with the following content:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;title&gt;React Native Web App&lt;\/title&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/&gt;\n    &lt;script src=\"https:\/\/unpkg.com\/react-native-web\/dist\/index.js\"&gt;&lt;\/script&gt;\n    &lt;script src=\".\/index.web.js\"&gt;&lt;\/script&gt;\n  &lt;\/head&gt;\n  &lt;body&gt;\n    &lt;div id=\"root\"&gt;&lt;\/div&gt;\n  &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<p>This file includes the <code>react-native-web<\/code> and <code>index.web.js<\/code> script tags. It also includes the <code>#root<\/code> element where we will render our application.<\/p>\n<h2>Building for Web<\/h2>\n<p>We are now ready to build and run our application. Execute the following command in your terminal:<\/p>\n<pre><code class=\"language-bash\">npm run web\n<\/code><\/pre>\n<p>This command starts the <strong>webpack<\/strong> bundler and generates a <code>dist<\/code> directory with the built application files. Once the process is complete, open the <code>index.html<\/code> file in your web browser to see your React Native web application running.<\/p>\n<h2>Creating the Mobile Platform<\/h2>\n<p>To create the mobile platform, we will reuse the shared component defined earlier. In the <code>src<\/code> directory, create a file named <code>App.js<\/code> and include the following code:<\/p>\n<pre><code class=\"language-js\">import React from \"react\";\nimport { StyleSheet, View } from \"react-native\";\nimport Button from \".\/Button\";\n\nconst App = () =&gt; {\n  return (\n    &lt;View style={styles.container}&gt;\n      &lt;Button title=\"Press Me!\" onPress={() =&gt; alert(\"Hello World!\")} \/&gt;\n    &lt;\/View&gt;\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n});\n\nexport default App;\n<\/code><\/pre>\n<p>This file defines the main <code>App<\/code> component that renders the shared <code>Button<\/code> component. We also defined a <code>StyleSheet<\/code> object to style the container.<\/p>\n<h2>Building for Mobile<\/h2>\n<p>To build the mobile application, execute the following command in your terminal:<\/p>\n<pre><code class=\"language-bash\">npx react-native run-android\n<\/code><\/pre>\n<p>This command launches the application on an Android emulator or device connected to your computer. You can also use the <code>run-ios<\/code> command to launch the application on an iOS simulator or device.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this tutorial, we explored how to use React Native for web development. We started by configuring React Native for web development, created a shared button component, and built both a web and a mobile platform using the same code base. We hope this tutorial will help you get started with building web applications using React Native. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native is a JavaScript library that allows developers to build mobile applications for iOS and Android platforms using the same code base. It is based on the popular React web framework developed by Facebook. But did you know that it is also possible to build web applications using React <a href=\"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\" class=\"btn btn-link continue-link\">Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[605,698],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Building web applications with React Native - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building web applications with React Native\" \/>\n<meta property=\"og:description\" content=\"React Native is a JavaScript library that allows developers to build mobile applications for iOS and Android platforms using the same code base. It is based on the popular React web framework developed by Facebook. But did you know that it is also possible to build web applications using React Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:25+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Panther\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t            },\n\t            \"headline\": \"Building web applications with React Native\",\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\"\n\t            },\n\t            \"wordCount\": 687,\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"keywords\": [\n\t                \"\\\"React Native\\\"\",\n\t                \"[\\\"Building web applications\\\"\"\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\",\n\t            \"url\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\",\n\t            \"name\": \"Building web applications with React Native - Pantherax Blogs\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t            },\n\t            \"datePublished\": \"2023-11-04T23:13:58+00:00\",\n\t            \"dateModified\": \"2023-11-05T05:48:25+00:00\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"http:\/\/localhost:10003\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"Building web applications with React Native\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"description\": \"\",\n\t            \"publisher\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": \"required name=search_term_string\"\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t            \"name\": \"Pantherax Blogs\",\n\t            \"url\": \"http:\/\/localhost:10003\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t                \"width\": 1024,\n\t                \"height\": 1024,\n\t                \"caption\": \"Pantherax Blogs\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t            \"name\": \"Panther\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t                \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t                \"caption\": \"Panther\"\n\t            },\n\t            \"sameAs\": [\n\t                \"http:\/\/localhost:10003\"\n\t            ],\n\t            \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building web applications with React Native - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Building web applications with React Native","og_description":"React Native is a JavaScript library that allows developers to build mobile applications for iOS and Android platforms using the same code base. It is based on the popular React web framework developed by Facebook. But did you know that it is also possible to build web applications using React Continue Reading","og_url":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:58+00:00","article_modified_time":"2023-11-05T05:48:25+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"Building web applications with React Native","datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/"},"wordCount":687,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"React Native\"","[\"Building web applications\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/","url":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/","name":"Building web applications with React Native - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:58+00:00","dateModified":"2023-11-05T05:48:25+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/building-web-applications-with-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/building-web-applications-with-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"Building web applications with React Native"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3985"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3985"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3985\/revisions"}],"predecessor-version":[{"id":4561,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3985\/revisions\/4561"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3985"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}