"html.format.wrapAttributes": "force-align" not work on jsx.
I would like format
<RenderView key="1"
className="hah"
data="data"
/>
to
<RenderView key="1"
className="hah"
data="data"
/>
How to did it?
VS Code does not use the html.* formatting settings for jsx out of the box.
Please try using one of the alternate JavaScript formatted extensions on the marketplace, such as react-beautify, for this formatting style
Related
Currently, in React I write my css in css modules. However, I also use the font-awesome library which uses normal css.
So my question is there is a way to use a normal css and css module on the same selector?
<i className={classes.icon} + "far fa-user" />
Thanks to ES6 syntax, you can write it like this:
<i className={`${classes.icon} far fa-user`} />
If you completely understand how React works, you will be putting it this way:
<i className={classes.icon + " far fa-user"} />
The classes.icon will be the className string and along with it, you have to add other classes.
I am using a headless CMS(Strapi) and React on the frontend. I would like to render code blocks with highlighting using PrismJS (or anything).
In my render():
<div>
<pre>
<code className="language-css">{`p { color: red }`}</code>
</pre>
<h2>{this.state.title}</h2>
<div dangerouslySetInnerHTML={{ __html: `${content}` }} />
</div>
The code wrapped with <pre> tags serves as an example of what I'm trying to do.
The problem is that since I'm using the Strapi CMS, the code block not recognized by PrismJS. Here's how it's rendered:
The top part is the code directly written in my component while the bottom is returned from the CMS. In the WYSIWYG of the CMS I have the following <pre><code class="language-css">p { color: red }</code></pre>
Is there a way that I can write content with text and code and have the code highlighted properly?
This seems like a similar issue: React : Rendering a syntax highlighted code block
This solved my problem: https://github.com/akiran/react-highlight
Be sure to set your CSS in index.html and I added the following in my project:
<Highlight language="javascript" innerHTML={true}>
{content}
</Highlight>
Works perfectly! Hope this helps someone.
I have a ChipInput like this. I want to show a hint text when it's empty.
<div className={classes.headline}>
<ChipInput
hintText='Type anything'
onChange={this.handleTagChange}
/>
</div>
But my browser gives this warning.
Warning: React does not recognize the hintText prop on a DOM
element. If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase hinttext instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
As per the ChipInput Readme, it should work. Am I missing something here?
Had a look at the code and found placeholder which worked!!!
<div className={classes.headline}>
<ChipInput
placeholder='Type anything'
onChange={this.handleTagChange}
/>
</div>
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}
I'm trying to render the following component:
function deviceready() {
ReactDOM.render(
<div class="container">
<h1>Hello <small>World</small></h1>
<button class="button-primary" onclick="initFacebook()">Login with Facebook</button>
</div>,
document.getElementById('frame')
);
}
...With the reactify gulp plugin. However the attributes don't get compiled. class="container" and class="button-primary" and onclick="initFacebook()" do not appear in my generated HTML.
I'm aware that custom attributes are not supported but these are attributes defined by HTML spec. Any ideas what I'm doing wrong?
Notice the differences pointed out in Facebook's JSX in-depth article.
class should be className
Also notice the Event System; the prop names don't match up exactly with the HTML attribute names
onclick should be onClick