I have quick suggestions and emmet enabled for javascript babel files.
I'd like it so that when a quick suggestion is made e.g. when I type V in the context below for it to select View - not for emmet to expand it into a jsx tag e.g. <View />
import { View } from 'react-native'
I would, however, like emmet to keep doing so for jsx tags that are scoped to a set of round braces e.g.
return (
View // expands to: <View />
)
You can currently do this in sublime text by using a package called Scope Selector which exposes meta values like: meta.group.braces.round.js given a selection. I can then use this value as a context for a keybinding.
When I inspect the scope in VSCode however, there doesn't seem to be anything specific that I could use in the when clause of emmet's Expand Abbreviation keybinding:
Can anyone shed some light on how I may go about doing this - if it's possible. Thanks.
Related
For example : with Tailwind:
<div className="md:hidden">Hello</div>
will result the div hidden after the breakpoint md - which after Tailwind doc , it is 768px;
I would like to be able to do the same, but for custom widths, so not 768px;
And I Don't want to write it in the CSS file and I dont want to modify Tailwind files.
I would like to be still inline . Is it possible?
Documentation
If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the min or max modifiers to generate custom breakpoint on the fly using any arbitrary value.
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
<!-- ... -->
</div>
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 see teacher in a tutorial of Reactjs he type : nav.navbar
and magically <nav className="navbar"></nav> appear. Can some one help me to explain it and how to do this. Thanks a lot
That is emmet notation.
At the basics, it will transform a selector: nav.navbar into the HTML (well, JSX) markup equivalent matching that selector: an element with a nav tag name with a class name of navbar.
How to do this will depend on your IDE. For VSCode, for example:
Go to Code (at the top of your screen), then Preferences, then Settings in VSCode
In the options on the left, select Extensions, then Emmet
Scroll to the Include Languages section, add in the item input, javascript and in the value input, javascriptreact and hit Add Item
For example you can usually write
div.classname{text}
and it becomes
<div class='classname'>text</div>
this works in intellij if you only write div.classname but once you add {text} it cant expand the expression anymore.
Anyone know how to fix this or is there another character than {} thats used when writing JSX?
Works fine for me in 2017.3.4 - div.classname{text} is expanded to <div class='classname'>text</div> as expected. What IDEA build do you work with? Curly braces in Emmet JSX are supported since 2017.3 - see WEB-28500
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.