How to activate Material Design JS? - javascript

import {MDCTextField} from '#material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
#import "#material/textfield/mdc-text-field";
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
I'm learning to work with Material Design. I thought it worked like bootstrap, meaning there is a CDN and then you just add the classes you need, so I got the CDN from this link:
https://material.io/develop/web/docs/getting-started/
After I added the CDN I got the css working, but not JavaScript. In the instructions it says:
…and instantiate JavaScript:
mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
How do I instantiate Javascript?
I tried to put this code between script tags, but that didn't work. I think I'm missing some code here.
Update: The JS CDN seem to work but in each compenente I get an instruction for JavaScript Instantiation for example in this link:
https://material.io/develop/web/components/input-controls/text-field/
import {MDCTextField} from '#material/textfield'; const textField =
new MDCTextField(document.querySelector('.mdc-text-field'))
My question is where do i insert this code for the component to work.

you need to add mdc.{component}.MDC{component} instead if you use cdn
const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<label class="mdc-text-field mdc-text-field--filled">
<span class="mdc-text-field__ripple"></span>
<span class="mdc-floating-label" id="my-label-id">Hint text</span>
<input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
<span class="mdc-line-ripple"></span>
</label>

Please also mention how your code looks like right now.
Based on your question, it seems like you may have missed to mention script tag with material design URL in your HTML head tag. Add following code and see if it helps.
<head>
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>

Because the browser doesn’t understand ES6 modules just yet, we need tools to make them work today. A JavaScript bundler takes in our Modules and compiles them into a single JavaScript file or multiple bundles for different parts of your application.
There are few popular bundlers like webpack, Browserify, Rollup, JSPM etc.
In your case, you are just starting off on how to use modules, you may face difficulties implementing boilerplate for importing modules ES2015 way.
However, you may want to clone Material Design repo because it gives you boilerplate that enables to you to use import module function right away, this will be straight forward and clear to you
https://codelabs.developers.google.com/codelabs/mdc-101-web/#1
Prior to get started on this, you need to install GIT, Node, and NPM on your machine.
Clone their starter repo and cd into cloned directory
git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter
Now, install all the dependancies listed in package.json with following command
npm install
and then run
npm start
it should start up development server. Now you can change index.html and create or change existing js files according to your requirement

For React users, make sure that you put the instantiate code in the Mounting phase, which means put new MDCTextField(Element) in the componentDidMount() function.
import './textfield.scss';
import React from 'react';
import { MDCTextField } from '#material/textfield';
export default class TextField extends React.Component {
// initialize the component after all DOM elements are well rendered
componentDidMount() {
const textfield = new MDCTextField(document.querySelector('.mdc-text-field'));
}
render() {
return (
<label className="mdc-text-field mdc-text-field--outlined">
<span className="mdc-notched-outline">
<span className="mdc-notched-outline__leading"></span>
<span className="mdc-notched-outline__notch">
<span className="mdc-floating-label" id="my-label-id">Your Name</span>
</span>
<span className="mdc-notched-outline__trailing"></span>
</span>
<input type="text" className="mdc-text-field__input" aria-labelledby="my-label-id"/>
</label>
);
}
}

I think the CDN JavaScript source might rely on jQuery in order to run. If my assumptions are correct, you will need to add a script tag referencing jquery before you load the material.io scripts.
jQuery CDN

Related

Can I run index.html with React without npm start and npx create-react-app?

I am self-learning react and I am just confused about a lot of things.
I thought that if I add React to my index.html via a script like the below:-
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bill Details</title>
</head>
<body>
<div id="billTable"></div>
<script src="BillTable.js" type="text/javascript"></script> ------------- Problem Line 1
</script>
</body>
</html>
and this is my js file where I am trying to return react component
//BillTable.js
import React from "react";
import ReactDOM from "react-dom";
function BillTable() {
return <h1>HELLO TABLE</h1>;
}
ReactDOM.render(<BillTable/>, document.getElementById("billTable"));
when I try to open index.html directly in firefox or through express server I get the below error in console:-
Uncaught SyntaxError: import declarations may only appear at top level of a module.
I then got rid of this error by changing the script type in problem line 1 in index.html to
<script src="BillTable.js" type="text/babel"></script>
but then also my webpage is completely blank and even console is not showing any errors.
Please suggest how to solve this issue. I am right now trying to learn React with functional approach only, so if any changes are required to be done on the react side, please make them in the functional approach.
I don't think you have included the correct packages to handle React components and JSX yet. These packages react, react-dom, etc. are usually in a package.json and are required to tell the browser what tools will be used to run the code. These packages handle the "script" or components you create and places the elements constructed in your components to the DOM. You can solve this by loading react with additional script tags before your component's script tag. This will let the browser know how and what to use to run your react component. Also, in your function, it does not know that it is a React Component. Check out an explanation for why you would have to use React.createElement I have attached an example of using only an index.html page here:
example of using an index.html page
Your Component file:
"use strict";
function BillTable() {
return React.createElement("h1", "", "HELLO TABLE");
}
const domContainer = document.querySelector("#billTable");
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(BillTable));
and your index.html:
<body>
<div id="billTable"></div>
<!-- Load your React packages -->
<script
src="https://unpkg.com/react#18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"
crossorigin
></script>
<!-- Load your React component. -->
<script src="BillTable.js"></script>
</body>

Adding a react component to a vanilla JS file

I am currently aiming to make a weather widget work by using an npm module https://react-open-weather.gitbook.io/project/. This is a React component, which is something I have never worked with before.
I've taken the CDN's provided by the npm module, but other than that I don't know how to somehow "enable" my JS file to read the React component, or how I can integrate it. I've tried this link (https://reactjs.org/docs/add-react-to-a-website.html) previously to asking the question on here but stuff started breaking (see code snippet further below).
The problem is that I don't know how to work with React I managed to mess it up. This is why I'm turning to you now: Anyone with React experience who could help me out here?
The following react component is how I need to load the today weather data by city name:
<ReactWeather
forecast="today"
apikey="bdb591c14b9e4a079623b1a838313888"
type="city"
city="Copenhagen"
/>
My project is built with vanilla JS, so I would need help integrating this component into my file.
<head>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-
icons.min.css"
type="text/css"/>
</head>
<body>
<section id="weather">
<div class="weather_component_container"></div>
</section>
<!-- npm module for weather -->
<script src="node_modules/react-open-weather/lib/js/ReactWeather.js"></script>
<!-- Load React -->
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component -->
<script src="weather.js"></script>
<script src="script.js"></script>
</body>
I got the following started code from https://reactjs.org/docs/add-react-to-a-website.html and replaced it with my DOM element, which is #weather
And this is the error I get in the console: "The "data" argument must be one of type string, Buffer, TypedArray, or DataView. Received type object"
weather.js
'use strict';
React.createElement(ReactWeather, {
forecast: "today",
apikey: "bdb591c14b9e4a079623b1a838313888",
type: "city",
city: "Copenhagen"
});
ReactDOM.render(
document.getElementById('weather')
);
By default, JavaScript don't understand JSX syntax. You may miss this document:
https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx
Please add the script and try again
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
Note: don't use this script in production because it may slow your app. To use in production, refer to the doc https://reactjs.org/docs/add-react-to-a-website.html#add-jsx-to-a-project

React with Babel without Node

I'm creating a React application without having to use npm or yarn, just want it to work by opening page.html file.
I have this code in both files, cockpit.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.css" type="text/plain" rel="stylesheet">
<script src="https://raw.githubusercontent.com/cockpit-project/cockpit/master/src/base1/cockpit.js" type="text/plain"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" type="text/plain" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js" type="text/jsx"></script>
<title>Cockpit Test</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="cockpitTest.jsx"></script>
</body>
</html>
and cockpitTest.jsx:
"use strict";
const rootElement = document.getElementById('root')
class CockpitTest extends React.Component {
componentDidMount() {
console.log("asd")
}
render() {
return (
<div>
<h1>test</h1>
</div>
);
}
}
function App(){
return(
<div>
<CockpitTest name="Test"/>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('rootElement'))
but still I'm getting a blank screen when h1 text is expected. Console doesn't say anything either, it's just blank. Any help would be appreciated!
You have lots of problems
Content-Type
You've set type attributes on all your script and link elements to tell the browser that the CSS and scripts are in formats it doesn't understand. Don't do that.
Only the JSX file itself (in your last <script>) should have a type attribute.
Github is not a hosting service
You are trying to host the cockpit files on raw.github.com. This is not designed to be used as a CDN and returns data with the wrong Content-Type header. Use a real hosting service.
URL
You named the file cockpit.jsx but said src="cockpitTest.jsx"
Missing element
You said document.getElementById('rootElement') but also id="root". These do not match.
You are working without Node.js
The developer tools for React use Node.js to compile it for production-level performance. There's very little reason to not use them all the way through the development process.
First make it a javascript file .js
Then you can either:
Change:
rootElement = document.querySelector('#root'));
AND:
ReactDOM.render(<App />, rootElement)
OR:
ReactDOM.render(<App />, document.querySelector('#root'))
AND:
Delete your constant.
I even got React Router to work, but had problems when it came to separating components out into files for a tidy structure. Couldn't get imports to work inside app.js. Seems like Babel should have helped with imports and exports, but I couldn't get it to work.
Firstly - on your script type your using type "application/babel". This is not a valid media type, you probably want to use "application/javascript". This could be why nothing is displayed.
Secondly - the script you're using is not valid JS, you're using JSX which browsers cannot understand. JSX is what allows us to write html-like tags in JavaScript (the < /> for example). You would either have to write JS instead of JSX, or transpile your JSX using a transpiler such as babel. I would suggest running a compiler such as babel.
Read more about JSX here.

Integrate Salvattore inside my Aurelia application

I tried to integrate Salvattore (Masonry alternative in CSS) inside my Aurelia app but unfortunately it doesn't work. After trying a lot of things I'm disappointed and think maybe it is not possible at all to have Salvattore working inside an Aurelia app.
Here is what I did: I created a new Aurelia project thanks to the CLI au new and inside this project I created an html page inside my Aurelia project with this code:
<div id="grid" data-columns>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
<div>Item #4</div>
</div>
With this css:
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }
At first, I tried simply to reference Salvattore's js code inside my index.html page (just above the close body tag) like this:
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height />
</head>
<body aurelia-app="main">
<script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
<script src="javascript/salvattore.min.js"></script>
</body>
</html>
It doesn't work, I got errors in the console.
I also tried to install Salvattore through npm install salvattore --save and I add it in the aurelia.json. In main.ts I tried to reference it: import 'salvattore'; but it doesn't work neither. I mean, no errors this time but nothing happened. Finally I tried to inject the Salvattore js script directly inside my page at the end thanks to the scriptinjector component. Once again, it dosn't work, nothing happened.
Do I have to draw the conclusion that Salvattore is simply not compatible with any Aurelia projects ? In that case, do you know any alternative ?
Below sample codepen using Salvattore in a basic html page (not Aurelia)
https://codepen.io/mitour/pen/wWMOvw
You have to understand cli bundler is an AMD bundler. Your <script src="javascript/salvattore.min.js"></script> is below vendor-bundle, so an AMD loader (requirejs/systemjs) is already in place when browser reads salvattore.min.js. That's why salvattore tries to load itself as an AMD module instead of creating a global var.
You can move salvattore.min.js to above vendor-bundle script tag.
Or using prepend in aurelia.json, add salvattore before requirejs in the prepend list.
The other thing you can try is to use it as a module. Don't add script tag in html, don't add it prepend. But add this line in your main.js or main.ts.
import "salvattore"; // this will load it as an AMD module
Here is the solution:
In package.json add "salvattore": "^1.0.9"
In aurelia.json add "salvattore"
In your typescript page (.ts):
import * as salvattore from 'salvattore';
export class MyPage {
attached() {
salvattore.init();
}
}

Unable to import one Svelte component into another

I've been really intrigued by Svelte when I went through the documentation yesterday, but I'm struggling to set up even a pretty basic project and I can't seem to figure out what I'm doing wrong.
I'm starting out with the following HTML :
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
Then, I create the following App.html component :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
export default {}
</script>
I run svelte compile --format iife App.html > App.js, and everything works fine.
So far, so good!
Now, I create a Line.html component with the following content :
<div class="line">{{value}}</div>
<script>
export default {}
</script>
I modify my App.html component like this :
<div class="app">Hello {{name}}</div>
<div class="lines"></div>
<script>
import Line from './Line.html';
export default {
oncreate() {
const line = new Line({
target: document.querySelector( 'lines' ),
data: {
value: 'test'
}
});
}
}
</script>
I would expect this code to add something like <div class="line">test</div> to the DOM as a child of <div class="lines"></div>.
However, I get the following warning when I compile this code :
No name was supplied for imported module './Line.html'.
Guessing 'Line', but you should use options.globals
And when I try to run the compiled code, I just get the following output in my console :
App.js:250 Uncaught ReferenceError: Line is not defined at App.js:250
index.html:10 Uncaught TypeError: App is not a constructor at index.html:10
What am I doing wrong here?
Note
I also raised this issue on Github.
Copying the answer from GitHub:
svelte-cli works on individual files — you would need to compile Line.html separately, and include it on the page like so:
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='Line.js'></script> <!-- one for each component! -->
<script src='App.js'></script>
<script>
const application = new App({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
It will guess that Line.js is defining a global variable called Line, which is how App.js is able to reference it — but it prefers that you're explicit about that, by using the --globals option.
Needless to say, this is a huge pain — it doesn't scale at all past a certain point. For that reason we recommend that you use a build tool with Svelte integrated. That way, you don't have to worry about juggling all the different imported files, and as a bonus Svelte is able to generate more compact code (because it can deduplicate some helper functions between components).
The easiest way to get started — and I keep meaning to write a very short blog post about this — is to click the 'download' button in the REPL. That will give you a basic project setup that you can get running with npm run dev and npm start. Under the hood it uses Rollup to create a bundle that can run in the browser.
Here's your test app running in the REPL. Notice that the way we use the <Line> component is by declaring it using components, and just writing it into the template, rather than manually instantiating it with oncreate.

Categories