I'm new to React material-ui. I used their guide and created simple Appbar (same as theirs). However, my appbar looks different than theirs:
My Appbar:
It should've looked like this:
https://codesandbox.io/s/m3m1x5qxw8
I have installed npm install #material-ui/core
I have added Roboto fonts to my index.html in the head part.Here is a screenshot of my index.html
My code is literally same as their code, only changed the function name. However, this AppBar is located under this:
<div> // it is the root div
<Header2/> // the appbar
Their color is not the same, their font is not the same.
What did I do wrong?
As it turns out I shouldn't be using react material-ui and react-bootstrap together:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
I intend to use react-material-ui, but for those who wants to use both of them together, if you have a solution, please share it :)
Related
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.
I am working on creating a web application using react js and material ui,
but I am not getting responsiveness in the app.
This is the code in my head tag:
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Righteous|Roboto" rel="stylesheet">
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App</title>
</head>
If you use the npm for installing the material-ui there is no need for hardcoding any scripts or CSS link at the index file. the installed module via npm will handle all injections.
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
if you are insisting to not use the npm , include the following at the index head tag
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
a very simple code-sandbox which copy-pasted form material-ui examples shows that it works correctly and fully responsive,
in that sample, you can see that the Grids are responsive and get stacked at reducing the page size.
I am new in web developing and I just finish my first website: www.aviakassir.az
But I face the problem when try to open my website on mobile device. Some part of my header not diplayed at all (contact and languages line on top). Menu is splitted into two parts and search script located down the image.
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
<meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aviakassir</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/jquery-customselect.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/assets/revolution/layers.css">
<link rel="stylesheet" href="css/assets/revolution/navigation.css">
<link rel="stylesheet" href="css/assets/revolution/settings.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
What I missed here? Here how my page looks in mobile Chrome:
Check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
#media only screen and (max-width: 767px)
.header-top-left {
display: none;
}
set display: block;
I want to add a favicon to my react application but it doesn't seem to working.
Tried the below:
add the code to the index.html file in the head section
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
Also placed the icons in the same folder as index.html. Could you please let me know where the problem persists.
Thanks.
Remember to add %PUBLIC_URL% to all your href attributes in index.html
For example;
<link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
That should fix your issue.
I am currently working on a React single page application and I cannot figure out where and how to place the Bootstrap CDN in my project for my bootstrap to work.
Also if somebody could suggest how to npm install bootstrap for your project.
If you use create-react-app there is a file in public/index.html or let's say in your index html page which you first render use cdn there
like
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>React App</title>
</head>
CDN
<HTML>
<head>
<!-- YOU CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body></body>
</HTML>
npm
npm install bootstrap#3
require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.
Bootstrap's package.json contains some additional metadata under the following keys:
less - path to Bootstrap's main Less source file
style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
npm install --save bootstrap
after this import this in App.js
import 'bootstrap/dist/css/bootstrap.min.css';