Wed Sep 21 2022 03:39:12 GMT+0000 (Coordinated Universal Time)
Saved by @joseleal #jsx
import { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom/client"; function App() { const [inputValue, setInputValue] = useState(""); const previousInputValue = useRef(""); useEffect(() => { previousInputValue.current = inputValue; }, [inputValue]); return ( <> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} /> <h2>Current Value: {inputValue}</h2> <h2>Previous Value: {previousInputValue.current}</h2> </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
#jsx
class Hello extends Component { constructor (props) { super(props) this.state = { visible: true } } }
class Hello extends Component { state = { visible: true } } }
React.createClass({ ... }) React.isValidElement(c)
ReactDOM.render(<Component />, domnode, [callback]) ReactDOM.unmountComponentAtNode(domnode)
MyCo.propTypes = { list: PropTypes.array, ages: PropTypes.arrayOf(PropTypes.number), user: PropTypes.object, user: PropTypes.objectOf(PropTypes.number), message: PropTypes.instanceOf(Message) }
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }, [count]); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
function ExampleWithManyStates() { // Declare multiple state variables! const [age, setAge] = useState(42); const [fruit, setFruit] = useState('banana'); const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); // ... }
class TodoList extends Component { render () { const { items } = this.props return <ul> {items.map(item => <TodoItem item={item} key={item.key} />)} </ul> } }
#javascript #reac #jsx
// will need a HTML page with "root" import React from "react"; import ReactDOM from "react-dom"; const date = new Date(); const currentTime = date.getHours(); const currentMins = date.getMinutes(); let greeting; const customSyle = { color: "" }; if (currentTime < 12) { greeting = "good morning"; customSyle.color = "red"; } else if (currentTime < 18) { greeting = "good evening"; customSyle.color = "blue"; } else { greeting = "good night"; customSyle.color = "puprle"; } ReactDOM.render( <h1 className="heading" style={customSyle}> {currentTime + ":" + currentMins + " " + greeting} </h1>, document.getElementById("root") );
import React from 'react'; function App() { function refreshPage() { window.location.reload(false); } return ( <div> <button onClick={refreshPage}>Click to reload!</button> </div> ); } export default App;
const React = require('react') class Upload extends React.Component { constructor(props){ super(props) this.state = { file: null } this.handleChange = this.handleChange.bind(this) } handleChange(event) { this.setState({ file: URL.createObjectURL(event.target.files[0]) }) } render() { return ( <div> <input type="file" onChange={this.handleChange}/> <img src={this.state.file}/> </div> ); } } module.exports = Upload
#jsx #react.js #inlinestyling
<section style={{backgroundColor: color}}></section>
... return ( <input name="firstName" onChange={handleChange} /> ); ...
import React from 'react'; function App() { function handleChange(event) { console.log(event.target.value); } return ( <input name="firstName" onChange={handleChange} /> ); } export default App;
Copy this HTML code:
Preview:
open_in_newInstructions on embedding in Medium
Comments