I am trying to create a simple component in React where I am trying to use Google's MDL from here https://getmdl.io/started/index.html , so as they state I need to link the CSS from their server , I would like to know where should i do this. I tried it adding it to main index.html and refer to style in component but seems like its not being used.
What should be the proper way to do this ?
I am a novice at React stuff.
Component code
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
New button
</button>
</div>
);
}
}
export default App;
This is index.html
<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
You have to use className instead of class to refer to css classes in React because class is a reserved word in ES6 and with JSX you are writing Javascript and not HTML. For example:
<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
New button
</button>
Related
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
I am using vantajs wave library and my issue is how do i get the waves to continue to render on a CSS selector after I click through the tablinks of my react app?
The first error I get is on Brave browser when it says:
"three.r92.min.js:28 Uncaught TypeError: Cannot read property 'precision' of null"
and doesn't render the wave at all initially.
However, if i go to Google Chrome and look at the background of my selected element there is the wave effect that I implemented provided by https://www.vantajs.com/?effect=waves#(backgroundAlpha:1,color:2105474,shininess:30,waveHeight:15,waveSpeed:1,zoom:1)
But then, after I switch from the home tab to another tab, then come back to home (where my selected element is), the wave effect is no longer behind the selected element as it says:
"vanta.waves.min.js:161 [VANTA] Cannot find element .showcase__container
Here is my HTML:
<meta charset='utf-8' lang="EN-US">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="./src/three.r92.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.waves.min.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>DigitalWebFlex</title>
</head>
<body>
<div id='root'></div>
<script type='text/javascript' src='/dist/bundle.js' charset='utf-8'></script>
<script>
VANTA.WAVES('#showcase__container');
</script>
</body>
And my React:
<div className="showcase__container" id="showcase__container">
<button className="button button--animated button--white" onClick={this.setPagePortfolio}>Portfolio</button>
</div>
Thanks in advance!
hey you can install vanta using npm i vanta
and include three.js in the head
and then
import React from 'react'
import WAVES from 'vanta/dist/vanta.waves.min'
class MyComponent extends React.Component {
constructor() {
super()
this.vantaRef = React.createRef()
}
componentDidMount() {
this.vantaEffect = WAVES({
el: this.vantaRef.current
})
}
componentWillUnmount() {
if (this.vantaEffect) this.vantaEffect.destroy()
}
render() {
return (
<div ref={this.vantaRef}>
/* Foreground content goes here */
</div>
)
}
}
This should help, You can refer to this page and Vanta.js README for a better understanding
I am trying to apply material design ripple effect to a button but on the browser I see no ripple effect applied to the button,
The code that is using the ripple is,
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
I have tried the below but none of them work,
mdc.autoInit(); // after the above code
MDCRipple.attachTo(document.querySelector('.mdc-button'));
I am not using node for bundling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="masterCSS.css" rel="stylesheet" type="text/css">
<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">
btn_ripple = document.querySelector('.mdc-button');
mdc.ripple.MDCRipple.attachTo(btn_ripple);
mdc.autoInit();
MDCRipple.attachTo(document.querySelector('.mdc-button'));// does not work
const foo = new MDCFoo(document.querySelector('.mdc-button'));//does not work
</script>
</head>
<body>
<div class="header">
</div>
<button class="mdc-button mdc-button--unelevated" style="margin-left: 50%;">RIPPLE</button>
</body>
</html>
The button doesn't exist at the time that the script runs.
Wrapping your script on a window.addEventListener('load', function(){ [...] }) is the first step to fix it.
Second, you have a <script> with a src attribute and then with code.
You can't mix both.
Just write a <script src="..."></script> and then open a new <script> with the inline code.
Note: this answer assumes that all files loaded properly.
Add matRipple in button tag and import MatRippleModule,
You also change the MatRippleColor
eg:
<button matRipple [matRippleColor]="'#cad1f7'">RIPPLE</button>
i'm new in react.js, i used CDN links to compile some simple react.js code into my html, but i get this error:
"Uncaught SyntaxError: Unexpected token <"
then i searched and i saw somebody said that i should add:
type="text/babel" or type="text/jsx"
to my script tag, i did, but after that, my html didn't know my .js file!
this is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> title </title>
</head>
<body>
<div id="app"> </div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"</script>
<script type="text/babel" src="myreact.js"> </script>
</body>
</html>
and this is my react.js file:
'use strict';
class MyComponent extends React.Component{
render()
{
return "hello";
}
}
ReactDOM.render(
<MyComponent/> , document.getElementById('app')
);
please help me to code in react.js.
If you are using CDN, first two you need are to render React into a DOM and the third one (babel) enables JSX and ES6. I have reordered the imports, have included cdn for babel after importing react and react-dom.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
'use strict'
class Application extends React.Component {
render() {
return(
<div>React App</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
I'm stuck on something very simple and can't seem to figure out what I'm doing wrong. I've created a blank project in ionic and would like to set a default home screen as the first view loaded. I'm staring at a blank screen when I run this in the browser.
My code is as follows:
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app = angular.module('starter', ['ionic'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('home_screen', {
url:'/',
templateUrl: 'home_screen.html'
})
})
home_screen.html
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Home Screen</h1>
</ion-header-bar>
<ion-content>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<button class="button button-block button-balanced">Play</button>
</div>
<div class="spacer" style="height: 100px;"></div>
<div class="col col-33 col-offset-33">
<a class="button button-outline button-block button-balanced" href="#/app/about">About</a>
</div>
</ion-content>
</ion-pane>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
home_screen.html will work just fine when I include it in the index.html but does not work when I try to set it as the default view. I tried following the tutorial from here:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
Any help would be appreciated.
Actually you have to uncomment the ion-nav-view in your index.html file. You don't have to give that a name even. Try to add this in your index.html file:
...
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
...
To get started with ionic I also recommend to look at other starter projects like tabs or sidemenu which are described here.