public:computer:react.js

React.js (리액트)

  • Install node.js (npm)
  • Install create-react-app
    $ npm install -g create-react-app
  • create app
    $ create-react-app <project name>
  • change directory into project
    $ cd <project name>
  • run project
    $ npm start
  • connect via web browser http://localhost:3000/
  • start with app.js file, and so on.
  • Install Node.js on Ubuntu
    # to install node.js we need CURL
    $ sudo apt install -y curl
    
    # install node.js using apt package manager
    $ 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
    
  • nvm
    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
    $ source ~/.bashrc
    $ nvm list-remote
    $ nvm install <version>
    $ nvm list
    $ nvm use <version>
    
  • npm update
    $ npm install -g npm@latest
    $ npm -v
    
2023/01/03 09:54 · alex

<!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>

  • 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
  • public/computer/react.js.txt
  • Last modified: 2023/01/10 14:34
  • by alex