React: Hello World II XDD

March 6, 2020 5 minute read

Tags: react

學習要靠堅持，不要一直強灌啦 ~

上一次的 Hello World XDD

好文章 REACT VS ANGULAR: THEIR BIGGEST DIFFERENCES看一下

跟著老師繼續學！

34:42 Inline Style

在 JSX 裡用 inline style:
- ` <div style= { { backgroundColor: ‘#f4f4f4’ } } > … </div> `
- camel case
  - ex: background-color —> backgroundColor

export class TodoItem extends Component {
    render() {
        return (
            <div style={ { backgroundColor: '#f4f4f4' } } >
                <p>{ this.props.todo.title }</p>
            </div>
        )
    }
}

用 variables 只要用 single {}

import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class TodoItem extends Component {
    render() {
        return (
            <div style={itemStyle}>
                <p>{ this.props.todo.title }</p>
            </div>
        )
    }
}

// PropTypes
TodoItem.propTypes = {
    todo: PropTypes.object.isRequired
}

const itemStyle = {
    backgroundColor: '#f4f4f4'
}

export default TodoItem

35:50 style inside a function

export class TodoItem extends Component {
   getStyle = () => {
       return {
           background: '#f4f4f4',
           padding: '10px',
           borderBottom: '1px #ccc dotted',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none'
       }
   }

    render() {
        return (
            <div style={this.getStyle()}>
                <p>{ this.props.todo.title }</p>
            </div>
        )
    }
}

41:00 加入 function 互動 `onChange` and this 雷包!!

解一: 凡哥最愛 .bind(this)

 export class TodoItem extends Component {
    getStyle = () => {
        return {
            background: '#f4f4f4',
            padding: '10px',
            borderBottom: '1px #ccc dotted',
            textDecoration: this.props.todo.completed ? 'line-through' : 'none'
        }
    }
      
    markComplete() {
      console.log(this.props)
    }
   
     render() {
         return (
             <div style={this.getStyle()}>
                 <p>
                 <input type="checkbox" onChange={this.markComplete.bind(this)}/> {' '}
                 { this.props.todo.title }
                 </p>
             </div>
         )
     }
 }

解二 : using fat arrow function

 export class TodoItem extends Component {
    getStyle = () => {
        return {
            background: '#f4f4f4',
            padding: '10px',
            borderBottom: '1px #ccc dotted',
            textDecoration: this.props.todo.completed ? 'line-through' : 'none'
        }
    }
      
    // using arrow funciton 去避免 this 雷
    markComplete = () => {
      console.log(this.props)
    }
   
     render() {
         return (
             <div style={this.getStyle()}>
                 <p>
                 <input type="checkbox" onChange={this.markComplete}/> {' '}
                 { this.props.todo.title }
                 </p>
             </div>
         )
     }
 }

43:25 component or porps driling

感覺就是　一層傳一層～　ＸＤＤ

App.js –> Tods.js –> TodoItem.js

App.js

import React from 'react';
import './App.css';
import Tods from './components/Todos';

class  App extends React.Component {

  state = {
    todos: [
      {
        id: 1,
        title: 'Take out the trash',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner with wife',
        completed: true
      },
      {
        id: 3,
        title: 'Meeting with boss',
        completed: false
      },
    ]
  }

  markComplete = () => {
    console.log('From app.js')
  }
  render() {
    console.log(this.state.todos)
    return (
      <div className="App">
        <Tods todos={this.state.todos} markComplete={this.markComplete}/>
      </div>
    );
  }
}

export default App;

Tods.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import PropTypes from 'prop-types';

class Todos extends Component{

    render() {
        return (
            this.props.todos.map((todo) => (
                <TodoItem key={todo.id} todo={todo} markComplete={this.props.markComplete}/>
          ))
        )}
}

// PropTypes
Todos.propTypes = {
    todos: PropTypes.array.isRequired
}

export default Todos;

TodoItem.js

import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class TodoItem extends Component {
   getStyle = () => {
       return {
           background: '#f4f4f4',
           padding: '10px',
           borderBottom: '1px #ccc dotted',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none'
       }
   }

    render() {
        return (
            <div style={this.getStyle()}>
                <p>
                <input type="checkbox" onChange={this.props.markComplete}/> {' '}
                { this.props.todo.title }
                </p>
            </div>
        )
    }
}

// PropTypes
TodoItem.propTypes = {
    todo: PropTypes.object.isRequired
}

const itemStyle = {
    backgroundColor: '#f4f4f4'
}

export default TodoItem

46:05 把參數拿出來減少使用 `this.props.` and 把參數往上傳: .bind(this, id)

TodoItem.js

export class TodoItem extends Component {
   getStyle = () => {
       return {
           background: '#f4f4f4',
           padding: '10px',
           borderBottom: '1px #ccc dotted',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none'
       }
   }

    render() {
        const { id, title } = this.props.todo;
        return (
            <div style={this.getStyle()}>
                <p>
                <input type="checkbox" 
                       onChange={this.props.markComplete.bind(this, id)}/>
                {' '}
                { title }
                </p>
            </div>
        )
    }
}

48:00 setState()

App.js

import React from 'react';
import './App.css';
import Tods from './components/Todos';

class  App extends React.Component {

  state = {
    todos: [
      {
        id: 1,
        title: 'Take out the trash',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner with wife',
        completed: true
      },
      {
        id: 3,
        title: 'Meeting with boss',
        completed: false
      },
    ]
  }

  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
         todo.completed = !todo.completed // toggle
      }
      return todo;
    }) });
  }
  render() {
    console.log(this.state.todos)
    return (
      <div className="App">
        <Tods todos={this.state.todos} markComplete={this.markComplete}/>
      </div>
    );
  }
}

export default App;

55:20　加入 deleTod 把 props drilling 再一次練熟悉

App.js

import React from 'react';
import './App.css';
import Tods from './components/Todos';

class  App extends React.Component {

  state = {
    todos: [
      {
        id: 1,
        title: 'Take out the trash',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner with wife',
        completed: true
      },
      {
        id: 3,
        title: 'Meeting with boss',
        completed: false
      },
    ]
  }

  // Toggle Complete
  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
         todo.completed = !todo.completed // toggle
      }
      return todo;
    }) });
  }
  // Delete Todo
  delTodo = (id) => {
     this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)]
     });
  }
  render() {
    console.log(this.state.todos)
    return (
      <div className="App">
        <Tods todos={this.state.todos} 
              markComplete={this.markComplete}
              delTodo={this.delTodo}
              />
      </div>
    );
  }
}

export default App;

Todos.js

import React, { Component } from 'react';
import TodoItem from './TodoItem';
import PropTypes from 'prop-types';

class Todos extends Component{

    render() {
        return (
            this.props.todos.map((todo) => (
                <TodoItem key={todo.id}
                          todo={todo}
                          markComplete={this.props.markComplete}
                          delTodo={this.props.delTodo}
                          />
          ))
        )}
}

// PropTypes
Todos.propTypes = {
    todos: PropTypes.array.isRequired
}

export default Todos;

TodoItem.js

import React, { Component } from 'react'
import PropTypes from 'prop-types';

export class TodoItem extends Component {
   getStyle = () => {
       return {
           background: '#f4f4f4',
           padding: '10px',
           borderBottom: '1px #ccc dotted',
           textDecoration: this.props.todo.completed ? 'line-through' : 'none'
       }
   }

    render() {
        const { id, title } = this.props.todo;
        return (
            <div style={this.getStyle()}>
                <p>
                <input type="checkbox" 
                       onChange={this.props.markComplete.bind(this, id)}/>
                {' '}
                { title }
                <button onClick={this.props.delTodo.bind(this, id)} style={btnStyle}>x</button>
                </p>
            </div>
        )
    }
}

// PropTypes
TodoItem.propTypes = {
    todo: PropTypes.object.isRequired
}

const btnStyle = {
    backgroundColor: '#ff0000',
    color: '#fff',
    border: 'none',
    padding: '5px 9px',
    borderRadius: '50%',
    cursor: 'pointer',
    float: 'right'
}

export default TodoItem

57:40 function base component (functional component)

just having rander~
Header.js

import React from 'react';

function Header() {
    return (
        <header style={headerStyle}>
            <h1>TodoList</h1>
        </header>
    )
}

const headerStyle = {
    background:'#333',
    color: '#fff',
    textAlign: 'center',
    padding: '10px'
}

export default Header;

App.js

import React from 'react';
import './App.css';
import Tods from './components/Todos';
import Header from './components/layout/Header';

class  App extends React.Component {

  state = {
    todos: [
      {
        id: 1,
        title: 'Take out the trash',
        completed: false
      },
      {
        id: 2,
        title: 'Dinner with wife',
        completed: true
      },
      {
        id: 3,
        title: 'Meeting with boss',
        completed: false
      },
    ]
  }

  // Toggle Complete
  markComplete = (id) => {
    this.setState({ todos: this.state.todos.map(todo => {
      if(todo.id === id) {
         todo.completed = !todo.completed // toggle
      }
      return todo;
    }) });
  }
  // Delete Todo
  delTodo = (id) => {
     this.setState({ todos: [...this.state.todos.filter(todo => todo.id !== id)]
     });
  }
  render() {
    console.log(this.state.todos)
    return (
      <div className="App">
        <Header />
        <Tods todos={this.state.todos} 
              markComplete={this.markComplete}
              delTodo={this.delTodo}
              />
      </div>
    );
  }
}

export default App;

越來越有　 FU 了！！　哈哈哈　好今天先到這　掰掰　ＸＤＤ

Twitter Facebook LinkedIn

阿葛廷

React: Hello World II XDD

跟著老師繼續學！

34:42 Inline Style

35:50 style inside a function

41:00 加入 function 互動 `onChange` and this 雷包!!

43:25 component or porps driling

46:05 把參數拿出來減少使用 `this.props.` and 把參數往上傳: .bind(this, id)

48:00 setState()

55:20　加入 deleTod 把 props drilling 再一次練熟悉

57:40 function base component (functional component)

You May Also Enjoy

daily Programming: 寶哥出場品質保證又見 GitHub Copilot!

daily Programming: Azure AI Search

當你覺得對方很Ｇ8討厭的時候，放面鏡子照照自己剛剛的行為先吧！

daily Programming: 寶哥出場品質保證 GitHub Copilot

阿葛廷

跟著老師繼續學！

34:42 Inline Style

35:50 style inside a function

41:00 加入 function 互動 onChange and this 雷包!!

43:25 component or porps driling

46:05 把參數拿出來 減少使用 this.props. and 把參數往上傳: .bind(this, id)

48:00 setState()

55:20 加入 deleTod 把 props drilling 再一次練熟悉

57:40 function base component (functional component)

You May Also Enjoy

daily Programming: 寶哥出場 品質保證 又見 GitHub Copilot!

daily Programming: Azure AI Search

當你覺得對方很Ｇ8討厭的時候，放面鏡子照照自己剛剛的行為先吧！

daily Programming: 寶哥出場 品質保證 GitHub Copilot

41:00 加入 function 互動 `onChange` and this 雷包!!

46:05 把參數拿出來減少使用 `this.props.` and 把參數往上傳: .bind(this, id)

55:20　加入 deleTod 把 props drilling 再一次練熟悉

daily Programming: 寶哥出場品質保證又見 GitHub Copilot!

daily Programming: 寶哥出場品質保證 GitHub Copilot