I have a problem with show details of products in sharing on Facebook or LinkedIn. I send the correct URL but is showing details of the site. The front-end of the site is reacting js version 17.0.2, the back-end is API WordPress and I use the library react-share.
I try to change the library ShareThis-reactjs but is the same problem.
import React from "react";
import {FacebookShareButton,LinkedinShareButton,LinkedinIcon,FacebookIcon,
} from 'react-share';
import './styleBtnShare.css';
const BtnPartage = (props) => {return (
<>
<div className="btnsSShare" style={props.style}>
<FacebookShareButton
url={props.url}
title={props.title}
image={props.image}
description={props.content.replace(/<[^>]*>?/gm, '')}
>
<FacebookIcon size={40} round={true} />
</FacebookShareButton>
<LinkedinShareButton
url={props.url}
title={props.title}
image={props.image}
description={props.content.replace(/<[^>]*>?/gm, '')}
>
<LinkedinIcon size={40} round={true} />
</LinkedinShareButton>
</div>
</>
);
}
export default BtnPartage;
I am making this post, as so far with my React program, I have used React Drop-Zone to create a drag drop place, but what I am trying to do is when a local html file is button submitted, I want it to go to a specific / then grab the data from the new local / url.
I'm wondering whether this is possible with just React, or will I need to use Express to create a server, so on submit it uploads it to finish the task?
Upload Local Html File > go to specific / > once inside grab data from page.
Is this possible? or is a API needed?
import React from 'react';
import { useDropzone } from 'react-dropzone';
function DropZoneComponent({ open }) {
const { getRootProps, getInputProps, acceptedFiles } =
useDropzone({});
const files = acceptedFiles.map((file) => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));
return (
<div className="container">
<div {...getRootProps({ className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag The Html File Here</p>
</div>
<aside>
<ul>{files}</ul>
</aside>
</div>
);
}
export default DropZoneComponent;
this my component.ts code
this.allMeta.getProfilePictureUsingMediaId({
"SessionID": "dswesfgdgfdgf12463",
"MACAddress":"1235874"
"MediaID":this.userProfilePicture
}).subscribe(
data => {
console.log(data);
this.profilepic=data
}
);
below is my service code,
getProfilePictureUsingMediaId(pjson){
return this.http.post(this.profile + 'getProfilePictureUsingMediaId', pjson)
.map((data: any) => data.json());
}
<div style="height:240px" class="row">
<img id="ItemPreview" [src]="'data:image/jpg;base64,'+profilepic" />
</div>
Below displaying data I am getting from server, how to make it visible same image in my web app, beacuse after calling server in service, i got data value undefiend.
����JFIF��C
#%$""!&+7/&)4)!"0A149;>>>%.DIC
<H7=>;��C
;("(;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;��"����=!1A"Qaq2B��#R�$���3b�Sr�����C����%!1AQ"a2���?B�vϚ���8���\J3��y�A�l9fv��k�<�H�R�{\n��&���T��q�k���h$Yau;�����p���x�������nN�q��RWcp����h�~f}�8#�$�&���$Tn;�6Is�X�"#C��n-ߦϳ��k8�c��)�V���b�Y�\p��Vҍ�fp�'I��S�.4%�Xx����9�S+F������|2D�F�d%�F��UlS��NkEL�VP
�0k�Lr�RRA'�]���禣`���DX��,Hc[�)nO�����i��Ow�sC��";9����-�é2�
Sorry I don't know how to send this data so I am using html to show u this picture and also it is not complete data.
Use
<img id="ItemPreview" [src]="imageVariable" /> . in your html
and use an imageVariable in ts file like this
imageVariable="`data:image/png;base64,"+ yourBytestream
Here is a working solution:
stackblitz
I want to build a web application with React with multiple HTML pages.
For example login.html and index.html. I've created these HTML pages and mapped them to URIs with my backend. So I have localhost:8080/login and localhost:8080/index. Unfortunately, React only uses the index.html file to render content!
So index.html works and the React content is shown: localhost:3000/index.html
<!-- index.html -->
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="wizard"></div>
</body>
...
<!-- index.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import FetchData from "./FetchData";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<div className="d-flex flex-column">
<div className="bg-dark text-light AppHeading">Self-Service-Webwizard</div>
<div className="bg-white"><FetchData /></div>
</div>,
document.getElementById('wizard') as HTMLElement
);
registerServiceWorker();
But wizardLogin.html doesn't show the React content: localhost:3000/wizardLogin.html
<!-- wizardLogin.html -->
...
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div>Wizard login</div>
<div id="wizardLogin"></div>
</body>
...
<!-- LoginPage.tsx -->
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import LoginForm from "./LoginForm";
ReactDOM.render(
<div>
<div><h1>Wizard Login.tsx</h1></div>
<div><LoginForm/></div>
</div>,
document.getElementById('wizardLogin') as HTMLElement
)
;
registerServiceWorker();
Am I doing something wrong or is it not possible to serve multiple HTML files with React?
Github: https://github.com/The-Taskmanager/SelfServiceWebwizard
if you are use create react app you must eject your project first
because you must change your entry point in Webpack configuration
first eject ( if you do not have webpack config file )
npm run eject
and after that go to config file
in webpack.config.js
entry: {
index: [
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appIndexJs,
],
admin:[
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
require.resolve('react-error-overlay'),
paths.appSrc + "/admin.js",
]
},
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/[name].bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath),
},
after that you should add Wepack plugin and added that to your project
new HtmlWebpackPlugin({
inject: true,
chunks: ["index"],
template: paths.appHtml,
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ["admin"],
template: paths.appHtml,
filename: 'admin.html',
}),
also you should rewrite urls
historyApiFallback: {
disableDotRule: true,
// 指明哪些路径映射到哪个html
rewrites: [
{ from: /^\/admin.html/, to: '/build/admin.html' },
]
}
you can read this page for more informations
http://imshuai.com/create-react-app-multiple-entry-points/
Ejecting the app didn't seem like the right option. I found this answer which seems to work better.
Here is a quote from the answer.
How to model a react application as a multi page app. There are many
ways, however, one would be to structure your files like so:
./app --> main page for your app
./app/page1/ --> page 1 of your app
./app/page2/ --> page 2 of your app
...
In this way, each 'page' would contain a self contained react project.
Your main application page could contain hyperlinks that load these
pages, or you could load them asynchronously in your javascript code.
An alternative which I am using right now is to use a different toolchain. I am using Gatsby which has support for multiple pages. You could also use next.js, however it requires a nodejs express server as the backend.
I think you need a router. Here is great react router library which you can use
https://reacttraining.com/react-router/web/example/basic
So far I've learned that React native doesn't support multiple HTML pages because it's an single page application. I kept index.html as single HTML page and solved the issue with conditional rendering in react. When a condition is fullfilled then I'm rendering another React .tsx-file.
I am a newbie to the ReactJS world and trying to get into it. I am working on a style guide for which I need to display some HTML code as an example. I am using ReactPrism for that and I am not able to get the HTML output inside my PrismCode component, I have find a work around by using react-to-jsx which shows the JSX code instead of HTML.
This is the code:
import React from 'react';
import {PrismCode} from "react-prism";
import reactToJsx from 'react-to-jsx';
class CodePreview extends React.Component {
render (){
return (
<div>
{this.props.children}
<h5>Code example</h5>
<pre>
<PrismCode className="language-javascript">
{reactToJsx(this.props.children)}
</PrismCode>
</pre>
</div>
);
}
}
export default CodePreview;
So basically I want to render this.props.children (the component) as HTML code and not the content of it in the PrismCode
I even tried the following as shown on https://github.com/tomchentw/react-prism, but it doesn't work. Not sure what I am doing wrong!
<PrismCode className="language-javascript">
{require("raw-loader!./PrismCode")}
</PrismCode>
Have you considered writing your docs in markdown? I added some special tags for react:
```react:mirror
<Slider
value={7}
/>
```
This will show the rendered component and also the JSX syntax highlighted.
```react:demo
<PropsEditor>
<Slider
value={7}
/>
</PropsEditor>
```
This will render the component as well as a live editor to manipulate any props on the component.
```react
<SomeComponent />
```
Will just syntax highlight but not render the component.
At the top of my markdown file I can import any components I am using in the doc:
---
imports:
- import Slider from '../src/slider'
- import PropsEditor from 'props-editor'
---
The advantage of this way is that your docs work as normal markdown and it's easy to get the JSX as you have it as a string.
To get the HTML source I have a "View Source </> button which prints formatted html dynamically when clicked:
The steps are:
on click get the html of the react component
format the html using prism and a beautifier
insert it into the DOM
So wrap your react component and make a reference to the node:
<div ref={(n) => (this.fenceView = n)}>
And on click add the output below the component, relevant bits:
import prismjs from 'prismjs';
import beautify from 'xml-beautifier';
const RE_HTML_COMMENTS = /<!--[\s\S]*?-->/g;
removeCodeSource() {
const existingHtmlCode = this.fenceView.querySelector('.fence-generated-html');
if (existingHtmlCode) existingHtmlCode.remove();
}
renderCodeSource() {
const html = this.fenceView.children[0].innerHTML.replace(RE_HTML_COMMENTS, '');
const fenceCode = beautify(html, ' ');
const highlightedCode = prismjs.highlight(fenceCode, prismjs.languages.html);
this.removeCodeSource();
this.fenceView.insertAdjacentHTML('beforeend',
`<pre class="fence-generated-html language-html"><code>${highlightedCode}</code></pre>`);
}