Differences
This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
public:computer:react.js [2023/01/02 13:59] – created alex | public:computer:react.js [2023/01/10 14:34] (current) – alex | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== React.js (리액트) ====== | ====== React.js (리액트) ====== | ||
+ | ===== Quick start ===== | ||
+ | * Install node.js (npm) | ||
+ | * Install create-react-app <sxh bash>$ npm install -g create-react-app</ | ||
+ | * create app <sxh bash>$ create-react-app <project name></ | ||
+ | * change directory into project <sxh bash>$ cd <project name></ | ||
+ | * run project< | ||
+ | * connect via web browser '' | ||
+ | * start with '' | ||
+ | ===== Preparings ===== | ||
+ | {{page> | ||
+ | ===== Getting Started ===== | ||
+ | ==== Hello, World ==== | ||
+ | <sxh html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | |||
+ | < | ||
+ | |||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | |||
+ | <script type=" | ||
+ | class App extends React.Component { | ||
+ | render() { | ||
+ | return < | ||
+ | } | ||
+ | } | ||
+ | |||
+ | ReactDOM.render(< | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | ==== Concepts ==== | ||
+ | * react | ||
+ | * jsx(JavaScript XML) | ||
+ | * props; | ||
+ | * defaultProps | ||
+ | * props.children | ||
+ | *isSpecial | ||
+ | * useState (@React Hooks), state | ||
+ | * 함수형 업데이트 | ||
+ | * useRef (@React Hooks) | ||
+ | * useEffect (@React Hooks) | ||
+ | * useMemo (@React Hooks) | ||
+ | * useCallback (@React Hooks) | ||
+ | * useReducer | ||
+ | * cutom hooks | ||
+ | * LifeCycle | ||
+ | * Mount; constructor, | ||
+ | * Update; getDerivedStateFromProps, | ||
+ | * Unmount; componentWillUnmount | ||
+ | | ||
===== References ===== | ===== References ===== | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
* [[https:// | * [[https:// | ||