so my goal is to display a Page from Wikipedia in my Web-Page using React. I have only one Idea to do that, and it's:
First Step: Export data from Wiki as .XML
Second Step: import data from .xml in HTML(using React).
First Step I have done succesfully, but I have Problems with second.
I have found xml-parser from npm(xml-loader):https://www.npmjs.com/package/xml-loader. but it's giving me only following string: "/static/media/wiki.c6730c07.xml" . Knows someone better way to do that, or it will be good if you say, that I am on right way. My code in React is :
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
var wiki = require('./wiki.xml');
class App extends Component {
render() {
return (
<div className="App">
{wiki}
</div>
);
}
}
export default App;
xml-renderer might be a good candidate for helping you.
So, I have found out that, to do something like this, I have to use "xslt", where I can get data from ".xml" and display them how I want. Important is to create a reference between xml and xslt. Here are tree links, where you can see it on example:
https://www.youtube.com/watch?v=Zn9A5k23Oto
https://www.youtube.com/watch?v=Icg0Su5uEa8
https://www.codeproject.com/Articles/12047/How-to-Convert-XML-Files-to-HTML
But last question is: I want to display data from Wiki exactly how it is on it's Page, Is this Possible ?
If someone knows answer, please write Hint.
Regarding to your second question, about how to display data from Wiki exactly how it is on it's Page, you can use the <iframe> tag.
You can find more information here.
Related
I'm currently running into a problem that I can't solve (I've been searching for solutions since this morning, but I can't manage to find what I need).
I created a React app using react-markdown, allowing the user to edit some post-its, whose content is stored in Markdown format in my DB. But the thing is, I discovered there was no way to underline a text (I thought that if you could do it on Discord, then it means that it's the same in Markdown).
What I'd like is a solution allowing me to simply transform this:
**Bold text**
__Underlined text__
Into... well... you know what I mean. It doesn't have to be this exact syntax, but at least something similar. The only thing I've found is to create custom components, which I don't want because it requires using an already existing syntax, or, to convert the Markdown with replace() functions and use dangerouslySetInnerHTML to display it, which I don't want either, because isn't it called "dangerouslySetInnerHTML" for a reason?
I'd really appreciate if someone could help. And by the way, sorry for any grammar mistakes, English isn't my native language...
Right now there are no identifiers for underlining text in markdown syntax.
But as you know we can achieve it by using html tags in our markdown.
But we don't have to use dangerouslySetInnerHTML in react-markdown for parsing HTML tags. react-markdown (Check Appendix A: HTML in markdown) uses a plugin rehype-raw.
You can question the thing that rehype-raw internally implements allowDangerousHtml:true, but to prevent this , we can wrap our markdown content around Dompurify.sanitize() to reduce code vulnerablity.
I also faced the same problem , so this is the approach I tried and it worked for me .
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import DOMpurify from 'dompurify';
import "./styles.css";
export default function App() {
const markdown = `
**Parsing html in react markdown**
<u>underlined text</u>
`;
return (
<div className="App">
<ReactMarkdown rehypePlugins={[rehypeRaw]}>
{DOMpurify.sanitize(markdown)}
</ReactMarkdown>
</div>
);
}
CodeSandBoxLink
I have seen the thinking in react article found here and in short it discusses how to break down components...
while i understand the concept in their example and it looks like this..
each colored box must be a separate component...
now I am creating a login page and i am a bit confused on how to break it down as most of it will not be reused somewhere else and i started to mix multiple concepts together I am wondering if you guys can help me sort my thoughts about this topic
screen shot of similar login page to the one i am making i have already colored components that should be separated based on the react official page docs so please let me know if I am thinking correctly and if any extra tips would be appreciated
React basically is component based library which is re-usable in projects.
For Example you can create the file InputComponent.js :
import React from 'react'
function InputComponent() {
const [name , setName] = React.useState('')
return (
<input placeholder="Name" onChange={(e)=>setName(e.target.value)} type="text" ></input>
)
}
export default InputComponent;
And use it anywhere as many as you want like this :
import React from 'react'
function Home() {
return (
<div>
<InputComponent></InputComponent>
<InputComponent></InputComponent>
</div>
)
}
export default Home
The more re-useable components you can define your project will be more readable and easy foremost .
You can make a re-usable component from anything you desire like some text , input elements and etc ...
You can use component props to pass in any information to the re-usable component to display that information .
For more info you can check the react docs here .
I am making a blog website in React in which user can submit code with other text. The entire code and other text will later be saved into the database. I am looking for the functionality like Stackoverflow's in which user can submit code and it is shown in the post in the original format.
I tried my best to search for the exact name of this functionality(My best guess is using LateX) but couldn't find any. So my exact question is what module or package do I need to represent the code submitted by the user in the original format as in Stackoverflow's question.
Please help me in the problem so I can get along with my work on my website.
After a bit of research into the topic of markdown, I found that react-markdown is a npm module that can be used to create markdown in text string. It is almost similar to the one used in Stackoverflow. But the recent version seems to have some bug, so I used an older version(5.0.0). If you also want to include syntax highlighting, you can use highlight.js. It can be very easily included with react-markdown. Below is an example of react-markdown:
import React from "react";
import ReactMarkdown from "react-markdown";
export default class App3 extends React.Component {
render(){
var value='
#Heading1
<b>line break</b>
_italics_';
return (
<div className="App">
<ReactMarkdown source={value} />
</div>
);}
}
u can also use
dangerouslySetInnerHTML
if u don't to install 3rd libary
How do I or what is the alternative method to break this layout into react component? The code below is bootstrap 4 for simplicity and what I want to achieve is something like this https://codedthemes.com/demos/admin-templates/material-able/bootstrap/default/ where contents are dynamic which is actually consist of different components. So what I am showing here is the simplified HTML code of the actual thing but has a similar structure. The question here how do I break them into components with this HTML structure? Many thanks in advance and appreciate any helps. Thanks again.
<div class="wholepage">
<navbar>
</navbar>
<sidebar>
<dynamiccontent>
</dynamiccontent>
<sidebar>
</div>
What you are describing is one of the selling points of React - the ability to modularise bits of code into what React calls components.
To build something like what you have linked you would need to nest components.
Using the example you might have an app.js that looks something like this.
import React from 'react'
import graph1 from './components/graph1'
import graph2 from './components/graph2'
const app = () => {
return (
<div>
<graph1 key1="props data goes here"/>
<graph2 key1="props data goes here"/>
</div>
)
}
export default app;
graph1 and graph2 are seperate components that have been imported and then nested in the app component as shown below.
The key1 attributes in each component accept values/functions that are passed down to graph1 and graph2 components for further processing and/or display. This is what allows you to make the content dynamic.
What I've mentioned above is very rudimentary but I think answers your question. ReactJS is a massive topic and will take a lot of practice to get used to. is well documented and there is a lot of fantastic documentation, examples and discussion online such as:
React components
React Props
React Design Patterns
DISCLAIMER: Fairly new to react myself, just trying to share the knowledge :)
React InstantSearch provides a CurrentRefinements component which gives the currently selected refinements.
But all I want is to get the number of filters (refinements) being applied. I feel like this should be really easy but have been banging my head for the past 4 hours trying to figure it out.
Edit: You can see a working example with <CurrentRefinements> here
But again, my goal isn't to list the current refinements, it's to get a count of the number of refinements being applied in total.
I got it working using one of the connectors they provide. Here's the solution:
import React, {Component} from 'react'
import {connectCurrentRefinements} from 'react-instantsearch/connectors'
class RefinementCount extends Component {
render() {
return (
<h1>filtered: {this.props.items.length}</h1>
)
}
}
export default connectCurrentRefinements(RefinementCount)
Relevants docs: https://community.algolia.com/react-instantsearch/connectors/connectCurrentRefinements.html