👍 and 👎 codes work in plain html. How do I get them to work in react?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Like Click</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id='container'>
</div>
</body>
</html>
<script type='text/jsx'>
class Like extends React.Component{
constructor(props){
super(props);
this.state={liked:false};
}
toggle(){
this.setState({liked: !this.state.liked});
}
render(){
var name = this.props.name;
var txt = this.state.liked ? 'Like':'Unlike';
var weight = this.state.liked ? 'bold':'normal';
var color = this.state.liked ? 'green':'red';
var thumb = this.state.liked ? "👍":"👎";
return(
<div>
<span style={{fontWeight:weight,color:color}} onClick={this.toggle.bind(this)}> {name} {thumb}{txt} </span>
</div>
);
}
}
ReactDOM.render(
<Like name='Java' />,document.getElementById('container')
);
Related
I have a component with another child component and I am passing a JSON state variable of the parent component as prop to the child component, but when I modify the JSON in the child component the state variable of the parent is been modified too. It doesn't have sense beacuse it just happens with JSON props, but if i use strings, numbers or arrays it works good and child state variables are just modified.
These are my components:
class Child extends React.Component{
constructor(props){
super(props)
this.state={
test2: this.props.data,
}
this.changeTextField = this.changeTextField.bind(this)
}
changeTextField(e){
let data = this.state.test2
data['name'] = e.target.value
this.setState({test2: data})
}
render(){
return(
<div>
<input type="text" value={this.state.test2['name']} onChange={this.changeTextField}/>
</div>
)
}
}
class Parent extends React.Component{
constructor(props){
super(props)
this.state={
test: {name: "hola"},
editing: false,
}
this.edit = this.edit.bind(this)
this.cancel = this.cancel.bind(this)
}
edit(){
this.setState({editing: true})
}
cancel(){
this.setState({editing: false})
}
render(){
return(
<div>
{(this.state.editing) ?
<React.Fragment>
<Child data={this.state.test}/>
<button onClick={this.cancel}>cancelar</button>
</React.Fragment>
:
<React.Fragment>
<h1>{this.state.test['name']}</h1>
<button onClick={this.edit}>edit</button>
</React.Fragment>
}
</div>
)
}
}
$(document).ready(function(){
ReactDOM.render(<Parent/>, document.getElementById("app"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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>
</head>
<body>
<div id="app"></div>
<script src="parent.jsx" type="text/babel"></script>
</body>
</html>
This is how JavaScript works with Objects. They are always passed by reference and the others (strings, booleans, numbers as you mentioned) are primitives meaning they are immutable.
There are many amazing answers on SO already regarding these:
JavaScript by reference vs. by value
Is JavaScript a pass-by-reference or pass-by-value language?
How do we get around this?
In your snippet, where you say data['name'] = e.target.value you are still mutating the state object, which is surely a Not To Do in React. You can read upon Power of not mutating content in React Docs.
You could create a copy of the test2 and choose to mutate that instead:
const data = {...this.state.test2};
data['name'] = e.target.value
But there is a chance that this function gets called programatically, this will run into an error because setState is async. Instead it gives us a functional version to deal with:
this.setState(prevState => ({
test2: {
...prevState.test2,
name: value,
}
}));
Full Demo:
class Child extends React.Component{
constructor(props){
super(props)
this.state={
test2: this.props.data,
}
this.changeTextField = this.changeTextField.bind(this)
}
changeTextField(e){
const value = e.target.value
this.setState(prevState => ({
test2: {
...prevState.test2,
name: value,
}
}))
}
render(){
return(
<div>
<input type="text" value={this.state.test2['name']} onChange={this.changeTextField}/>
</div>
)
}
}
class Parent extends React.Component{
constructor(props){
super(props)
this.state={
test: {name: "hola"},
editing: false,
}
this.edit = this.edit.bind(this)
this.cancel = this.cancel.bind(this)
}
edit(){
this.setState({editing: true})
}
cancel(){
this.setState({editing: false})
}
render(){
return(
<div>
{(this.state.editing) ?
<React.Fragment>
<Child data={this.state.test}/>
<button onClick={this.cancel}>cancelar</button>
</React.Fragment>
:
<React.Fragment>
<h1>{this.state.test['name']}</h1>
<button onClick={this.edit}>edit</button>
</React.Fragment>
}
</div>
)
}
}
$(document).ready(function(){
ReactDOM.render(<Parent/>, document.getElementById("app"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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>
</head>
<body>
<div id="app"></div>
<script src="parent.jsx" type="text/babel"></script>
</body>
</html>
I am at requirement that I have build some ReactJs components but need to use them inside Custom HTML tags( just like normal tags )
I am trying to create a "Board" component which just displays a text "In board...". Now I am trying to use this in my HTML page as .
My board.js file:
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
My HTML page:
<html>
<head>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="board.js" type="text/babel"></script>
</head>
<body>
<Board />
</body>
</html>
tag must be treated like an HTML tag and should load React component and display the text "In board....".
In your case, you have to create using customElements API. You can use customElements.define Method to create your own but name should be hyphen separated.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
}
);
Below is the Working Example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<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>
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
});
</script>
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
ReactDOM.render(
<Board />,
document.getElementsByTagName('message-board')[0]
);
</script>
<script>
</script>
</head>
<body>
<message-board />
</body>
</html>
Creating a custom element and rendering React component to this custom element can be done as below. Assuming "Board" is an React component.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
A working solution to convert a simple React component to HTML Custom element
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<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 crossorigin src="https://unpkg.com/#webcomponents/webcomponentsjs#2.0.3/custom-elements-es5-adapter.js"></script >
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
</script>
</head>
<body>
<div>
<message-board />
</div>
<div>
<message-board />
</div>
</body>
</html>
How to import js file with code on Babel if i'm not using npm? I'm write my own server on Golang and serving html and js files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TODO APP</title>
</head>
<body>
<div id="root"></div>
<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>
<script type='text/babel' src="./js/App.js"></script>
<script type='text/babel' src="./js/Info.js"></script>
</body>
</html>
App.js
class App extends React.Component {
render(){
return(
<div>
<span onClick={() => {alert('clicked')}}>{Date.now().toString()}</span>
<Info />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Info.js
export default class Info extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: true,
};
this.handleClick = this.handleClick.bind(this);
}
render() {
const text = <label htmlFor="new-text">{this.state.isOpen ? 'Open' : "Closed"}</label>
return (
<div>
<button onClick={this.handleClick}>
{text}
</button>
</div>
)
}
handleClick(e) {
this.setState({
isOpen: !this.state.isOpen,
})
}
}
So i didn't know how to add Info to App. import didn't work cause i'm not using npm.
Import and export won't work. You need to add the script tags in proper order so that the dependencies are resolved.
index.html
<html>
<body>
<div id="app"></div>
<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>
<!-- Order is important -->
<script src="/info.js" type="text/babel"></script>
<script src="/index.js" type="text/babel"></script>
</body>
</html>
info.js
class Info extends React.Component {
render(){
return(
<div>
Hello World Info
</div>
)
}
}
index.js
class App extends React.Component {
render(){
return(
<div>
Hello World
<Info/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
how to create a page with two reusable components and third "controller" component that will provide two-way communication with the first two.
Component 1 & 2 will be simple text boxes that will show the text value character count next to them. Component 3 will be a read-only textbox that will show the sum of the counts of 1&2.
Below is the code for the same.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="app.jsx"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="container">
</div>
<div id="container2">
</div>
<input type="text" id="Final" name="finaltextbox"/>
<script type="text/babel">
var max_chars = 0;
var App =
React.createClass({
render: function() {
return (
<div> <TwitterInput /> </div>
);
}
});
var TwitterInput =
React.createClass({
getInitialState:
function() {
return {
chars_left: max_chars
};
},
handleChange(event) {
var input = event.target.value;
this.setState({
chars_left: input.length
});
},
render: function() {
return (
<div>
<textarea onChange={this.handleChange.bind(this)}></textarea>
<p> {this.state.chars_left}</p>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('container')
);
ReactDOM.render(
<App />,
document.getElementById('container2')
);
</script>
</body>
</html>
I Wrote A Peace Of Code Which If Works Expected To Get Profile Pic And User Name From GitHub API According To User Input. Console Also Not Showing Any Error.Can Any One Help Me Correct This Thanks In Advance .
This I What I Tried So Far
var Main = React.createClass({
getInitialState:function(){
return({
user:[]
});
},
addUser: function(loginToAdd) {
this.setState({user: this.state.logins.concat(loginToAdd)});
},
render: function() {
var abc = this.state.user.map(function(user){
return(
<Display user={user} key={user}/>
);
});
return (
<div>
<Form addUser={this.addUser}/>
{abc}
<hr />
</div>
)
}
});
var Form = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var loginInput = React.findDOMNode(this.refs.login);
this.props.addUser(loginInput.value);
loginInput.value = '';
},
render:function(){
return (
<div onSubmit={this.handleSubmit}>
<input type="text" placeholder="github login" ref="login"/>
<button>Add</button>
</div>
)
}
});
var Display = React.createClass({
getInitialState:function(){
return{};
},
componentDidMount:function(){
var component = this;
$.get("https://api.github.com/users/"+this.props.user,function(data){
component.setState(data);
});
},
render: function() {
return (
<div>
<img src={this.state.avatar_url} width="80"/>
<h1>{this.state.name}</h1>
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="container">
<div id="app"></div>
</div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</body>
</html>
JSBin Link
div do not have an onSubmit event form do however, fix that and you should be ok