React 튜토리얼

React 튜토리얼

1. 개발 환경

   • centos 7.0 (CentOS Linux release 7.4.1708 (Core))

2. React 설치하기

   • npm 설치:

     [centos@centos ~]$ sudo yum install npm
     ...
     [centos@centos ~]$ npm -v
     3.10.10
     

   • create-react-app 설치

     [centos@centos ~]$ sudo npm install -g create-react-app
     ...
     [centos@centos ~]$ create-react-app --version
     1.5.2
     

     • facebook 공식 그룹 밑에 있으며 react 를 쉽게 사용할 수 있도록 지원해주는 툴 이다

3. React App 만들기

   • 명령어: create-react-app {{ WEB_APPLICATION_NAME }}

   • 명령어 한줄로 web application 생성이 가능하다

     [centos@centos node]$ create-react-app webapp
     
     Creating a new React app in /home/centos/node/webapp.
     
     Installing packages. This might take a couple of minutes.
     Installing react, react-dom, and react-scripts...
     
     [..................] | normalizeTree: sill install loadCurrentTree
     ...
     

4. React App 의 패키지 설명

    {{ WEB_APPLICATION_NAME }}
     ㄴ README.md
     ㄴ package.json
     ㄴ node_modules   # react 관련 모듈을 설치하면 이곳에 추가가 된다
     ㄴ public                    # index.html 이 있으며 JS, css 를 추가할때 index.html 에 선언해도 된다
     ㄴ src                          # App.js , App.css 등 react 모듈들을 정의하고 호출하는데 사용
   

   • web application 을 만들고 필요한 추가 패키기를 설치할 때에는 {{ WEB_APPLICATION_NAME 설치 경로}} 에서 npm install 을 한다
     • example:

       [centos@centos webapp]$ pwd
       /home/centos/node/webapp
       [centos@centos webapp]$ npm i react-axios
       [centos@centos webapp]$ npm install react-bootstrap-table --save
       

5. React App 실행하기

   • node.js 를 통해 간단하게 web server 를 띄울 수 있다

   • 기본적으로 localost:3000 으로 뜨게 되며 외부에서는 접근할 수 없다

     [centos@centos webapp]$ pwd
     /home/centos/node/webapp
     [centos@centos webapp]$ npm start
     ...
     
     Compiled successfully!
     
     You can now view webapp in the browser.
     
     Local:            http://localhost:3000/
     On Your Network:  http://10.0.2.15:3000/
     
     Note that the development build is not optimized.
     To create a production build, use npm run build.
     

6. 추가 설정사항

   • 외부 IP 를 통해 접근하도록 수정 (listen 0.0.0.0 )
     • {{ WEB_APPLICATION_PATH }}/config/webpack.config.dev.js 수정하기

       module.exports = {
       devtool: 'eval',
       entry: [
         require.resolve('webpack-dev-server/client') + '?http://0.0.0.0:8081',
         require.resolve('webpack/hot/dev-server'),
         path.join(srcPath, 'index')
       ],
       

     • {{ WEB_APPLICATION_PATH }}/scripts/start.js 수정하기

       new WebpackDevServer(compiler, {
       historyApiFallback: true,
       hot: true, // Note: only CSS is currently hot reloaded
       publicPath: config.output.publicPath,
       quiet: true,
       }).listen(3000, '0.0.0.0', function (err, result) {
       

   • 외부 통신을 위한 패키지 설치
     • axio
   • table 을 만들기 위한 패키지 설치
     • react-bootstrap-table
   • chart 를 그리기 위한 패키지 설치
     • chart2