I'm new in reactjs.
In jsx, some syntax is different from HTML
for example
html jsx
class -- > className
onkeypress --> onKeyPress
onclick --> onClick
I want to know where can I find the comparable (reference) table to know which word to use?
Thank you!
for -> htmlFor and class --> className are the only special reserved javascript-to-HTML names I am aware of.
Other special event names can be found here:
http://facebook.github.io/react/docs/events.html#supported-events
Related
https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
I know that we can use css classes for the className attribute but I see in a lot of tutorials that even if the value written for className is not used in the css file it is still used in the components. Can someone explain why? Or how to determine the value of the className we need to use?
The HTML class attribute (as set by the React className attribute) is a general way to label elements with some meaningful labels. It can be used for CSS styling, or JavaScript queries like document.querySelectorAll, or just to make the HTML intent more readable.
In particular, it's common to include classes in your HTML in case you'll need them later for CSS styling or JavaScript queries. To be clear, there's no list of valid class names; you can use whatever names you want, and use or not use them in order code as you wish.
I'm reading the react JS documentation and came across this:
Specifying Attributes with JSX:
You may use quotes to specify string literals as attributes:
const element = <div tabIndex="0"></div>;
I'm fairly comfortable with javascript but I'm not quite sure what the documentation means by "attributes". I know about object properties but this looks like a simple variable.
What exactly is a react js attribute if it is different from a property?
html elements have both attributes and properties
there are a few different scenarios for how they relate to each other. There doesn't necessarily have to be both an attribute or property for each value set on an element.
1. attributes
attributes can be set in html
<a id="mylink" href=""/>
where href is an attribute
or attributes can be set by using the set attribute method of an element
document.getElementById("mylink").setAttribute("href", "")
and read using
document.getElementById("mylink").getAttribute("href")
2. properties
properties can be set and read by retrieving the element as well
document.getElementById("mylink").href = ""
where href is a property
when they are set the first way, you are setting the attribute, the second sets the property.
Usually the underlying element attribute and property are
automatically synchronized, sometimes they are not.
Sometimes there is no matching attribute or property,
only one or the other exists.
Attributes and properties are part of native html elements, which React provides additional support and abstractions around.
Custom React components (such as <MyComponent prop=""/> or <MyComponent prop={someVar}/>), which you create yourself, accept props using the same syntax. The word props in this context refers purely to React props. React custom component props are just plain javascript values passed into your component. These custom components don't get added to the page. They are used to organize and render actual html elements.
When mounting a native component inside of a custom component (such as <div id=""/> or <div id={someVar}/>), the React library sets the underlying html attribute on the native browser element.
So there are two things to keep in mind here
html element attributes verse html element properties.
custom element props are neither of those, but setting a prop on a JSX
native element such as a div, set's the generated element's
attribute.
Now that's been established, the documentation above is saying: if you want to set an attribute value to a string you can use that specific syntax. That syntax only works for setting attribute values to strings.
You can use either:
<div id="myid"/>
or
<div id={'myid'} />
to set a string attribute value. They're probably just pointing out the syntax differences.
if you do:
<div tabIndex="0"/>
the value of tabIndex is the string 0 not the number zero
verses this:
<div tabIndex={0} />
which will pass the number zero to the tabindex attribute of the underlying html element
To me if we pass any parameter in function component then what we diclare in html is properties.But if you use (className/style/etc...) directecly in html then it will be attributes.
Working on a pre existing React JS project and the className attribute does not render in the DOM what is defined.
For example - here is what code looks like in the project:
<div className={styles.intro_inner}></div>
Here is the output in the DOM:
I'm expecting the class name "intro_inner" to appear within the DOM.
Within JSX, the syntax attribute={variable} on a component means that the attribute will be set with the value of the given variable, not it's name. I would assume that your code has an object named styles which has an attribute named intro_inner whose value is some random mash of characters that you see output in the inspector.
If you want the class to be set as "intro_inner" then you need to set it as a string, not a variable. The syntax for that would be className="intro_inner".
I am currently learning React and Redux. I have forked a boilerplate, and currently I am looking through all of the code to see how it fits together.
While scanning through some React Component files I found something very interesting! When setting className for many of the elements the syntax they use differs. The first time they use the following syntax:
<span className={classes['counter--green']}>
...
</span>
Then this syntax:
<button className='btn btn-default'>
...
</button>
And from there on out they use the following:
<h2 className={classes.counterContainer}>
...
</h2>
At the top of the file they import classes with the following:
import classes from './Counter.scss'
So simply my question is, why are there three different syntax for className, and which one is correct?
Starting with the simple case:
<button className='btn btn-default'>
This just sets the class name to "btn btn-default". You need to set className instead of class since you are writing JSX and that’s equivalent to setting the className DOM property, so you have to use className here.
<span className={classes['counter--green']}>
<h2 className={classes.counterContainer}>
These are both very similar. In JSX, to specify a more complex JavaScript expression, you need to put it inside curly braces. This would be equivalent to setting the className property like this:
someSpan.className = classes['counter--green'];
someH2.className = classes.counterContainer;
Finally, classes as imported using the import classes from './Counter.scss' syntax is a feature called “CSS modules”. It involves a precompiler step that properly sets the class names later and makes sure that the style definitions are rendered to the HTML.
So to answer your final question, all of these are correct. What you want to use depends on where you want to define your styles (or where they are defined). Using CSS modules makes a lot of sense if you are creating independent components that might even get reused elsewhere. Using global CSS is good when you have an existing style sheet which you just want to use (e.g. here, these class names are likely from bootstrap). And of course, you can also mix these, if you have global styles and want to add additional styles to it.
In this case, without seeing the code, i'm guessing the boilerplate is using modular css (scss).
modular css can be imported,in this case as classes. Using modular css gives you css with local scope
all css rules imported from a module as classes are prefixed with the name classes.
and are to be treated as you treat object attributes
so css rule counterContainer is used as
classes.counterContainer
css rule name counter-green cannot use dot notation(because of the hyphen), so must use square bracket and string name notation as for any javascript object attribute
classes['counter-green']
the third example btn btn-default is not imported from a css classes module but is instead imported globally. This is possibly a bootstrap class imported at root level as a link attribute on the index.html
This isn't really unique to className, but for any JSX you can use curly braces {}'s to switch from "JSX mode" back to javascript to use any JS expression. Therefore in the first example they are setting the attribute className by referencing an object called classes by the property counter--green, in the second example they are using a simple JSX string literal 'btn btn-default', and in the third example they are referencing the classes object by the property counterContainer. You can see the definition of the classes object according to the import at the end of your question.
They are all correct, they are simply different ways of doing it. By using JS expressions they are arguably more modular, by using a string literal it is easier to see in front of you what is going on, but less re-usable.