I have a React component:
class Control extends React.Component {
constructor(props) {
super(props);
this.handleSaveFile = this.handleSaveFile.bind(this);
this.handleExecFile = this.handleExecFile.bind(this);
}
handleSaveFile(e) {
...
}
handleExecFile(e) {
...
}
render() {
return (
<div id={this.props.name} className="Control" >
<button onClick={this.handleSaveFile}>Save</button>
<button onClick={this.handleExecFile}>Exec</button>
</div>
)
}
}
After building the project with npm run build, the application displays correctly, but the "control" component HTML has been reduced to:
<div id="control" class="Control">
<button>Save</button>
<button>Exec</button>
</div>
In other words it appears as if the "onClick" has been optimized away.
I am uncertain why that would happen?
I am new to React.js and I am new to front-end development, any help appreciated.
After working with the application a bit longer I see what is happening.
Indeed there is no "onClick" rendered in the HTML of the React component, but the component does actually respond to clicks. The onClick is just being registered in a different way by the framework.
This correct behavior of our build tool. Check your javascript file. Your handlers are placed at the javascript bundle.
Related
I am using React. I am using class Components.
I am also using React Router.
Here is my code:
constructor(props){
super(props);
}
handleCreateComponent = () =>{
return this.props.history.push('/app/pages/pageA/new');
}
render = () =>{
return(
<div>
<div>
<Button id="addComponent" onClick={this.handleCreateComponent}>ButtonA</Button>
</div>
</div>
);
}
My Question:
When I click "ButtonA", it navigates to the link: /app/pages/pageA/new
However, the page is empty and not displaying anything even though it's supposed to render.
What might be the problem ?
You should use <Link to="/app/pages/pageA/new"/> or <NavLink to="/app/pages/pageA/new"/> from the react-router instead of <Button/>
But the rendering problem might be something else. in your question you say /api/pages/pageA/new but in the code it's '/app/pages/pageA/new'
i have start learning with reactjs and purely new.i have created a new app in react and wrote the following code in Blog.js:
import React,{Component} from 'react';
const blogBody=()=>{
return(
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Written By Ali</h5>
<p>Some text..</p>
</div>
)
}
class Blog extends Component {
render() {
return (
<div>
<blogBody/>
</div>
);
}
}
export default Blog;
and my App.js is:
import React,{Component} from 'react';
import Blog from './Blog'
class App extends Component {
render() {
return (
<div className="container">
<Blog/>
</div>
);
}
}
export default App ;
when i execute npm start, it shows nothing. then when i go to developer tools it is saying under the tab
You need to enable JavaScript to run this app.
did i do anything wrong with my code or in any setting? but when i run he initial page after creating new app fresh, it is showing the react thing with enable src regular stuff.
where did i do wrong?
this is my first post....please let me know if i break any rules and please help..
Component names have to start with capital letters.
Since blogBody doesn't, it is treated as an unknown HTML element and just inserted into the DOM.
What if I Convert all html tag in react component
such as html button: <button type="button">Test </button>
convert to react pure component
export default function Button({type, text, onClick}) {
return <button type={type} onClick={onClick}>{text}</button>
}
and use it 1000 time. Is there any advantage in app performance ?
If you have any behavior in the button or html tag then you should create a separate component. Unless there is no need to create component and it would not effect in performance.
I try to create a custom component for my application with emberJS, I have followed the quickstart tutoriel and now I try to create a upload button as a component.
It seems I don't have code issues but my component don't render on my main page. I have use the ember component generator to create it
here my upload-button.hbs :
<button type="button">{{#buttonText}}</button>
now my upload-button.js :
import Component from '#ember/component';
export default Component.extend({
actions: {
showExplorer(){
alert()
}
}
});
for the moment I simply put a alert() method in showExplorer()
and now my main page, application.hbs :
<upload-button #buttonText="Uploader un fichier" {{action "showExplorer"}}/>
{{outlet}}
I expect to see my button but I just have a blank page with no code error.
I suspect that's a really stupid mistake but I can't find it.
Glad you decided to try out Ember.js :) Your upload-button.hbs and upload-button.js file looks good. However, there are a couple of issues here.
The component, when invoked using the angle-bracket syntax (<... />), the name should be CamelCased to distinguish between HTML tags and Ember components. Hence, we need to invoke the upload-button component as <UploadButton />.
You defined your action, showExplorer, inside the component (upload-button.js) file, but, referenced in the application.hbs file. The data in the backing component file can only be accessed inside the component's .hbs file because of the isolated nature of the component architecture. Also, we can only attach an action using {{action}} modifier to a DOM element and not to the component itself. So,
we need to remove the action binding from application.hbs file,
{{!-- application.hbs --}}
<UploadButton #buttonText="Uploader un fichier"/>
and add the same inside the upload-button.hbs file:
{{!-- upload-button.hbs --}}
<button type="button" {{action "showExplorer"}}>{{#buttonText}}</button>
A working model can be found in this CodeSandbox
Hope you find learning Ember, a fun process!
I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?
I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)
You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));
We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>