Differences

This shows you the differences between two versions of the page.

--- public:computer:react.js [2023/01/02 16:36] – alex
+++ public:computer:react.js [2023/01/10 14:34] (current) – alex
@@ Line 11: / Line 11: @@
 ===== Preparings =====
-  * Install Node.js on Ubuntu <sxh bash>
-# to install node.js we need CURL
-$ sudo apt install -y curl
-# install node.js using apt package manager
+{{page>public:computer:node.js#install_nodejs_on_ubuntu}}
-$ sudo apt update & sudo apt upgrade -y
-$ sudo apt install nodejs
-$ nodejs -v
-$ sudo apt install npm
-$ npm -v
-# using PPA
-$ curl -sL https://deb.nodesource.com/setup_18.x -o nodesource_setup.sh  # version 18.x
-$ sudo bash nodesource_setup.sh
-$ sudo apt-get install nodejs
-$ sudo apt-get install build-essential
-</sxh>
-  * nvm <sxh bash>
+===== Getting Started =====
-$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
+==== Hello, World ====
-$ source ~/.bashrc
+<sxh html>
-$ nvm list-remote
+<!DOCTYPE html>
-$ nvm install <version>
+<html>
-$ nvm list
+  <head>
-$ nvm use <version>
+    <meta charset="utf-8" />
-</sxh>
-  * npm update <sxh bash>
-$ npm install -g npm@lsatest
-$ npm -v
-</sxh>
+    <title>Hello React!</title>
+    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="text/babel">
+      class App extends React.Component {
+        render() {
+          return <h1>Hello world!</h1>
+        }
+      }
+      ReactDOM.render(<App />, document.getElementById('root'))
+    </script>
+  </body>
+</html>
+</sxh>
+==== 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, getDerivedStateFromProps, reder, componentDidMount
+    * Update; getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate
+    * Unmount; componentWillUnmount
 ===== References =====
   * [[https://ko.reactjs.org/docs/getting-started.html|시작하기]]
+  * [[https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started|React 시작하기 - Web 개발 학습하기 | MDN]]
   * [[https://www.taniarascia.com/getting-started-with-react/|React Tutorial: An Overview and Walkthrough]]
+  * [[https://react.vlpt.us/|벨로퍼트와 함께하는 모던 리액트]]
+  * [[https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi|React Developer Tools @chrome 웹 스토어]]
   * [[https://zivvle.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%A0%EC%9C%A0%ED%95%9C-Key-%EA%B0%92-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0-uuid|리액트 고유한 Key 값 생성하기 (uuid)]]
-  * [[https://github.com/nvm-sh/nvm|Node Version Manager]]