[VS코드] 부트 + 리액트 / 투프로젝트(클라이언트) #40

비주얼스튜디오 다운로드 및 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

필수: react + typescript + jsx + babel + redux + axios 조합

 

자동설정

npx create-react-app client --typescript

create-react-app %demo%

cd %demo%

yarn start

※ webpack 은 내장됩니다.

CTRL + C 하면 정지됩니다.

 

수동설정

npm init -y

npm i -g webpack webpack-dev-server

yarn add typescript --dev

 

공통설정

yarn add react-redux react-router redux-thunk axios classnames history prop-types redux-logger

 

 

 

yarn start

localhost:3000

CTRL + C 하면 정지됩니다.

---------------------------------

<< 설명 >>

npm i react react-dom next

npm i -D nodemon webpack

npm i -D eslint

--> mkfile . eslintrc

npm i eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks

--> mkfile pages/index.js

 react-router-redux@next 는  deprecate

https://stackoverflow.com/questions/54402637/connectedrouter-typeerror-cannot-read-property-dispatch-of-undefined

----------------------------------

 

npm i --save fetch-jsonp

 

필수아님: 스타일

 

 

 

npm i react-bootstrap bootstrap

 

npm i --save material-ui @material-ui/core @material-ui/icons react-tap-event-plugin

 

--------------------------------------------------

 

npm i --save react-addons-update

npm install @material-ui/corenpm install -s @material-ui/iconsnpm install classnames --save

 

 

 

npm install --save-dev react-hot-loader webpack webpack-dev-server 설치 시 에러남

 

************************************************

 

 

https://www.learnstorybook.com/

Based on the information provided by Hypnosphi, here are the steps of my second try:

By following https://www.npmjs.com/package/@storybook/cli:

1. C:...\test > create-react-app my-story-book
2. C:...\test > cd my-story-book
3. C:...\test > npm i -g @storybook/cli
4. C:...\test > npx -p @storybook/cli sb init
5. • Detecting project type. ✓
   • Adding storybook support to your "Create React App" based project. ✓
   • Preparing to install dependencies. ✓
   ......
6.  yarn test
7. C:...\test > yarn run storybook
   ......
   Storybook started on => http://localhost:9009/
   ===============================

 

 

 

 

 

 

 

 

https://velopert.com/3621

누구든지 하는 리액트 2편: 리액트 프로젝트 시작하기 | VELOPERT.LOG

상기 댓글에 에러 발생시 해결법 

windows에서 create-react-app 설치할 때 ssl관련 에러가 발생하는데,
-npm의 경우
SELF_SIGNED_CERT_IN_CHAIN 의 에러가 발생
-yarn
1단계에서 무한로딩

ssl 설정해제를 해주면 됩니다.

-npm
npm config set strict-ssl false
-yarm
yarn config set strict-ssl false