I'm creating my first application with ReactJS. So I want to know if React can be used (added) in an existing HTML ?
Please help me
Potentially YES.
You can use React only to create specific dynamic widgets in an existing website. You are not forced to render/manipulate ALL your DOM with React.
When you render a React component you need to specify the root DOM node where it will be rendered.
Just to make an example:
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
In this case mountnode will be a reference to a specific dom node within your page. React will work only inside that node, so if you don't manipulate it with other libraries/pieces of javascript code everything should work as expected
Yes, you can render a React component within your current DOM. This might be useful for you: https://facebook.github.io/react/docs/getting-started.html
Yes you can. Just look at your HTML code to see which part's you would like to be dynamic then add in the ReactJS goodies. It all depends on what you need and your understanding of the ReactJS library.
Here is a tutorial that may help.
ReactJS Tutorial
Related
We have a project build in PHP MVC Framework and we use jQuery as a global JS framework in handling UI activity etc, however, we are now using react js. Therefore, my question is how can I inject or append React Functional/Class-based Component to a current jquery built-in modal() component? I try to run the following code but the modal content shows [object Object]...
onClick handler:
this.testHandler = () => {
const x = `<div>${<Component />}</div>`
$('#test-123').modal()
$('#test-123 #modal-body').append(x)
}
This Component Returns a Table with a list of data coming from api endpoint, the table is working and displaying properly when i render it. But my main goal is to use it outside and inject it as a modal content.
Thanks in advance!
The way to render a react component outside of react is to call ReactDOM.render, passing in the react element you want to render and the dom element you want to put it in. For sites that are fully done in react, you would typically call this exactly once. But if necessary, you can do it on the fly or multiple times, targetting specific pieces of your dom.
const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);
Be aware that React assumes it is the only piece of code modifying the part of the dom tree that you tell it to operate in. So you should avoid making any further changes to the #modal-body element using jquery.
I have a react Class component using the componentDidMount method. I'm trying to append things to a div after the entire component is rendered.
For each react component rendered it includes a div with a unique id such as chartcarsousel1 or chartcarousel2 or charttopmovies. The unique id in each rendered component comes from adding the string 'chart' with a variable passed to the component. For example if the variable name is key, the div's id will be: 'chart'+key.
I'm trying to append some things to that div in my react component after it is rendered but this does not work:
componentDidMount(){
$('div#chart'+key).html("test");
}
Mixing jQuery with React could be a really bad idea if you don't understand React properly. Use some references and arrays to render a list of children. I suggest to take an only React's approach first. If you dive deeper on the problem you're facing, please, share more parts of your code.
I have an AntD component, and i don't have access to the html markup to use useRef to apply a style to next class , depending by a condition:
span.ant-descriptions-item-content
This is why i used:
if(my condition) {
document.querySelector('span.ant-descriptions-item-content').style.background="red"
}
demo: https://codesandbox.io/s/basic-ant-design-demo-fdwxd?file=/index.js
It is ok to use native ways of accessing dom element like document.querySelector, or exists another method to do this in my case?
It is generally not recommended to mix different tools that handle changing how the web page is rendering. This can cause unpredictable behavior and components not updating correctly. If you want to change the appearance of a component using React you should be rendering that component within React.
Following on Dynamic tag name in jsx and React
I tried both suggested answer but both of them seems to not pass any props!!
(Here is a an example of this issue)[https://codesandbox.io/s/angry-torvalds-x7hcv?fontsize=14]
What am i doing wrong?
Here is another example which is not minimal like the one above, using React.createElement, which also doesn't work as it should and it seems its not passing any props
outputElement = React.createElement(
`${this.props.UI_Element.type}`,
{
...globalRequiredProperties,
...this.props.UI_Element.config
},
...UIChildren
)
In short my final goal is creating an imported component, dynamically only by having its type (or name you might say).
Update 01:
After constatnly looking i found an alternative way, this uses an array in which you map an string to the actuall component and then create a tag which uses the map to call the component
Here is an example
This seems to be working as it should but i still would like to avoid creating the map manually, meaning i still wish to only create the component only using string!, is there a way to do this?
I was looking for a way to not only dynamicly import a component but also create it dynamicly, but this could not be achieve how a dynamic tag was created, after looking for a while i came across a library which exatcly does this!!
The Library is called react-loadable
Here is an example
As you can see both the import, the component tag and everything else is created dynamicly just as i want it, hope this helps everyone else too.
Goal
To create, what is in my opinion, an almost perfect framework I want to use Aurelia in combination with ReactJS (mainly just creating components which can be used within Aurelia).
To achieve this there are several options (See http://ilikekillnerds.com/2015/03/how-to-use-react-js-in-aurelia/ and https://github.com/bryanrsmith/aurelia-react-loader)
The first option has the downside that the component is wrapped within a custom element, which I don't want to do for all elements I plan on creating. The second option is pretty nice, wasn't it that the component is generated from a component instance (instead of the html markup).
Work already done
The thing I've been trying to do now is to create a custom attribute which makes ReactJS render the innerHTML of the specific element.
import { customAttribute, inject } from 'aurelia-framework';
import React from 'react';
import ReactDOM from 'react-dom';
// ToDo: have one file to import all dependent components
import { MyReactComponent } from 'components/my-react-component';
#inject(Element)
#customAttribute('react-content')
export default class ReactCustomAttribute {
constructor (element) {
console.log(element.innerHTML);
this.element = element;
ReactDOM.render(
<div dangerouslySetInnerHTML={{__html: this.element.innerHTML}}></div>,
this.element);
// ReactDOM.render(
// <MyReactComponent><h2>lol</h2><h2>lol</h2></MyReactComponent>,
// this.element);
}
}
If the solution above would work I'd be absolutely happy. But, as Aurelia wants to comply to web standards it puts all element names to lowercase. (this.element.innerHTML returns <myreactcomponent><h2>lol</h2><h2>lol</h2></myreactcomponent>) This way ReactJS can't render the components.
The piece I've commented out in the code snippet above actually works.
Questions
How can I get ReactJS to properly render these components?
Is it possible to configure Aurelia to not turn element names to lowercase?
Is it possible for ReactJS to see the relationship between html elements written in kebab-case and javascript class names?
How can I get ReactJS to properly render these components?
You have to do that in attached() method of your aurelia view model.
Is it possible to configure Aurelia to not turn element names to lowercase?
The correct answer is "there is no case"
Tag and attribute names are case insensitive in HTML.
And Aurelia is standards based.
Is it possible for ReactJS to see the relationship between html elements written in kebab-case and javascript class names?
This one will need some teaching.
You can look at how Aurelia treats naming conventions in the source
https://github.com/aurelia/templating/blob/master/src/html-behavior.js
Attached method of aurelia will not wait until complete DOM is ready, if we are doing any DOM manipulations inside attached will fail..