| Server IP : 160.25.81.117 / Your IP : 216.73.216.137 Web Server : Apache/2 System : Linux sv05.hilab.cloud 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64 User : bellizen ( 1045) PHP Version : 7.2.34 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /home/bellizen/domains/bellizeno.com/private_html/public/plugin/ |
Upload File : |
//Clock
function FormattedDate(props) {
return <h3> thoi gian: {props.date.toLocaleTimeString()}</h3>;
}
class Clock extends React.Component {
constructor(props) {
console.log('1.constructor');
super(props);
this.state = {date: new Date()};
}
componentDidMount() {
console.log('2.conponent did mount');
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
console.log('3.component will unmount');
clearInterval(this.timerID);
}
tick() {
console.log('4.tick');
this.setState({
date: new Date()
});
}
render() {
console.log('5.render');
return (
<div>
<h1>Hello, world!</h1>
<FormattedDate date={this.state.date}/>
</div>
);
}
}
//Toggle
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
//LogingButton
// class LoggingButton extends React.Component{
// handleClick(){
// console.log(this);
// }
// render(){
// return(
// <button onClick={ (e) => this.handleClick(e)}>Click me</button>
// );
//
// }
// }
//loginControl
function UserGreeting() {
return <h1>Welcome back!</h1>
}
function GuestGreeting() {
return <h1>Please sign up!</h1>
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting/>;
}
return <GuestGreeting/>
}
function LogingButton(props) {
return (
<button onClick={props.onClick}>Logout</button>
)
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>Login</button>
)
}
class LoginControl extends React.Component {
constructor(preps) {
super(preps);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button = null;
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick}/>
} else {
button = <LogingButton onClick={this.handleLoginClick}/>
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn}/>
{button}
</div>
);
}
}
//mailbox
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>You have {unreadMessages.length} unread messages</h2>
}
</div>
);
}
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="warning">Warning!</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(prevState => ({
showWarning: !prevState.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning}/>
<button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
function ListItems(props) {
return (<li>{props.value}</li>);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItems key={number.toString()} value={number}/>
);
return (
<ul>
{listItems}
</ul>
);
}
//form
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'Please write an essay about your favorite DOM element'};
this.handleChage = this.handleChage.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChage(event) {
this.setState({value: event.target.value})
}
handleSubmit(event) {
console.log(this.state.value.toUpperCase());
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<textarea value={this.state.value} onChange={this.handleChage}/>
</label>
<input type="submit" value="Submit"/>
</form>
);
}
}
// select
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'acount'};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
console.log(this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit"/>
</form>
);
}
}
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuest: 123
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({[name]: value})
}
render() {
return (
<form>
<label>
Is going:
<input type="checkbox" name="isGoing" onChange={this.handleInputChange}
checked={this.state.isGoing}/>
</label>
<br/>
<label>Number of guests
<input type="number"
name="numberOfGuest"
value={this.state.numberOfGuest}
onChange={this.handleInputChange}
/>
</label>
</form>
);
}
}
//calculator
const scaleNames = {
c: 'Celsius',
f: 'Fahrenheit',
}
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
function tryConvert(tempertature, convert) {
const input = parseFloat(tempertature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>Nước sẽ sôi</p>;
}
return <p>Nước méo sôi</p>;
}
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
// this.setState({temperature: e.target.value});
this.props.onTemperatureChange(e.target.value);
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}</legend>
<input value={temperature} onChange={this.handleChange}/>
</fieldset>
);
}
}
class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {temperature: '', scale: 'c'};
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
}
handleCelsiusChange(temperature) {
this.setState({scale: 'c', temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale: 'f', temperature})
}
render() {
const temperature = this.state.temperature;
const scale = this.state.scale;
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange}
/>
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange}
/>
<BoilingVerdict
celsius={parseFloat(celsius)}
/>
</div>
)
}
}
//composition vs inheritance
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>{props.children}</div>
);
}
function WelcomeDialog() {
return (
<FancyBorder color='blue'>
<h1 className="Dialog-title">Welcome</h1>
<p className="Dialog-messgae">Thank you for visiting our spacecraft</p>
</FancyBorder>
);
}
function SplitPane(props) {
return (
<div className="split-pane">
<div className="SplitPan-Left">
{props.left}
</div>
<div className="SplitPan-Right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={<Contact/>}
right={<Chat/>}
/>
);
}
function Dialog(props) {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
{props.title}
</h1>
<p className="Dialog-message">
{props.message}
</p>
{props.children}
</FancyBorder>
);
}
class SignUpDialog extends React.Component {
constructor(props) {
super(props);
this.state = {login: ""};
this.handleChange = this.handleChange.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
}
handleChange(e) {
this.setState({login: e.target.value});
}
handleSignUp() {
alert(`Welcome aboard, ${this.state.login}!`);
}
render() {
return (
<Dialog title="Mars Exploration Program"
message="How should we refer to you?">
<input type="text" value={this.state.login} onChange={this.handleChange}/>
<button onClick={this.handleSignUp}>Sign me up</button>
</Dialog>
);
}
}
//thinking in React
class ProductCategoryRow extends React.Component {
render() {
const category = this.props.category;
return (
<tr>
<td colSpan="2">{category}</td>
</tr>
);
}
}
class ProductRow extends React.Component{
render(){
const product = this.props.product;
const name = product.stocked ? product.name : <span style={{color:'red'}}>{product.name}</span>;
return(
<tr>
<td >{name}</td>
<td >{product.price}</td>
</tr>
);
}
}
class ProductTable extends React.Component{
render(){
const filterText = this.props.filterText;
const inStockOnly = this.props.inStockOnly;
const rows=[];
let lastCategory = null;
this.props.products.forEach((product)=>{
console.log(product.name.indexOf(filterText))
if (product.name.indexOf(filterText) === -1){
return;
}
if (inStockOnly && !product.stocked){
return;
}
if (product.category !== lastCategory){
rows.push(
<ProductCategoryRow
category={product.category}
key={product.category}
/>
);
}
rows.push(
<ProductRow
product={product}
key ={product.name}
/>
)
lastCategory = product.category;
});
return(
<table>
<thead>
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
);
}
}
class SearchBar extends React.Component{
constructor(props){
super(props);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleInStockOnlyChage = this.handleInStockOnlyChage.bind(this);
}
handleFilterTextChange(e){
this.props.onFilterTextChange(e.target.value);
}
handleInStockOnlyChage(e){
this.props.onInStockOnlyChange(e.target.checked);
}
render(){
const filterText = this.props.filterText;
const inStockOnly = this.props.inStockOnly;
return(
<form>
<input
type="text"
placeholder="Search..."
value={filterText}
onChange={this.handleFilterTextChange}
/>
<p>
<input
type="checkbox"
checked={inStockOnly}
onChange={this.handleInStockOnlyChage}
/>
{' '}
Only show products in stock
</p>
</form>
);
}
}
class FilterableProductTable extends React.Component{
constructor(props){
super(props);
this.state={filterText:'',inStockOnly: false};
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleInStockOnly = this.handleInStockOnly.bind(this);
}
handleFilterTextChange(filterText){
this.setState({filterText: filterText})
}
handleInStockOnly(inStockOnly){
this.setState({inStockOnly:inStockOnly})
}
render(){
return(
<div>
<SearchBar
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
onFilterTextChange={this.handleFilterTextChange}
onInStockOnlyChange={this.handleInStockOnly}
/>
<ProductTable
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
</div>
);
}
}
const PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];