i have heard that two way binding is not free in react.
from this i understood that if we add an input field and type some text inside it shouldn't reflect pressed keys.
but with hooks(App1.js) or without hooks(App2.js) input field behaving the same, it reflects the typed text. can someone tell me the difference between the following codes( App1.js, App2.js).
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<div id="root"></div>
<script src="App1.js"></script>
<div id="root2"></div>
<script src="App2.js"></script>
</body>
</html>
App1.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App1 = ()=>{
console.log("nnn")
const [name,setName] = useState("hello")
return (
<div>
<label htmlFor="name">
</label>
<input
id = "name"
value = {name}
onChange = {(e)=>(setName(e.target.value))}>
</input>
</div>
)
}
render(<App1/>, document.getElementById("root"))
App2.js:
import React,{useState} from "react"
import {render} from "react-dom"
const App = ()=>{
return (
<div>
<label htmlFor="name">
</label>
<input
id = "name">
</input>
</div>
)
}
render(<App/>, document.getElementById("root2"))
why do we need hooks in this scenario ? when input in App2 is reflecting the typed text from keyboard.
i am new to react so kindly ignore my stupidity if i am being stupid.
There is no 2-way data binding happening there. On your App2.js you are using an Uncontrolled Component which is not bound to React but to the normal DOM.
Related
enter image description here
Like this i need to get. but binding the value from text field i have done. but parallel when user clicks on add button adjustable textbox with radio button need to create same time.
tried some logic for binding the value and displaying the data in the right side. but struck near the
when user clicks on add button adjustable textbox with radio button need to create same time. as look in the picture
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({value: e.target.value});
}
render() {
return(
// <div id="content">
<div className="container">
<div id="left">
<div className="box">
<label className="label">compose question</label>
<input className="input is-medium" type='text' id='input' value={this.state.value} onChange={this.handleChange} />
</div>
<label className="label">MULTIPLE CHOICE OPTION</label>
</div>
<div id="right">
<p className="input-value"> <span className="highlight">{this.state.value}</span></p>
</div>
</div>
// </div>
);
}
}
export default App;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css.map'><link rel="stylesheet" href="./style.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script src="./script.js"></script>
</body>
</html>
I am trying to use altmetrics in one of the my article (PDF) in my website.
I tried to add the altmetric badges (here) to in reacts js but I could not manage.
Here is my trial:
First I tried to create a component and add to the page
class DownloadPDF extends Component {
render() {
return (
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi={"my-doi-number-here"} class="altmetric-embed"> </div>
Download PDF
</div>
);
}
}
The second is I tried to put in the page directly:
<div>
<script type="text/javascript" src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"></script>
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="my-doi-number-here" class="altmetric-embed"> my-crosreff-doi.pdf</div>
{<DownloadPDF />}
</div>
Can someone know how can I put altmetrics badges correctly in reactJS?
Thank you all answers.
For seeing the Altmetrics result in your page first you should add:
altmetrics external javascript file
<script type='text/javascript'src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
2.
You should add your DOI wherever you want to display
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
so this is for adding to html page but when you add in ReactJS web app we have a tiny problem.
Problem is adding external javascript file to in ReactJS page that you want to display the Altmetrics badge
So solution is we need to install an addition library that allows us to implement any external javascript file.
Check the link:
https://github.com/shaneosullivan/ReactDependentScript/
We need to add below code in your ReactJS page
...
render() {
return (
<div>
<ReactDependentScript
loadingComponent={<div></div>}
scripts={['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']}
>
<div></div>
</ReactDependentScript>
...
</div>
);
}
}
then you can add your the Altmetrics badge wherever you want in the page like this
<div data-badge-details="right" data-badge-type="medium-donut" data-doi="doi-numberhere" class="altmetric-embed"></div>
I think all you need to do as described https://api.altmetric.com/embeds.html
that you put the js script in any where in html , but react is virtual dom , so all you need is put in puplic in index.html in <body> under <div id"root"></div>
or like you named. just simple as that
There are two things you are missing
Adding the script to index.html file underpublicdirectory (if you have created your app usingcreate-react-app`)
<!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, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<!-- Here we go with the external script -->
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
</body>
</html>
Change the class attribute to className in dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
// changed class to className
<div className='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
</div>
);
}
}
export default App;
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.
I'm trying to follow a react tutorial but it's not working. Here's the code:
// load react library
var React = require('react');
var ReactDOM = require('react-dom');
/*
App
*/
var App = React.createClass({
render: function(){
<div className='catch-of-the-day'>
<div className='menu'>
<Header />
</div>
</div>
}
});
var Header = React.createClass({
render : function() {
return(
<p>Header</p>
)
}
});
//build first component
/*
StorePicker
*/
var StorePicker = React.createClass({
render : function(){
var name = 'Bob';
return (
<form className='store-selector'>
{/* comments go here */}
<h2>Please Enter A Store {/* {name} */}</h2>
<input type="text" ref='storeId' required/>
<input type="submit"/>
</form>
)
}
});
ReactDOM.render(<App/>,document.querySelector('#main'));
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Catch of the Day!</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/build/css/style.css">
<link rel="shortcut icon" href="http://facebook.github.io/react/favicon.ico">
</head>
<body>
<input type="checkbox" id="fold">
<label for="fold">Fold</label>
<div id="main">
<!-- This is where our React app will go -->
</div>
<div id='new'>
</div>
<script src="/build/main.js"></script>
</body>
</html>
and here's the error message:
Uncaught Error: Invariant Violation: App.render(): A valid ReactComponent
must be returned. You may have returned undefined, an array or some other
invalid object.
Your App#render doesn't return anything. More or less what the error message says.
Contrast App#render with Header#render.
Unrelated, but you might want to follow a more-recent tutorial; createClass is deprecated.
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.