reth

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== React.js (리액트) ======

===== Quick start =====
  * Install node.js (npm)
  * Install create-react-app <sxh bash>$ npm install -g create-react-app</sxh>
  * create app <sxh bash>$ create-react-app <project name></sxh>
  * change directory into project <sxh bash>$ cd <project name></sxh>
  * run project<sxh bash>$ npm start</sxh>
  * connect via web browser ''http://localhost:3000/''
  * start with ''app.js'' file, and so on.

===== Preparings =====

{{page>public:computer:node.js#install_nodejs_on_ubuntu}}


===== Getting Started =====
==== Hello, World ====
<sxh html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <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)]]