Hello in my react js project I include <link> 's of blueprint.js library but browser does not recognize them. Instead I import them in index.js file then it works. Can someone briefly explain why browser does not recognize them?
index.html
<link rel="stylesheet" type="text/css" href="./src/index.css" />
<!-- add other blueprint-*.css files here -->
<link href="./node_modules/normalize.css/normalize.css" rel="stylesheet" />
<!-- blueprint-icons.css file must be included alongside blueprint.css! -->
<link href="./node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="./node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet"/>
index.js
import 'normalize.css'
import '#blueprintjs/core/lib/css/blueprint.css'
import '#blueprintjs/icons/lib/css/blueprint-icons.css';
when i comment out of my import index.js web browser does not include links why?
node_modules won't exist when you build your project, so it is outside of scope. You would only be able to reference things from the index.html that are within the public folder or externally (like a CDN)
Related
I'm a beginner in React and has been working with the CDN links so far, I decided to remove these links and install the dependencies as it is better to work with, so I have tried to install the dependencies as instructed in the official website with npm install, and did so in my project repository, and after importing from react and react-dom the JS script doesn't work at all, and the console shows no errors, I tried a lot of fixes (including changing the source from index.js to index.pack.js), I also tried installing react using package control of Sublime Text, but nothing worked.
I don't think it's a code problem, but here are the index.html and index.js files :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="js/index.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
//import React from 'react'
//import ReactDOM from 'react-dom'
const React = require("react");
const ReactDOM = require("react-dom");
const element = <h1 className="header">This is JSX</h1>
console.log(element)
ReactDOM.render(
element,
document.getElementById("root")
)
The css folder and files are all in the correct place and so is the index.js so it's not a path error, I think it's most likely a dependency error but it can be something else, does anyone have an idea on how to fix this, thanks in advance!
Sorry for the late reply as I have kinda solved the problem on the spot :D, indeed Create React App was the way to go, it builds the application nicely and it manages dependecies as well. Thanks for your answers !
I'm starting to learn reactjs at the moment. I'm wondering how to add normal HTML-Tags in a react-app. Is i just possible to add them by using the render function or can I also just write normal HTML-Tags in my index.html file?
Cause when I'm doing so they're not displayed.
Just like:
const myelement = (<h1>some element</h1>);
ReactDOM.render(myelement, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root"></div>
<div>just normal html</div>
</div>
Well, it works just fine here.. so there must be something wrong with my build..
If you're starting out, I recommend you bootstrap your apps using npx create-react-app. It'll give you a good sense of what a React app could look like, and some pointers for file structure.
Most React apps have an index.html file, which you can use like any normal HTML file. But, for the majority of your app, it's recommended to write your content in JSX (otherwise, you aren't getting the benefits of using React in the first place).
JSX
JSX looks very similar to regular HTML, with a handful of key differences:
Tag attributes tend to be in lowerCamelCase (onChange rather than onchange)
Instead of class (which is a reserved keyword in JavaScript), you need to use className
An Example Component
I've borrowed this sample code from React's official tutorial, which you should definitely check out if you haven't already.
This is a class Component, and your JSX goes inside of the render method:
import React from 'react';
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
What goes in index.html?
The only essential part of index.html is a <div id="root"></div>, which React will use to append the rest of the JSX.
This is also the place to add the usual metadata and icons.
As an example, here's the index.html file that comes with create-react-app. For most of my projects, I leave this pretty-much as-is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<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" />
<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="%PUBLIC_URL%/manifest.json" />
<!--
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>
In any given React component, there can only be one parent/top layer html element. You can get around this by using <React.Fragment> ...the rest of your html ... </React.Fragment> (or <>...</> depending on your version) or simply add a wrapping <div> around everything. JSX doesn't distinguish between "normal" html and "React" html, it just turns the React stuff into normal html (over simplification, but close enough for this question). Try it again and let me know if you encounter any problems.
const reactElement = (
<div>
React stuff
</div>
);
ReactDOM.render(
reactElement,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div>
<div id="root">
</div>
<div>
just normal html
</div>
</div>
I am new to react. Could someone help me in adding favicon to react application. I have created favicon package and added generated code to index.html. But I am not knowing how this href to favicon to be specified.
Thanks.
You can add favicon.ico to public/images then enter the index.html and add the code.
<link rel="shortcut icon" href="./images/favicon.ico">
if you have your own image then simply change this line to your image address
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
just change the favicon.ico to your image name
<link rel="shortcut icon" href="%PUBLIC_URL%/coolImage.png">
If anyone is looking in 2021.
Place your image in the Public folder and change the following icons with your ones on the following page.
/pubic/index.html
<link rel="icon" href="%PUBLIC_URL%/youricon.svg" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/youricon.svg" />
Move your favicon image in public folder.
Rename in manifesto.json name of favicon.
Update link in index.html
just rename your image with favicon.ico in public directory and it will get that img as favicon icon for your react project.
Thank You.
File name changed as favicon.ico
To change browser tab Icon just get into index.html file then as follows :-
If your img is icon then follows the below syntax :-
<link rel="icon" href="./book_icon.ico" />
If your img is png/jpg then follows the below syntax :-
<link rel="icon" href="./book_PNG.png" />
I'm pretty new to this react/nodejs/bootstrap affair. I'm trying to make use of the reactjs-adminlte theme for bootstrap. I can get bootstrap widgets to work fine, such as buttons, but having trouble with this theme. The error I get is
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
My code is as follows
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=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`.
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<title>React App</title>
</head>
<body class="skin-blue sidebar-mini ">
<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`.
-->
<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
import Sidebar from 'adminlte-reactjs';
class App extends Component {
render() {
return (
<div className="App">
<Sidebar>
</Sidebar>
</div>
);
}
}
export default App;
Would love to know why i cant get the Sidebar to display. Its probably something simple that im missing.
Thanks
maybe you should change:
import Sidebar from 'adminlte-reactjs';
to
import {Sidebar} from 'adminlte-reactjs';
or:
import adminlteReactjs from 'adminlte-reactjs';
let Sidebar = adminlteReactjs.Sidebar;
<Sidebar>
</Sidebar>
I am trying to install the below:
npm install bootstrap-material-design
I then added the below to my package.json
"dependencies": {
...
"bootstrap-material-design": "0.5.10"
}
So in angular2 using webpack, how do I import? The docs for the package say the below and the package was installed in node_modules/bootstrap-material-design/:
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">
So in the head do I include via the below:
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/ripples.min.css">
Or will angular2 already include?
It's better you include in your main module file like in app.ts file:
// Just make sure you use the relative path here
import '../../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css'
import '../../node_modules/bootstrap-material-design/dist/css/ripples.min.css'
// your component (example code below)
#Component({
selector: 'app',
templateUrl: 'app.template.html'
})
And that's it. Webpack will take care of the reset.
Edit:
If you have created the app using angular-cli/ng-cli then you can also include these stylesheets to angular-cli.json