I am trying to use react-bootstrap to style a web page.
package.json
{
"name": "chrome-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.16"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-bootstrap": "^0.31.5"
}
}
App.js
import React from 'react';
import { Button } from 'react-bootstrap'
function CheckState(props){
function handleClick(e){
console.log(props.state)
}
return(
<Button bsStyle="primary" onClick={handleClick}>Click for state</Button>
)
}
However this is what I'm seeing on the web page when I refresh:
It doesn't look like the styling is being added. What am I doing wrong?
Add import "bootstrap/dist/css/bootstrap.css"; in your index.js
In your react application, open index.js file and add import 'bootstrap/dist/css/bootstrap.css';
Related
I have created the react app using CRA (CREATE-REACT-APP). I have installed node-sass and renamed App.css to App.scss and updated its import in App.js. Now in my App.js, I am just trying to print some text inside a section.
This is the link the repo, I am talking about. For your reference
node -v v12.11.1 and npm -v 6.11.3
App.js
import React from 'react';
import './App.scss';
import Section from 'react-bulma-components/lib/components/section';
function App() {
return (
<Section>
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</Section>
);
}
export default App;
App.scss
#import 'react-bulma-components/src/index.sass';
package.json
{
"name": "just-trying",
"version": "0.1.0",
"private": true,
"dependencies": {
"node-sass": "^4.13.0",
"react": "^16.11.0",
"react-bulma-components": "^3.1.3",
"react-dom": "^16.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass-loader": "^8.0.0"
}
}
Instead of downgrading the version of node, I have uninstalled react-bulma-components and instead just installed bulma via npa like npm i bulma.. and that works fine.
I followed the tutorial in online video but I got an error code like this:
Failed to compile
./node_modules/#material-ui/icons/Menu.js Module not found: Can't resolve '#babel/runtime/helpers/builtin/interopRequireDefault' inb'C:\LocalServer\static-page\node_modules\#material-ui\icons'
This error occurred during the build time and cannot be dismissed.
This is the code I write:
import React, {Component} from 'react';
import AppBar from '#material-ui/core/AppBar';
import ToolBar from '#material-ui/core/Toolbar';
import MenuIcon from '#material-ui/icons/Menu';
import IconButton from '#material-ui/core/IconButton';
class Header extends Component{
render(){
return(
<div>
<AppBar position="fixed" style={{backgroundColor:'#2f2f2f',boxShadow:'none',padding:'10px 0px'}}>
<ToolBar>
<div className="header_logo">
<div className="font_righteous header_logo_venue">The Venue</div>
<div className="header_logo_title">MUSICAL EVENTS</div>
</div>
<IconButton aria-label="Menu" color="inherit" onClick={()=>console.log('open')}>
<MenuIcon/>
</IconButton>
</ToolBar>
</AppBar>
</div>
);
}
}
export default Header
From the tutorial said that I should rename the directory from #material-ui/core/Menu on line 4 to #material-ui/icons/Menu. But when I revert back to #material-ui/core/Menu, the code is running, the button works, but no icon appeared.
But, from the tutorial shows that the program is running, with the icons appeared on it.
It has a white hamburger button icon on the header
This is the error code when I try to change core/Menu to icons/Menu
This is the result when I changed back to core/Menu
EDIT: The package.json I have right now:
{ "name": "static-page", "version": "0.1.0", "private": true, "dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#material-ui/core": "^1.4.3",
"#material-ui/icons": "^1.1.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-reveal": "^1.2.2",
"react-scripts": "2.1.3",
"react-scroll": "^1.7.9",
"react-slick": "^0.23.1" }, "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" }, "eslintConfig": {
"extends": "react-app" }, "browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all" ] }
Found a MUI issue which states the exact same problem. The solution is to upgrade to #material-ui/icons#1.1.1.
Since you have #material-ui/icons#^1.1.0 as a dependency, deleting node_modules and running npm install again should be sufficient.
Have a go and try:
npm add #babel/runtime
Or upgrade babel runtime:
"#babel/runtime": "7.0.0-beta.55"
I get an error when i try wrapping my <App> with <Provder>, here is the code
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import reducer from './store/reducer';
const store = createStore(reducer);
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();
Here is the error i get after i use <Provider>:
And here is my package.json :
{
"name": "react-complete-guide",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.0.0",
"react-redux": "^6.0.0",
"react-scripts": "1.0.13",
"redux": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
In the end i realize this is probably related to a conflict of version in my package.json, but now matter how much i update each package i can't fix this, i also tried common fixes suggested in other threads with a similar problem but still no luck.
Thanks.
Update 01 :
App.js :
import React, { Component } from 'react';
import Counter from './containers/Counter/Counter';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Counter />
</div>
);
}
}
export default App;
How to pick the local path of image
Json
"avatarUrl": "avt1.jpg"
All the images are under src>img folder.
I am looking for absolute path + image name from json.
How I can achieve this
reactJs
<img src={require('./img/avt1.jpg')} width="60" />
Package.js
{
"name": "lummdb",
"version": "0.1.0",
"private": true,
"dependencies": {
"moment-timezone": "^0.5.14",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-fontawesome": "^1.6.1",
"react-scripts": "1.0.16",
"axios": "^0.17.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
}
Seems you are using create-react-app , try to add NODE_PATH=src in your environment variable , or append it to script alias
"start": "NODE_PATH=src react-scripts start",
If you are done, you can do the following :
<img src={require('img/avt1.jpg')} width="60" />
Then, if you are getting the name of image from json dynamically :
<img src={require(`img/${avatarUrl}`)} width="60" />
If does not work, consider to export NODE_PATH before :
export NODE_PATH=src;
npm start;
Move all of your images to the public/images.
JSON file:
{
"title": "something",
"image_link": "../images/yourfilename1.jpg"
},
{
"title": "something2",
"image_link": "../images/yourfilename2.jpg"
}
CardComponent:
const InfoCard = ({image_link, title}) => {
return (
<div>
<h3>{title}</h3>
<img src={image_link} alt={title} />
</div>
)
}
export default InfoCard;
I'm trying to figure out why a specific function is working with the alpha version of React Router but not the current v4 version
index.js
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Match } from 'react-router';
import NotFound from './components/NotFound';
const Root = () => {
return (
<BrowserRouter>
<div>
<Match exactly pattern="/" component={NotFound} />
</div>
</BrowserRouter>
)
}
render(<Root />, document.querySelector('#root'));
package.json
{
"name": "rbm-dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"material-ui": "^0.17.0",
"react": "^15.4.2",
"react-tap-event-plugin": "^2.0.1",
"react-dom": "^15.4.2"
},
"devDependencies": {
"react-router": "4.0.0-alpha.4",
"react-scripts": "0.9.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
NotFound.js
import React from 'react';
class NotFound extends React.Component {
render() {
return (
<h2>Not Found</h2>
)
}
}
export default NotFound;
When i switch the react-router version from 4.0.0-alpha.4 to ^4.0.0, i get the following errors
I don't have an issue using the alpha version, however I would like to figure out what the issue is so i can learn from it. Also if needed i can push the code to github if anyone wants to look at it locally.
Thank you
Because Match isn't a thing anymore. Change Match pattern to Route path and you should be good. Also, import everything from react-router-dom not react-router.