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

Install Node.js on Ubuntu · 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

React.js (리액트)

Quick start

Preparings

Install Node.js on Ubuntu

Getting Started

Hello, World

Concepts

References

reth