React 기초 핵심정리 - 개발환경 구축

 

React-Redux를 통한 모델다루기

왜 Redux를 사용할까? Redux는 JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구

 

React 개발 환경

CLI(Command Line Interface)로 빠르게 구성하기

1. 프로젝트 준비

front-end프로젝트는 framework를 쓰기 시작하면서 복잡하다. 특히 빌드해야 할 것들이 늘어나면서 환경구성과 프로젝트 디렉토리 구조를 정리하는 것이 어려움. boilerplate라고 기본환경을 제공하는 오픈소스가 꽤 있음.

url : http://andrewhfarmer.com/starter-project/

 

2. React 기반 기본 환경 만들기.

React Create App을 쓰자. 깔고나면 매우 clean함. 많은 의존되는 모델이 숨겨져 있기 때문임. 

url : https://github.com/facebookincubator/create-react-app

 

3. Start

╭─1003855@SKP1003855MN001 ~/Documents/reactTest  
╰─$ sudo npm install -g create-react-app
Password:
/usr/local/npm_packages/bin/create-react-app -> /usr/local/npm_packages/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.0
added 80 packages in 7.076s

 

╭─1003855@SKP1003855MN001 ~/Documents/reactTest  
╰─$ /usr/local/npm_packages/bin/create-react-app my-app

Creating a new React app in /Users/1003855/Documents/reactTest/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/1003855/Documents/reactTest/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/1003855/Documents/reactTest/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/1003855/Documents/reactTest/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react@15.6.1
+ react-dom@15.6.1
+ react-scripts@1.0.13
added 1237 packages in 46.555s

Success! Created my-app at /Users/1003855/Documents/reactTest/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

 

╭─1003855@SKP1003855MN001 ~/Documents/reactTest
╰─$ cd my-app

╭─1003855@SKP1003855MN001 ~/Documents/reactTest/my-app  
╰─$ npm start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.202.213.81:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

 

 

4. http://localhost:3000/