React
- not framework (collection of libraries) => same as express(Angular)/ koa (React)
- libary for creating interactive UIs
- rendering engine -> need 3rd party lib
- component-based
- unopinionated
- JSX template
- every component receives props(transfer from parent to the child) and/or handle its own state(own obj handled by the component itself)
React Component (Class)
- render()
return JSX template –> html element
inherit in the parent component
JSX
Props
- name=”Sara” -> this.props.name (this ctx: MyComponent)
- this.props => 해당 class를 부르는 child component attribute 전달 및 실행
App- Parent- Child
State
React Application
- ReactDOM.render()
-> replace the normal DOM with virtual DOM (ReactDOM)
Conditional Rendering
Loop Rendering
{} : act as JavaScript
Events
flows data from parent to children
handleChange (e) {} === handleChange = (e) => {}
*** arrow function => solves a lot of problems because it gets rid of the ctx of passing argument but passes the function scope which called it to this context