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;
Related
The purpose of my React one page app is just to render JSON data from another Drupal app. My app shows no error in rendering, but I am only getting a blank page both with Fetch and AXIOS. I have tested the JSON on Postman and also from the Drupal site URL and it works. Please can you tell me where I have gone wrong.
And here is my React mapping component. I am using Fetch in the App.js
import React from 'react'
const Posts = ({ posts }) => {
return (
<div>
<center><h1>Articles Post List</h1></center>
{posts.map((post) => (
<div class="article">
<div class="article-body">
<h5 class="article-id">{post.node.Nid}</h5>
<h6 class="article-title ">{post.node.title}</h6>
<p class="article-text">{post.node.Body}</p>
</div>
</div>
))}
</div>
)
};
export default Posts
And here is the structure of my JSON feed:
Drupal json feed screenshot
I run React Native using Expo for android and I'm trying to render html file (it shows a map image) in local directory, but it doesn't work properly.
I followed several references, installed webview dependencies in expo and npm both.
The problem is that the result is just html code view, not a map image
Please see my result below:
And my react native code is this (very simple) :
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const testHtml = require('./arcgis/arc1.html');
export default function App() {
return (
<WebView source={testHtml} startInLoadingState
scalesPageToFit
javaScriptEnabled
style={{ flex: 1 }}/>
);
}
When I compile the html file in online html website, it appears like this:
left - html code, right - result
This html file is just sample file from official gis website so my react native code must be wrong I guess.
How can I fix the problem ?
Thanks.
You have to use this module for rendering html.
https://github.com/archriss/react-native-render-html
Edit: Instead of using HTML file store your HTML into a .js file and export like this
export const MyHTML =
`<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
and then pass MyHTML to yoru HTML renderer.
If you are using react-native CLI, you have to place the local HTML file in specific folders native to ios and android. Meaning you will have two indez.html file: see - https://aboutreact.com/load-local-html-file-url-using-react-native-webview/
For Expo, I used this method:
import { StyleSheet, Text, View } from "react-native";
import { WebView } from "react-native-webview";
import React from "react";
const MyHtmlFile = `
<p>Here is an <em>ul</em> tag</p>
<ul>
<li>Easy</li>
<li>Peasy</li>
<li><div style="background-color:red;width:50px;height:50px;"></div></li>
<li>Lemon</li>
<li>Squeezy</li>
</ul>
<br />
<p>Here is an <em>ol</em> tag</p>
<ol>
<li>Sneaky</li>
<li>Beaky</li>
<li>Like</li>
</ol>
`;
const Screen = () => {
return (
<WebView
originWhitelist={["*"]}
source={{
html: MyHtmlFile,
}}
/>
);
};
export default Screen;
const styles = StyleSheet.create({});
You can use react-native-webview for rendering html file.
Here is an example
import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
const myHtmlFile = require("./my-asset-folder/local-site.html");
class MyWeb extends Component {
render() {
return (
<WebView source={myHtmlFile} />
);
}
}
. .
I am currently using React VR for a school project, but incorporating vanilla javascript into the index.html to create a static HTML UI. In this case I am using an HTML5 form to post data to my back end, yet still, I would like to optimistically render the data using a React component rather than have to retrieve the data from the server.
My data is created in the HTML element, and it needs to make its way into a React Component.
I don't think refs will work, as the research I have done shows that they are for accessing data which is being generated by a React component, and in my case, I am looking for the data to flow from the HTML to the React Component.
~ JAVASCRIPT & HTML ~
//Accepts the Input
<form id='idea-form'>
<input type="text" id="hiddenInput" maxlength=95 autocomplete=off>
</form>
// Initialize the React VR application.
ReactVR.init(
'../index.vr.bundle?platform=vr&dev=true',
document.body
);
I've included my component here, minus imports and exports.
The component maps an array of strings, converts them to JSX, then renders components with the array elements as the text props for the component.
In my case,
//========== IdeaContainer Component ==========
class IdeaContainer extends Component {
//---------- Other Methods ----------
mapIdeasContentToJSX(ideasObjArr) {
newIdeas = [...ideasObjArr]enter code here
ideasJSX = newIdeas.map((idea) => {return (<IdeaText
text={idea.content}
y={Math.random() * 30}
z={Math.random() * -80}
/>)})
return ideasJSX
}
//---------- Lifecycle Methods ----------
componentDidMount(){
this.props.preLoadIdeas()
}
render(){
return(
<View>
{this.mapIdeasContentToJSX(this.props.ideaList)}
</View>
)
}
}
This is the code which lives in the index.html, which exists outside the scope of my React components, meaning I cannot pass it as props or set it to state, as far as I know.
The element with id of 'container' is where the data is being entered, which then needs to make its way to the React Component
<div>
<div id='logoDIV'class="relative" >
<img id='logoIMG' src='./logo.png' draggable="false">
</div>
</div>
<div id="container" style='position: fixed; z-index: 2; bottom: 1%; right: 22%;'>
<div id="input"></div>
<form id='idea-form'>
<input type="text" id="hiddenInput" maxlength=95 autocomplete=off>
</form>
</div>
<canvas id="cloudCover"></canvas>
<!-- When you're ready to deploy your app, update this line to point to your compiled client.bundle.js -->
<script src="./client.bundle?platform=vr"></script>
<script src="./input.js"></script>
<script src='./clouds.js'></script>
<script>
ReactVR.init(
// When you're ready to deploy your app, update this line to point to
// your compiled index.bundle.js
'../index.vr.bundle?platform=vr&dev=true',
document.body
);
</script>
<script>
let x = document.body.querySelector('body > div:nth-child(8) > div > a:nth-child(2)')
x.style.bottom = '100px'
</script>
You are looking for refs.
<input
type="text"
id="hiddenInput"
maxlength=95
autocomplete=off
ref={(input) => { this.textInput = input; }} />
Then you can access the input value like this:
this.textInput.value
https://reactjs.org/docs/refs-and-the-dom.html
i want to save vue js code Inside div in database using mongo db
i create ws to save page Inside mongoDb using nodejs
when i click save button to save code vue js Inside html
save(){
var vm=this;
var page={
"id":"2",
"page":vm.$el.innerHTML
}
console.log("hh"+vm.$el.innerHTML);
var HTTPpOST=axios.create({
baseURL: `http://localhost:3000/api/product/2`,
headers: {
Accept:'application/json'
}
})
HTTPpOST.put('',page).then(function(response){
}) .catch(function(error){
var vm=this;
console.log("error"+error);
})
i only get html code without vue js code
how can i get both and save them bothin my databse?
this is html :
<div id="app" ref="foo">
<ul>
<li v-for="prod in products">
<h1 style="color:red">{{prod.fields.name}}</h1>
<p>{{prod.fields.description}}</p>
</li>
</ul>
<button #click="save">save</button>
</div>
Try prerendering using Nuxt.js or webpack with vue-server-renderer. Server side rendering helps you to get that elements expanded by Vue.js and you will be having fully rendered webpage.
Look at Vue - Server Side Rendering
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>`);
}