I installed bootstrap package with command:
meteor add twbs:bootstrap
And I made some example codes, but it does not work. Bootstrap style is not applied to button.
App.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<button class="btn btn-info">Button</button>
);
}
}
Could you help me, please? Thank you.
You should use className attribute instead of class.
Related
How can I use Font Awesome in React js? If i use it in my project it didn't show up. This is my code:
import React ,{Component} from 'react'
import './category.css'
import axios from 'axios'
import Course from './courses/course.js'
import Searchfilter from './search/search.js'
class Category extends Component{
state={
category :[]
}
componentDidMount(){
axios.get('data.json').then(res =>{this.setState({category:res.data.content})
})
}
render(){
return (
<div className="category">
<Course corses={this.state.category} />
</div>
)
}
}
export default Category;
There are multiple ways.
It seems for me that the easiest one is to add the font awesome CDN link,
in your 'index.html'
And use Font awesome as you would do with normal HTML
You can just add your CDN link in the HTML page and then use it as you use it in your normal HTML but remember here class attribute is not allowed, you should use className.
You should have jsx code like <i className="fast fa-home"></i>
Add this (CDN link ) in the head of the index.html file :
<script src="https://kit.fontawesome.com/f7b906a276.js" crossorigin="anonymous"></script>
and start using the icons like normal html tags :
<i className="fas fa-tachometer-alt"></i>
Or you can install font awesome package from npm ,
I suggest to follow this tutorial from fontawesome website : Font Awesome with react tutorial
Essentially, I want to generate a QR Code in a ReactJS application. I found a generator on npm for React & React Native. Here is how they set it up on the npm site:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
Here is how I set up the page that will hold the QR Code:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
</div>
);
}
}
//ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
export default Profile;
I have the actual QRCode code commented out, as I'm not sure where to put it in the code so that it works & shows up on the page. When I put it anywhere inside the Profile class the line has red underlines stating that a ";" or ")" is expected (depending on where it's put I get ";" or ")"). I know I'm not missing either, so I'm pretty sure it comes down to where I'm putting the line of code to generate the QRCode.
I'm sorry if this is is an obvious question, I'm still pretty new to React.
Please let me know if you need any more information!
You can just use the <QRCode value="hey"></QRCode>. You also don't need dom library for this. So I've removed it.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey"></QRCode>
</div>
);
}
}
export default Profile;
Check out this live version to see it in action
https://codesandbox.io/s/billowing-butterfly-0dr39?file=/src/App.js
you can use it return itself it will work
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>)
Try this.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component {
render() {
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>
);
}
}
export default Profile;
I'm learning react and I'm trying to put in my personal project some CSS. I was searching for it and I found several ways to do so:
javascript
npm run eject
// and modifi the path [name]__[local]__[]
import Classes from '.../css/style.css'
//using this method
<link rel="stylesheet" src="./css/styles.css">
// in HTML file
//adding react glamor
Which is the correct way to do it?
Hi only import in the component for example
import './my-style.css'
and in the component jsx call clasname normally
<div className="my-class-css">
...
</div>
Like this:
import React, {Component} from 'react';
import './my-style.css'
class MyComponent extends Component{
render(){
return(
<div className="my-class-css">
....
</div>
)
}
}
export default MyComponent;
I have this class in a CSS file (TextBoxStyle.css) -
.CustomTextBox{
width: 100%;
border-radius: 4px;
height: 30px;
}
Then I am trying to use this in a React component -
import React from 'react';
import ReactDOM from 'react-dom';
import styleClass from './TextBoxStyle.css';
export class TextBox extends React.Component{
render(){
return (
<input className={styleClass.CustomTextBox}>
</input>
);
}
}
My project gets build successfully as I have installed all necessary loaders through webpack.
However, the class 'CustomTextBox' does not show up in my final html page.
Please let me know if I need to elaborate on any point.
Highly appreciate any help.
If you don't absolutely need to reference CustomTextBox, you could try importing the CSS directly like so:
import './TextBoxStyle.css';
Then change the className on the input like so:
<input className="CustomTextBox">
This question confused me a long time,in my own project every time I want to use Icon of antd,it doesn't work.I don't know what's wrong,who knows please tell me,I am greatly appreciated.
I find the problem,so foolish am I.I don't import the style,just add "import 'antd/dist/antd.css'; ".It's OK now,hoping this can help others new to antd like me.
#Tian, I was stumped by that as well. Your solution is exactly what worked for me. Here's some code that worked for me:
import React from 'react';
import Icon from 'antd/lib/icon';
import 'antd/dist/antd.css';
class Header extends React.Component {
render() {
return (
<div className='Header'>
<span className='Header__title'>Happen</span>
<a className='Icon' href='#' id='bangButton'>
<Icon type='exclamation-circle-o'/>
</a>
<a className='Icon' href='#' id='plusButton'>
<Icon type='plus-circle-o'/>
</a>
</div>
);
}
}
export default Header;
This problem arises due to the missing css file that is required to antd component
Either add statement import 'antd/dist/antd.css'; or create your own less file and import it.