The margin is different between <button> elements depending on if its rendered by react or if it's just plain old html. Plain old html adds a small margin between the buttons, while react completely removes it.
Does anyone know why these are different? And is there a way to bring back that default margin in React?
Details
Here is the result from a simple react app created with create react app at 500% zoom:
I took the source html that react generated, copied it, and put into another index.html file that I opened on my browser. Again at 500% this is what it shows:
Note there is no additional CSS that is added. The developer tools look exactly the same.
Steps to replicate:
React
Create a react app with npx create-react-app <some name>
Remove all css from generated index.css
Use the following jsx in the index.js file:
<React.StrictMode>
<button>Vanilla</button>
<button>Vanilla</button>
</React.StrictMode>
Plain Html
I copied the html that was rendered in the browser from the react app and pasted it into a separate index.html file. The html looked like:
<!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="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<button>Vanilla</button>
<button>Vanilla</button>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>
Thanks to G-Cyrillus, we found out that the problem occurs because react is minifying the html. So the jsx:
<React.StrictMode>
<button>Vanilla</button>
<button>Vanilla</button>
</React.StrictMode>
once minified, turns into:
<button>Vanilla</button><button>Vanilla</button>
The solution I found to keep the gap is to write the jsx like this:
<React.StrictMode>
<button>Vanilla</button> <button>Vanilla</button>
</React.StrictMode>
Related
I have a Vue/Webpack application that uses an external-referencing, embedded CSS link in my index.html file. It looks something like:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
...
</head>
If I run npm run build in the project directory, the resulting dist/index.html file will contain this link.
However, I am deploying my project in a Docker container. At the end of that container building process, this CSS link and others like it will be gone in the generated index.html file, causing several elements on my page to break graphically.
What settings in the webpack/Docker config could cause this to happen?
I have found the solution - it seems that my Dockerfile included a copy of the src and resources folders for the working directory, but not the public folder which contained the favicon as well as the base index.html. This meant that the index.html that was autogenerated as part of npm run build would never take the above lines of code into account.
Normally in production and development using webpack this works fine. But when I attach the react code to just a regular HTML it doesn't mount itself. Why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,width=device-width" />
<title>Sit</title>
</head>
<body>
<div id="modal-hook"></div>
<div id="backdrop-hook"></div>
<div id="root">444</div>
<script>
// Copy pasted React bundle here
</script>
</body>
</html>
A simple React app would load from html page. Check this example.
Whereas a full fledged app not only need just react bundle files. You should add all it's necessary dependencies like chunk/css/vendor files with all the required polyfills. And the main bundle file might be having relative file references with in that.
After all it's a set of JS files after bundling the code. If you add all it's necessary dependencies in the correct format, it will load without any issues.
I have finished editing the css file and saving it
but my css file doesn't work and doesn't change the display at all
and css files are also not loaded
but after I renamed the css file, everything work properly
css file loaded and the display changes
is there something wrong with the structure of my folder?
or is there something wrong with my coding?
my custom css is
<link rel="stylesheet" href="../style/index.css">
and this is my head tag
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="../style/index.css">
<link rel="stylesheet" href="../css/pace.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../css/fontawesome.css">
<title>Dashboard • Sistem Pakar</title>
</head>
my folder structure
act/
|---.....
|
assets/
|---.....
|
css/
|---.....
|
js/
|---.....
|
lib/
|---.....
|
style/
|---index.css
|
app/
|---index.php
If you are facing the issue that you are changing the css code but changes are not reflecting on browser. Its because browser cache your css and do not reload it from server (files). To manually reload it you need to:
Reload page by pressing ctrl+F5
Use some extension to clear cache of your browser
rename css file name so that browser can load new file
use some task runner like grunt etc to uglify and rename your css
you can try any of above method for you convenience
One trick that is useful to know about is the "disable cache" browser function.
As it sound, it disable caching while DevTools is open.
More information here : https://stackoverflow.com/a/7000899/4614064
Also, if you use Webpack or Gulp, you can use hashing to output a different filename so the browser has to reload it properly. In development, "disable cache" within the browser should be enough.
The web browser's or web server's cache is the reason for what is happening,
You can use a string after your css file like this and after every change, you can change the version and it will work.
<link rel="stylesheet" href="../style/index.css?ver=1.0.0">
Please note that the query string (the portion of the uri after ?) can be anything, as long as it is a valid query string and different each time you make a change.
I just installed this Create React Apps program from here https://github.com/facebookincubator/create-react-app and I have all the files downloaded and I am able to edit the App.js file, but I already have made some html files for a website, I want to know how to link the App.js file to my current files. The html on the given Index.html, shows no <script> element used. Here is the full html code:
<!doctype html>
<html lang="en">
<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">
<!--
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">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Inside your project run
npm run build
This create the folder "/build" with the "index.html" file. Inside this you can see how all this magic is done. You can put your other/old stuff also there.
I'm not entirely sure what you are asking, but you can have normal html/css on the same page as React. React is rendering the App component in the div id="root" section of the page. Elsewhere, you can just paste your old html stuff and it should work.
Its been a little while by now, that I have been trying to understand MVC. I do understand the basics now and I also noticed, themes or css files can be added to a MVC site. When I try to do this, it seems my CSS file is not being found. This is the head of my _Layout.cshtml code:
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>#ViewBag.Title - Bierownie</title>
<link href="#Url.Content("~/Content/Earthlingtwo/style.css")"
rel="stylesheet" type="text/css" />
</head>
I am not really sure what I should put at the link tag. I noticed that in the other (standard auto-generated(Razor)) _Layout.cshtml file, something like this was being used:
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
But it seemed that the code wouldn't understand if I put that same bit of code in the Layout's head, from which I want to use. I also tried to search on the web and I think it had something to do with the config file, although I'm not sure. A red curve would appear beneath Styles and Scripts.
If anyone could tell me how I simply could link a css file in a newly created layout file, I would be able to go further with my MVC site.
I am also not so sure if this question has already been asked and/or solved, so please let me know, as I couldn't find any answers.
As you can see in this picture:
There's a config file which will break the theme. Someone else noticed it and it did cause a problem.
You can just Drag&Drop css file from solution explorer to your layout page.
Bundle uses better. Try this:
ASP.NET - Using Bundle and Minification in ASP.NET MVC 4 and ASP.NET Web Forms 4.5
In your question, the path to style is noted as Content/Earthlingtwo/style.css, where in your graphic it's Content/Earthlingtwo/images/style.css. In the Earthlingtwo folder, is a site.css file Content/Earthlingtwo/Site.css
You need to correct your href to the correct path
<link href="#Url.Content("~/Content/Earthlingtwo/images/style.css")"
rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Content/Earthlingtwo/Site.css")"
rel="stylesheet" type="text/css" />
depending on which is the correct file.