I am brand new to React. Am using v0.13.3. I have a functioning page (index.html with link to external css file and external js file). All works great.
JS file contains exactly what is in the JavaScript pane of this JSFIDDLE. (Apologies the fiddle doesn't run, I can't figure out why console says Uncaught SyntaxError: Unexpected token <. I have /** #jsx React.DOM */ at the top, but anyway...it makes a chart.)
QUESTION: How can I get what is in
var data = [{"letter":"A","frequency":0.08167},"letter":"B","frequency":0.01492},{"letter":"C","frequency":0.02782},{"letter":"D","frequency":0.04253},...]
to come from an external JSON file instead? (I want the chart to update if the JSON file's contents change).
(I realize there is the option to use React to break all of the pieces of the d3 chart into separate components and do it that way instead of all of the d3 inside one function. But for now, I'd like it to remain this way - based on the conclusion of this article.)
So, it didn't work to use d3.json(path/to/file.js) inside function createChart. And I've tried what is in this tutorial under "Hook Up the Data Model" and "Fetching from the server", but I'm not having any luck. Also, looked at this article. I'm suspecting I need to do something else with componentDidMount and shouldComponentUpdate, but a bit baffled. Searched for other examples, but having trouble finding one like this. Thanks for any suggestions.
One issue with the code in your JSFiddle is your use of the shouldComponentUpdate function. As per https://facebook.github.io/react/docs/component-specs.html this should only return a boolean telling React whether to re-render and not try to update the DOM itself. For responding to updates to props you would probably use componentDidUpdate in this case.
Generally if you need to do anything asynchronous in a React component, it should happen in the componentDidMount function, so you're on the right path there.
On other I would try is in createChart() you have d3.select("body") - you could select the <div> that you pass in from React as the dom prop and append the <svg> directly there, which would be a much more appropriate way of using React (Components should be self-contained, so they wouldn't go around modifying the DOM outside of themselves. Try d3.select(dom).append('svg').
Hope this is helpful!
PS: I've had some good results using this Plunkr template to create React snippets: http://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?p=preview
Related
I am trying to add 'sticky note' annotations (which i call TourPoints) to a React-based prototype I am creating. I created a TourPoint component which I have been manually 'wrapping' around elements of my interface as I go. The TourPoint displays the 'content' as a pink tag on the side of the element.
<TourPoint content="Sticky note content goes in this prop">
<button id="elementToWrap">Button element to annotate</button>
</TourPoint>
However, this gets a little messy and bloats my code... With jQuery, I used to be able to write a script where I could keep something like TourPoints neatly in a separate javascript file, then simply target DOM ids or classes to append elements.
$("#elementToWrap").wrap( "<div class='tourpoint'>Sticky note content goes here</div>" );
// $.append() or $.insertBefore() were also useful functions for this kind of thing
I am wondering how I might do a similar thing in React, and thought refs { useRef } might come to the rescue - but have not used refs before and can't quite get my head around if this is the right approach, or whether I am barking up the wrong tree with this.
The idea would be able to reference a ref globally (?) so that i can simply append the TourPoint to the element from a separate js/jsx file (sorry, no code example, as I really don't know what this would look like...)
The ease of having my TourPoints managed from a central file for the application what i am trying to achieve. The application has multiple pages and use React-Router.
Any pointers on how to think about this problem in the 'React' way would be most welcome.
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.
I am trying to create a component which displays a code example for a given component. The component shall be passed as HTML to the code-example component and be rendered once normally but also have its code displayed below.
When trying to fetch the code from <ng-content> in ngOnInit, Angular already started rendering the component, which means that I do not get the original code between the tags.
Passing the code via input does not work out, as the components may use single and double quotes which will cause problems when binding the data.
What I also tried is passing the code escaped to the component like
<code-example>
<component></component>
</code-example>
To unescape it and render it afterwards, which did not work out for me as I had trouble adding this pre-defined element to the DOM in a way that Angular renders it as a component.
Are there any other methods of dealing with this problem that I might be missing?
As #Timothy suggested you may try the <pre> tag.
If you also want to highlight the syntax of your code I can recommend a third party module called ng2-prism.
This is a library that supports multiple languages and is quite easy to use.
I'm using react-native and for a component I need to replace the default image of the SliderIOS component with a custom one. Is there any way of accomplishing this or should I create a custom slider component? (I don't have any experience in this.)
I have already tried embedding an image as a child of the slider as well as the vice-versa approach, however non of them have worked.
Looking at the source code for RCTSliderManager, we can see that it only exposes value, maximumValue, minimumValue, minimumTrackTintColor and maximumTrackTintColor. That means like it looks like you're out of luck. You could use the RCTSlider and RCTSliderManager files as a starting point for a custom component, or you could create a pull request to expose setThumbImage on UISlider.
I have created a pull request fixing this issue which hopefully gets accepted.
Since there is a distinct possibility that I'm doing something wrong, I'd like to describe what I'm attempting to accomplish, in case there is a better way of doing it.
Platform: Windows 8 app using Navigation Template for HTML5/WinJS.
I have a few PageControls that query for data and use d3.js to visualize the resultsets.
I have another PageControl(dashboard) that uses a WinJS.UI.ListView to provide links to those pages/graphs. Currently, I'm using some static images in the ListView. What I'm trying to do is access the graph pages and present a "smaller" version of the graph on the selection screen.
Some of the things I've tried:
- iFrames do not appear to scroll (and the results look pretty ugly).
- I haven't been able to figure out how to do a screen shot programatically (this would be the best option, because I could then use the same technique when sharing the graph using the sharing contract).
- I've tried doing a Page.render, but it only seems to work if I have the call to my draw() function somewhere within the html page. In other words, it doesn't appear the the ready() function is being called as part of render. So, I've moved the drawing code into the html (which I really do not like), and that seems to work OK.
What I'd like to do is to move the draw function back to the Page.define and call it from a one line script in the html (unless there is a better way), but I haven't been able to get the correct syntax figured out.
I'd appreciate any pointers on the syntax or advice on better ways to accomplish the task in general.
I would suggest just putting the drawing code in a separate .js file that you can reference from anywhere in your app. Set it up like the following:
WinJS.Namespace.define('My.App.Namespace', {
drawingFunction: function () {
//code goes here
}
});
Save that to a file called drawing.js and include it in your default.html. Then you can call My.App.Namespace.drawingFunction() from either html or javascript.