Sat May 23 2020 21:35:38 GMT+0000 (Coordinated Universal Time)
Saved by @bmweinstein #jsx
MyCo.propTypes = { list: PropTypes.array, ages: PropTypes.arrayOf(PropTypes.number), user: PropTypes.object, user: PropTypes.objectOf(PropTypes.number), message: PropTypes.instanceOf(Message) }
#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)
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