點點筆記

1-12

1. 小的component code易於維護
2. 利用功能去切的component 例如 search bar 就可以拿去別的地方用
3. index is the root of our application. All of the other components will branch(支線) out from inside it
4. one rule.  make one component per file. Always one no matter how smaill it is no matter what. Always one component per file

1-14

1. react component can show other components, so we get search bar component over into index.js, we can use index.js to show the input
2. our files are siloed(孤立) from each other unless we explicity declare a connection between the two of them
3. import 檔案需要有actual relative path from the file, import node_modules library that we install with NPM 不需要有確切的path，只需要檔案夾的名字
4. App 是父層，子層有<SearchBar>

1-15

1. functional component and class based component
2. class component : javascript object with properties and methods.

   import React from 'react';
   
   class SearchBar extends React.Component{
   
   }
   
   
   import React, {Component} from 'react';
   
   class SearchBar extends Component{
   
   }

    

1-16

1. 觸發event :  handle-----  or  on--------
2. whenever we're writing JSX and using javascript variables  要使用{ } (curly braces)
3. <input> 的屬性(prop) onchange  ----->  <input onChange={this.onInputChange} />;

   onInputChange(event){
    //event Object
    console.log(event);
   }

    

1-17

1. pass it to onChange event because any function passed to it automatically be called
2. state: plain(簡樸的) javascript object that is used to record(紀錄) and react(反應) to user events.
3. each instance of a class based component has its own copy of states
4. each class based component that we defind has its own state object
5. 當 state 被改變，component 會立即re-render，也同時會force強迫all of its children to re-render
6. set the orioerty state to a  plain javascript object inside the class's constructor method
7. functioal component do not have state 
8. constructor function : first and only called automatically whenever a new instance of the class is created. this function get called all the time because it's called whenever we create a new instance of <searchBar /> like right here inside of index.js. 
9. constructor function is reserved(留作專用的) for innitialize cariable
10. super( ); --> our component extends component( react. component ) while component itself has its own constructor fn. when we define a method that is already defined on  parent class which is component , we call that parent method on the parent class by calling super. we're calling the parent method here with super.
11. use state ---> we initialize it by creating a new object

    this.state = {term: " "};
    // property term on state

1-18

1. basically whenever you want to update our component in some fashion be thinking state.

2. this.setState({ pass an object that contain the new state });

    

3. 使用 javascript variable in render method 要使用{ } , 例如： { this.state.term }

4. this.setState ---> update the state which cause the entire component to re-render

1-19

1. the state (boss) should tell the input (gay) what the current value should be.
2. controlled component : input
3. element 接受到 event onchange 的改變去 setstate value 去觸發 re-render, 然後 element 會接受到新的值 { this.state.term }