Show pageOld revisionsBacklinksExport to PDFBack to top 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)]] public/computer/react.js.txt Last modified: 2023/01/10 14:34by alex