I am newbie in Polymer projects, I have installed polymer 2.0 starterkit, everything works fine except iron-icon. It doesn't display icon when i run project.
<!-- Load the Polymer.Element base class -->
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
<dom-module id="my-iconsset-view">
<!-- Defines the element's style and local DOM -->
<template>
<style>
:host {
display: block;
padding: 16px;
}
</style>
<h1>My Iconsc</h1>
<iron-icon icon="icon:menu"></iron-icon>
<iron-icon icon="input"></iron-icon>
</template>
<script>
// Your new element extends the Polymer.Element base class
class MyIconssetView extends Polymer.Element {
static get is() { return 'my-iconsset-view'; }
}
//Now, register your new custom element so the browser can use it
customElements.define(MyIconssetView.is, MyIconssetView);
</script>
</dom-module>
Import <link rel="import" href="../bower_components/iron-icons/iron-icons.html"> instead of just iron-icon.
Also, you don't have to mention icon="icon:menu", just icon="menu" is fine, unless you have defined your own iconset and named as 'icon'.
The iron-icon element is used for displaying an icon.
iron-icons is a utility import that includes the definition for the
iron-icon element, iron-iconset-svg element, as well as an import
for the default icon set.
Related
I'm kinda new to ReactJS and don't even know if it's possible but I want my react app to be working in the browser from the .html file. without the need for calling the server and have it, working, only that way. ( I don't mind having a server to serve it obviously) just need to be able to have by calling the .html file
the public/index.html file:
<head>
<meta charset="utf-8">
<script src="/my_library/my_library.min.js"></script> <!-- needed for the project in the same folder the index.html is -->
<title>Demo</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`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
the index.js (in src folder):
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
The App.jsx in the src folder
import * as React from 'react';
import './App.css';
import { MyContainer } from './components/MyContainer/index';
class App extends React.Component {
render() {
return (
<div className={ 'App' }>
<header className={ 'App-header' }>
<h1 className={ 'App-title' }>
</h1>
</header>
<MyContainer />
</div>
);
}
}
export default App;
PS: I have been able to add React to my file... But this particular component that I want to add only works with NPM Start. and as you can see in the index.html file shown above is says
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
which is exactly what I aim to change. if any one can provide some guidance or help about this, would be much appreciated.
If you just want to use React within an HTML file within a browser maybe you could just include the React library with a script tag as well as your custom React scripts with script tags as well. Their documentation has a nice example of just using React within an HTML file. I created a Codebox with their sample example for this below where the like button is using react. However, if you want to use JSX syntax you will have to use Babel, to transpile JSX into native JavaScript, and link the library like such:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
create_react_app gives you a lot of bells and whistles so you don't have to worry about setting up build configurations using tools such as webpack, babel, eslint, etc.. but this meant to give you a head start on building out an application so you can focus on the application itself and not configuration settings. Behind the scenes it's using webpack-dev-server to serve up your application, but for your use case I think it would be best to just add React as a script tag to an existing HTML page
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
Hopefully that helps!
I am learning react and nextjs, and am faced with a problem where the bootstrap css is overriding my own css.
Here is my code
index.js
import Head from "next/head";
import Navbar from "../components/PrimaryBtn";
export default () => (
<div>
<Head>
<title>Testing</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
/>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
/>
</Head>
<PrimaryBtn color="blue">click<PrimaryBtn />
</div>
);
PrimaryBtn.js
import React from 'react';
import styles from './PrimaryBtn.css';
export default const PrimaryBtn = (props) => {
return (
<div>
<button className={`btn btn-primary ${styles[props.color]}`}>{props.children}</button>
</div>
);
}
PrimaryBtn.css
.blue {
background-color: blue;
}
This background-color is overridden by the bootstrap class because the bootstrap cdn is rendered after my styles is there any work around to solve this.
I was facing the same issue. I fix it by changing the import of the bootstrap.
Instead of importing this: import "bootstrap/dist/css/bootstrap.css";
I import the Bootsrap CSS in the Head of _app.js like:
<Head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</Head>
code screen shot for help
If you were to put a console.log(styles) in your PrimaryBtn render function, I assume you would see null or undefined. CSS is not understood by JavaScript, importing it into your JavaScript code only serves the purpose of ensuring that Webpack (or similar) includes it in your bundle. You only need to include the name of your class in your className, I believe className={`btn btn-primary ${props.color}`} is what you're looking for.
//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/babel"></script>
<div id="content"></div> //show the content of component here
</body>
</html>
//js code
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
File directory structure:
package.json:
I want to show "hello world"in the html page without webpack to babel nor online files,because i use npm tool download react,react-dom and babel to node_modules,then i use "import React from 'react';"to import what i need,but see nothing in the page,i can't know why
If you are creating a bundle file from all your js files using webpack,provide a path to that bundle file in your script tag and place the script tag below the div with id=content
Hey bruh but what is that <div> tag for?
It doesn't describe anything.
First make some content in your <div>
for example:
<head>
<style>
.container {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
This is just a example,but for js use <script> tag.
<script>
import {render} from 'react-dom';
import React from 'react';
class Calculate extends React.Component {
render() {
return <p>Hello, world!</p>;
}
}
render(<Calculate />, document.getElementById('content'));
</script>
Whoops I made a mistake, REALLY gave there this, it was written on my starter notes And i have saw it and though it is ok.Sorry. ;-)
I am trying to use jumbotron in my Angular 2 sample project but its not all rendering anything .
I have used updated CDNs in index.html :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
my app.component looks like
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: `mytemplate.html`,
})
export class AppComponent {
}
mytemplate.html looks like
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Tutorial</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
but it is not getting rendered. It keeps showing loading appcomponent content here . Do i need to install any external packages to get it running . I am using Visual Studio Code. Thanks in advance
I'm trying to render a small search bar onto my website, but what I see is that it is still existing in the website, but its size becomes 0x0, and I can't find anything wrong with my ES6 code. Can someone debug for me please?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<title>React-Redux-Learning</title>
</head>
<body>
<div id="container"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
<script src="/bundle.js"></script>
</html>
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import searchBar from './components/searchBar'
const youtubeAPIKey = '...'
const App = () => {
return (
<div>
<searchBar />
</div>
)
}
ReactDOM.render(<App />, document.getElementById('container'))
searchBar.js:
import React, { Component } from 'react'
class searchBar extends Component {
constructor(props) {
super(props)
this.state = {term: ''}
}
render() {
return <input onChange={event => console.log(event.target.value)}/>
}
}
export default searchBar
First of, you have defined your component as <searchBar\>. I guess React is not able to see it as JSX Component and is embedding it as a plain html tag instead, as evidenced by the <searchbar\> tag seen in Elements tab of chrome.
I think what you need is, to figure out why react is not able see searchBar as a JSX component. I hope this leads you to the right direction.
OK my boss actually found it out, it's the problem about CAPITALIZING the variable names. After I cap the first letter of the variable names things are working again...
Your search bar code works fine. Check your CSS to make sure that your body has a size.