My React App

[Solved]-how to export react JS components to static html-Reactjs

I only really know HTML Email, and basics of React — and SO is not great for recommendations of software type questions — so I’ll just speak to the email side.

If you can get HTML, you need to consider a few things.

First, anything over two columns is likely to run out of space. You would need to consider a stackable column structure with repeated headers. That would require hiding the duplicated headers for desktop views, since the tables would be separate due to the way we do stacked columns in emails (as inline-blocks without media queries). See https://medium.com/@nathankeenmelb/bulletproof-responsive-datatables-in-html-emails-64248b9e18f5 for full details.

Second, only some approaches would work like that. Images then would be your go-to option. A nice output for table images would be:

The link goes to the image itself so you can zoom and move around easier, and get maximum realestate.

An alternative built on that idea would be to have a link from the image to landing page with full web capabilities. That would take longer to load, but may be well worth it.

Since that’s probably the most viable, I’ll explain these choices of attributes and styles:

• Use the width attribute width=»600″ because that’s what Outlook desktop uses
• Use inline styles for those email clients that do not support blocks
• Vertical-align:middle (or display:block ) removes the space underneath the image that some email clients add
• width:100% makes it responsive to mobiles
• border:0 ensures no border is shown because of the link

Third, datatables are so finicky and particular in HTML email. Each table is unique because they have different data in them that responds differently. In normal web design, you can just use a nice reset and get everything working without much thought. In HTML Email, everything needs to be inline, and supported, with fallbacks for those things that are unsupported. So even the core data often needs editing — e.g. if it has long URLs, emails or words you need to add a wrapping span with word-break CSS but also s in the middle of it for some email clients to properly wrap.

Datatables don’t often come up, and because of these considerations, it’s hard to see how they could be automated easily — and hard to build a case for it financially.

On a related note, if you can show the information using card UI, that seems to me to be a much nicer, simpler, more accessible and easier to code solution than datatables. This is about taking the information and redesigning it into card blocks. I talk about that in detail here: https://medium.com/@nathankeenmelb/responsive-datatables-through-card-ui-design-for-email-aca6f3c395a2

Nathan 3026

Related Query

• how to export react JS components to static html
• How to export react app to pure static html
• How to import and export components using React + ES6 + webpack?
• How to parse a String containing HTML to React Components
• How to embed React Components in html pages
• React Styled Components — How to access raw html
• React — How to Export Multiple Components on same File, preventing Component on Dev Tools
• How do export a React component with related «child» components
• How can I export static HTML pages from next.js when they need data from a third-party API?
• How to use HTML with JS in React app to export component
• How to change the html meta tags with react function components
• How does a chained export work in react without the components in between actually rendering the component?
• React | Npm package — How can I export 2 components for use as an npm package
• how to import css file in react when generating static html and inject imported css into html head tag?
• How to export react components as pdf, but without converting it to an image?
• React: how to mix server-side HTML with react components and functions
• how to create and export react components like ComponentA.ComponentB
• React JS: How can I export different components based on environment variable?
• How do you export react library component with hooks to use in html file?
• How to use React ContextAPI in static html file
• How to use code splitting with webpack in react app with components exported as export * from ‘. ‘
• How to render FluentUI controls in a HTML page similar to rendering React Components in a script tag inside a Div
• How do I render multiple react components in non-react 3rd party html
• How to allow HTML templates define React components the same as Vue?
• How can I prevent event bubbling in nested React components on click?
• React — How to pass HTML tags in props?
• How to render react components by using map and join?
• React — How to export a pure stateless component
• How can I render HTML from another file in a React component?
• How to query by text string which contains html tags using React Testing Library?

More Query from same tag

• Typescript based React: importScripts() gives: ‘importScripts’ is not defined no-undef
• React/Redux: Need to build a React component with Redux that dynamically generates additional dropdowns based on initial dropdown selection
• Cannot get URL from getDownloadURL from firebase
• how can I extend material ui theme type and modify existing types in Typescript?
• Why immer.js doesn’t allow setting dynamic properties on draft?
• react-image-gallery doesn’t apply styles
• Ant design table filter: How to limit to one selection in the filter
• What’s the best way to separate the routes in react-router-dom?
• Wrong location of marker when rendered in component
• problem when adding item to hooks state react js
• Why does React update state onChange but not onSubmit (input)?
• How to structure content dynamically in 2 columns
• How to make requests in react correctly?
• URL not changing consistently in React router
• i’m Trying to make react paypal button that change the billing amount on props change
• Inform parent component of children’s connection status
• gtm.js not firing for page view
• Javascript: How can I replace nested if/else with a more functional pattern?
• checked/uncheck the value of material ui checkbox based on data(hooks) that returns Y(true/checked) react js
• Countdown Timer to specific date in ReactJs
• Is there any way to send a value to reducer?
• React full page image that disappears on scroll down, doesnt come back when you scroll up
• how to map an array of objects of array of objects with React
• React: no around text nodes
• How to know when there is a selected text in a text area instead of polling?
• is this the right way to fetch data while usine usestate hooks? i use usestate hook but i don’t know if this the right way to fetch data
• How to inject dispatch actions to props using Typescript?
• How to reuse styled-components between different react components?
• Material-UI Autocomplete is not working when setting TextField InputProps
• Test component with a store Mocha and Enzyme

Источник

How to export react app to pure static html?

Exporting a React application to a static HTML format can be useful in situations where you want to host the application on a simple web server, or to serve it as a static file without the need for a complex setup. The goal of this process is to convert the dynamic, JavaScript-driven React application into a series of static HTML files that can be served as is. Here are a few methods you can use to achieve this:

Method 1: Use a Static Site Generator

If you want to export your React app to pure static HTML, you can use a Static Site Generator (SSG) like Gatsby or Next.js. Here’s how you can do it using Gatsby:

Step 1: Install Gatsby

First, you need to install Gatsby using npm:

Step 2: Create a new Gatsby project

Create a new Gatsby project using the following command:

Step 3: Add your React app to the Gatsby project

Copy your React app files to the src directory of your Gatsby project.

Step 4: Build the Gatsby project

Build the Gatsby project using the following command:

Step 5: Export the Gatsby project to static HTML

Export the Gatsby project to static HTML using the following command:

This will create a public directory with all the static HTML files of your React app.

Step 6: Serve the static HTML files

You can serve the static HTML files using any web server of your choice. For example, you can use http-server :

npm install -g http-server cd public http-server

This will serve the static HTML files at http://localhost:8080 .

That’s it! You have successfully exported your React app to pure static HTML using Gatsby.

Method 2: Render the App to Static HTML with a Server

If you want to export your React app to pure static HTML, you can use the «Render the App to Static HTML with a Server» method. Here are the steps:

1. First, you need to install the react-dom/server package, which provides the renderToString method that we will use to render the React app to static HTML.

npm install react-dom/server

1. Next, you need to create a server file that will render the React app to static HTML. Here’s an example:

import React from 'react'; import  renderToString > from 'react-dom/server'; import App from './App'; const express = require('express'); const server = express(); server.get('/', (req, res) =>  const appHtml = renderToString(App />); const html = `     $appHtml>    `; res.send(html); >); server.listen(3000, () =>  console.log('Server is listening on port 3000'); >);

In this example, we’re using Express to create a server that listens on port 3000. When a user visits the root URL ( / ), we render the React app to static HTML using the renderToString method and include it in the div with the ID of app . We also include a script tag that loads the bundled JavaScript file ( bundle.js ), which contains the React code.

1. Finally, you need to create a build script that will bundle your React app and copy the necessary files to the server directory. Here’s an example:

"scripts":  "build": "webpack --mode production && cp index.html server.js bundle.js dist/", "start": "node dist/server.js" >

In this example, we’re using Webpack to bundle our React app into a single JavaScript file ( bundle.js ). We’re also copying the index.html , server.js , and bundle.js files to the dist directory, which will be served by the server. The start script runs the server.

That’s it! Now you can run the build script ( npm run build ) to create the static HTML files, and then start the server ( npm start ) to serve them.

Method 3: Export the App as a Static Website with a Library

If you want to export your React app as a static website, you can use a library called React Static. React Static is a fast, lightweight tool for building static websites with React.

Here are the steps to export your React app as a static website with React Static:

npx create-react-static-app my-static-site cd my-static-site

1. Replace the contents of src/App.js with your React app code.
2. Add a new file called static.config.js to the root of your project with the following contents:

export default  siteRoot: 'https://my-site.com', getRoutes: async () =>  return [  path: '/', component: 'src/App', >, ]; >, >;

Replace https://my-site.com with the URL of your website.

That’s it! Your React app is now a static website that can be hosted on any web server.

Источник