I'm trying to use Foundation with React, but I'm experiencing some problems regarding dynamic creation of interactive content.
Here is some coffee script code which shall create a data-dropdown but I think the problem is more general so that it's independent of the code.
render : ->
a href : '#', "data-dropdown" : 'drop',
'Dropdown link text'
div id : "drop", "data-dropdown-content" : true, className : "f-dropdown content",
p 'Dropdown content text'
Normally, one could call the Foundation function on dynamically created HTML nodes, but I don't think that this harmonizes with the spirit of React.
Is there a best practice for this case? Or should I switch to React-Bootstrap?
I also tried to invoke the foundation method on the DOM nodes, but beside the fact that it doesn't work, it would be plain ugly.
You're probably not going to want to use foundation or bootstrap javascript in your reactjs code. It usually doesn't work at all. Moving to react-bootstrap like you have is probably the way to go,
http://react-bootstrap.github.io/
Here's a pretty awesome react resource to help find other react components if you need something specific,
http://react-components.com/
Related
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
I am learning on React JS and I have got information on JSX and babel. But I am not getting clarity on how these are helping React and how these or differ from each other
React JS
while building an app using React, you can create the components/views in two ways
using standard React object and methods
using JSX
JSX
JSX is a separate technology from React and completely optional while building React application, however it makes life much easier when you combine JSX with React.
Let's see how :
Approach 1 : standard React way
(function() {
var element = React.DOM.div({}, "Hello World");
ReactDOM.render(element, document.getElementById("app"));
})();
The above code can be found at this link.
Here, you just need to include the react and react-dom library to your page.
Nothing else is required. No JSX, no Babel.
Approach 2 : JSX way
(function() {
var HelloWorld = React.createClass({
render : function() {
return (
<div> Hello World </div>
);
}
});
var element = React.createElement(HelloWorld, {});
ReactDOM.render(element, document.getElementById("app"));
})();
The above code can be found at this link.
Note the difference here: <div> Hello World </div> is used inside JavaScript. This is called JSX syntax.
Now, compare the JSX approach with the vanilla JavaScript approach:
With JSX, You can add many more HTML like elements inline, just like standard HTML, to create the view layer.
Without JSX, the code can get messy because of the multiple layers of elements required to create HTML in JavaScript.
Babel
Now the question is, who understands JSX?.
Here We need a transpiler that understands JSX and converts it to a format that can run on browser. Babel does just this job.
Transpiling
Transpiling can be done two ways
Browser based/client side transpiling (use only for development
purpose)
include this file as a script tag
use type="text/babel" on your script tag which loads your JSX
Here's the sample code
Server based transpiling - e.g. Babel
You can use different tools like webpack etc.
Here's some sample code.
Hope this helps.
tl;dr;
JSX is an easy syntax to represent markup in your code, which Babel converts to pure JavaScript.
Long version:
JSX is a syntactical convention which aims to make element structure definition easier in a React Component's code. This XHTML-like syntax which you write inside your components gets converted into JavaScript (not very different from Hyperscript) by Babel.
A very simple Hello World component written in JSX:
class HelloWorld extends Component{
render(){
return <div><h1>Hello World!</h1></div>
}
}
And the equivalent in pure JavaScript:
class HelloWorld extends Component{
render(){
return React.createElement(
"div",
null,
React.createElement(
"h1",
null,
"Hello World!"
)
);
}
}
Do note that the above example is abbreviated to keep the focus on the JSX part.
You would soon learn that Babel actually lends a lot more power to the React world than mere JSX transpilation. It allows you to use a lot of cool new ES6/7 features right now.
React Developer Tools give a lot of power to inspect the React component tree, and look at props, event handlers, etc. However, what I'd really like to do is to be able to inspect those data structures in the browser console.
In chrome I can play with the currently selected DOM element in the console using $0. Is there a way to extract React component info from $0, or is it possible to do something similar with the React Dev Tools?
Using React Developer Tools you can use $r to get a reference to the selected React Component.
The following screenshot shows you that I use React Developer Tools to select a component (Explorer) which has a state-object callednodeList. In the console I can now simply write $r.state.nodeList to reference this object in the state. Same works with the props (eg.: $r.props.path)
An answer to your question can be found here in a similar question I asked:
React - getting a component from a DOM element for debugging
I'm providing an answer here because I don't have the necessary reputation points in order to mark as duplicate or to comment above.
Basically, this is possible if you are using the development build of react because you can leverage the TestUtils to accomplish your goal.
You need to do only two things:
Statically store the root level component you got from React.render().
Create a global debug helper function that you can use in the console with $0 that accesses your static component.
So the code in the console might look something like:
> getComponent($0).props
The implementation of getComponent can use React.addons.TestUtils.findAllInRenderedTree to search for match by calling getDOMNode on all the found components and matching against the passed in element.
Open console (Firefox,Chrome) and locate any reactjs rendered DOM element or alternatively execute js script to locate it:
document.getElementById('ROOT')
Then check for element properties in object property viewer for attributes with name beginning like '__reactInternalInstace$....' expand _DebugOwner and see stateNode.
The found stateNode will contain (if it has) 'state' and 'props' attributes which is used heavily in reactjs app.
Though the accepted answer works, and is a great method, in 2020 you can now do a lot of inspection without using the $r method. The Components tab of React DevTools will show you props and detailed state when you select the relevant component (make sure you're on the right level), as well as let you do other things like suspend it or inspect the matching DOM element (little icons in the top right).
Assign the state or prop object to the window object:
window.title = this.state.title
And then from the dev tools console you can try different methods on the exposed object such as:
window.title.length
8
You can attach a reference to the window object like
import { useSelector } from "react-redux";
function App() {
// Development only
window.store = useSelector((state) => state);
return (
<div className="App">
</div>
);
}
export default App;
Then access it from the console
store
{states: {…}}
states:
someProperty: false
[[Prototype]]: Object
[[Prototype]]: Object
[Console][1]
[1]: https://i.stack.imgur.com/A4agJ.png
I need to create some forms non-linked to entities.
I pretty understood how create my builders, but when I try to use them, I am pretty confuse, and I don't really find examples in the online doc of Symfony 2.0
To go into the details: I create a "Multiple choice question" form. So I created:
a "class ResponseType extends AbstractType"
a "class MCQType extends AbstractType", which uses my class ResponseType
a file "forms.html.twig", which includes templates for my "responsetype_widget" and for my "mcqtype_widget"
My aim is to be able to customize the labels and play with them in this template (like add div with uniqueID, etc), specially the itemization when I add a new item: I would know how to change the "0", "1", "2", etc in "Bad answer 1", "Bad answer 2", etc.
Currently, I do it with JQuery, in the client-side. But when I submit my form, and an error appears, my created items appear with the "0", "1" ; generated by the server-side.
Here are screenshot to have a better view of the situation:
Modified by JQuery (sorry not enought reputation to post images)
Generated by Symfony 2
I really would customize these labels on the server-side, or in my "class MCQType extends AbstractType", or from the mcqtype_widget in forms.html.twig
I tried a lot of stuff that I found in the doc, but nothing works and I feel desesperate to mofify that from the JS instead of the server-side.
Is somebody have a good example?
Thank you by advance. And if any good tutorial is realeased about manipulate collections, I would really help me!
What you need to do for customizing those labels is to redefine the template block to include your modification.
To do so, you'll need this part of the documentation :
http://symfony.com/doc/2.0/cookbook/form/form_customization.html
I would also advise you to play with that in order to get familiar with the form collection :
http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/forms/collections
Don't hesitate to go deep inside to see how they are doing.
PS: if you need to hide those labels, you need to pass 'show_legend' => false, inside the field options
One particular problem I was having was using ${word_selection} in an Eclipse PDT template.
I was recently trying to use some code templates with Eclipse PDT 2.1 to speed up some common tasks. We use a lot of getters/setters, so I wrote the following template.
function get${word_selection}() {
return $$this->getData('${word_selection}');
}
function set${word_selection}($$${word_selection}) {
$$this->setData('${word_selection}', $$${word_selection});
}
I named the template "getset" and the only way I know to use the Code Assist is to type: "getset" then hit my code assist keys (I have it set to Esc, but I think the default was Ctrl+Space). The problem is, this doesn't actually let me select a word to be used by the ${word_selection}.
how do I type in my template name, hit the key combo, and have a word selected all at the same time?
I also want to know what kinds of templates people have set up and any other tips for using templates to speed of programming.
Look at this link : http://2tbsp.com/node/104
It describes two things : pdt code templates and code snippets.
how do I type in my template name, hit the key combo, and have a word selected all at the same time?
I think this cannot be achieved with code templates, but with code snippets. Personnally I do not use them at all, but I might start :-)