For example, here is some of my React codes.
class App extends Component
{
render(){
return (
<div className="App">
<Header/>
<LoginApp />
<Register />
<Footer />
</div>
);
}
}
export default App
Now, I'd like to include the warning panel into this class, but the file was written using just only simple HTML and JavaScript codes. Is there any ways to load the dot html files into the React component class?
Here's the idea.
<div className="App">
<Header/> <--React Component
<LoginApp /> <--React Component
<Register /> <--React Component
<Footer /> <--React Component
// Load other external html files here... (Non React component)/
</div>
Thank you very much.
PS.I'm extremely new to React.
There are 2 ways for that
Fetching HTML or Setting as Inner HTML
visit this link, There is a code for explain how to do this
Add html file to a react component
also this will help Add react to a simple HTML file
Related
I am building a ReactJS application and have a typeform which I embed to the middle of the page. Problem is that as soon as the Type-Form loads in the https://www.npmjs.com/package/#heyjobs/react-typeform-embed
Code:
class OverTheCounter extends Component {
render() {
return (
<div className="OtcContainer">
<div className="overTheCounterPage">
{/*<img src={image1} alt="HeaderImage" />
<h1 >Over the counter</h1>
</div>
<OtcIcon />
*/}
</div>
<ParallaxHeader />
<div className="typeForm">
<ReactTypeformEmbed
className="typeForm"
url="https://xxx.typeform.com/to/XXX"
/>
</div>
<OtcIcon />
<Footer />
</div>
);
}
}
export default OverTheCounter;
So for the react embed component you're using I can't comment or explain how it works. However I recently created and maintain a web components library (which from my tests works well with React).
You can install it with
npm install typeform-elements
And import the embed library into your apps entry point with:
import 'typeform-elements/dist/embed';
And finally use the component as so...
<typeform-standard url="{typeform_url}"></typeform-standard>
The embed component has a few attributes you can use and learn about here. And if things don't work, open an issue!
First, I would like to dynamic title tab.
Title tab change by every single page's <h2> Something</h2>
So I tried to make <h2 id="name">something</h2> I made title tab page as one single html page. and each of different javascript page has own <h2>
I tried to use var something =document.getElementById("name") then document.title=something like this.
But this main file can't get elements which is in external file.
Is there anyway I can make dynamic title tab?
no jquery.
Using ReactJS
You can create a component just for the title. Have that component accept a prop called "title" and then display that title.
Title Component: your title component can be a functional component
import React from 'react';
export default (props) => {
return (
<div className="your class names for this title">
<h2>{this.props.title}</h2>
</div>
)
}
This is perfectly fine functional component syntax. Just save the file as "Title.js". And you can import it in your parent component like so:
import Title from "./path/of/Title/Title";
And that will work just fine. If you are not comfortable with that syntax you can rewrite it like this:
const Title = (props) => (
<div className="your class names for this title">
<h2>{this.props.title}</h2>
</div>
);
This is perfectly valid as well. Next, let's discuss the parent component. Your parent component is your page. So, let's call this component "Home" just for this example.
Home Component: a class component (assuming it will have state but it does not have to be a class component)
import React, { Component } from 'react';
//import Title component
import Title from "./path/of/Title/Title"; //note: your component should be in a directory that has the same name as the component
export default class Home extends Component {
render() {
return (
<div>
<Title title="insert title here" />
<div>
Rest of your home component
</div>
</div>
)
}
}
That's it. You have a dynamic title. Now, let's say you want to pass a variable to the prop "title" instead of always hard coding a string. Well, you can update this line:
<Title title="insert title here" />
to this:
<Title title={nameOfVariable} />
And if that variable is coming from your state you can do this:
<Title title={this.state.nameofvariable} />
You can always destructure your state and do this instead:
render(){
const { nameofvariable } = this.state;
return (
<div>
<Title title={nameofvariable} />
<div>
Rest of your home component
</div>
</div>
);
}
That's all you need. Hope that helps. Good luck.
In reviewing and making my code more modular and robust, as any programmer should, I noticed I was using a similar button component multiple times. As such I decided to create a button component and just render it with the new route link and text as in the page rendered.
I'm completely new to react (~ 5 days in learning) with a fairly well versed programming background.
Simple component button, I use react-route-dom : Link prop to route to new pages.
function ActionButton () {
return (
<div className="Action">
<button className="ActionButton">
<Link to={this.props.navLink}>
{this.props.text}
</Link>
</button>
</div>
);
}
using/constructing of the button component
function ActionPage () {
return (
<div className="ActionPage">
<ActionButton
navLink="/urlLink1"
text="btn1"
/>
<ActionButton
navLink="/urlLink2"
text="btn2"
/>
</div>
);
}
this doesn't work, I get the following:
TypeError: Cannot read property 'props' of undefined
When using a stateless functional component as you are (as opposed to a class based one) the component is called with ComponentName(props) - you can access props by updating the signature of the component to:
ActionButton (props) {
Which will allow you to access props.navLink etc inside the function.
Your ActionButton component is a dump component, so you have to pass the props as a argument to the function. Update your ActionButton component as shown below.
function ActionButton (props) {
return (
<div className="Action">
<button className="ActionButton">
<Link to={props.navLink}>
{props.text}
</Link>
</button>
</div>
);}
As you are new to React, read more about dump vs smart components here: https://medium.com/#thejasonfile/dumb-components-and-smart-components-e7b33a698d43
I have a component comment.js
export default function Comment (props) {
return (
<div className="comment-wrapper">
<img src={props.userImage} />
<p className="comment">{props.commentTitle}</p>
</div>
);
}
So I just simply want to have that component in the parent component as
<Comment userImage="IMAGE_LINK" commentTitle="BLAH BLAH" />
Again, I am using the Create-React-App build system from facebook. With that being said I know I can hard code an image using the following
<img src={require(`./images/MY-IMAGE.png`)} />
The code above works perfectly fine for the test image I am trying to load. However, when needed dynamically for the component the issue gets a bit more complex.
Now with the comment.js component above, I cannot do
<img src={require("./images" + {props.userImage})} />
I have taken a look at one thread on this site as well as reading this blog post on the issue and can still not come to a conclusion.
How can I handle image assets being passed as props to a component, in this case?
you can use import
// parent component
import MenuImage from '/img/menu.png'
<Comment image={MenuImage} commentTitle="Title"} />
then on Comment component
export default props => (
<img src={props.image} alt='' />
)
I have started development in REACT and have some small queries on how to use it inline.
I have for example the following code snippet.
ReactDOM.render(
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />,
document.getElementById('promo-code')
);
however when using the above using it within my MVC page is annoying...i would like to be able to within the HTML page use the new "tag" inline...e.g.
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />
How do i go about doing this?
On another note..I want to use multiple components in different parts of my page but don't want to write one HUGE component to use them all together. How can i get one component to update / modify the properties of another on the same page?
Thanks
You can call render in one place. Just create some "main" component which will contain all others.
ReactDOM.render(
<App />,
document.getElementById('promo-code')
);
class App extends Component {
render() {
return (
<div>
<RitualPromoCode url="/Home/ValidatePromoCode" code="Bongo" location="1" package="17" />
<SomeOtherComponent />
<MoreComponent />
<MyComponent />
</div>
);
}
}