프로젝트 초기 세팅

한사람이 cra셋업을하고 올리고

팀원들이 내용을 pull한다

다른사람이 브랜치를 따서 협업을 한다.

브랜치
feature 기능

커밋 푸쉬
풀리퀘
멀지 (오리진마스터에 합침) 회사에서 디벨롭 협업

마스터 건들면안되여

---

npx npm에서 패키지를 소환하는거 npm에등록된 최신 패키지를 쓴다

cd document
ls
mkdir project
cd project
clearn

project npx create-react-app 클론하는웹페이지이름

component

constructor

this.state

render

jsx

this.setstate

바뀌어야될 객체의 키

하나의

jsx에서 메서드를 지정해주고 선언할때 위치- 컨스트럭터 렌더사이
렌더 jsx를 리턴하는 것

jsx는 하나의 태그, 요소 등 최상위에서 감싸줘야한다.
감싸줄게없을때 <> </>

jsx조건문?

index.js (에서 주석이랑 서비스워커삭제, 인덱스 css삭제
app css
app js
빼고삭제

개발환경을 보고싶다 npm start (npm run start)

react router

npm install react-router-dom --save 라우터깔자

라우터 세팅 - 페이지이동을 도와주는 페이지

src폴더 - 새파일 - routes.js app.js를 대체한다 index.js에서(최상위부모역할을한다)

react-router 기능 페이지마다 사용자의 용도에따라 다른컴포넌트

funtional example

import react from 'react';
import { browserrouter, switch, route} from 'react-router-dom';라는 패키지

브라우저라우터는 길다 -- as router 를 옆에써줌
browserrouter as router

routes.js // 컴포넌트들이 모임. 최상위.(like app.js)

const routes = () => { //바로 리턴
return(
//감싸주는 부모 router기능 추가해주겠다.

//순간에 반응해서 변환해서 한컴포넌트 보여줌 각페이지 들어갔을때 최상위가 되는 컴포넌트를 보여줌.
//스위치안에 각 경로들이 들어감

                  <route exact path="/" component={home} />
                  //import App from "./App" (시작이 대문자 -컴포넌트, css도 같은이름으로 준다.)
                  //<route path="/signup" component={App} />

                  
                  

                  
                  <route path="/signup" component={signup} />
                  <route path="/signup" component={signup} />
                  //path는 "문자열"로 들어감, 유저가 입력한 /뒤의 경로
                  <route path="/signup" component={signup} />
                  <route path="/signup" component={signup} />
                  <route path="/signup" component={signup} />
                  <route path="/signup" component={signup} />


		    
    )
    
}

export default routes

path 사이트뒤에 나오는 경로를 나타냄


                  localhost:2000/signup
<route path="/signup" component={signup} />
<route exact="/signup" component={signup} /> 

              //exactly 이 경로일때만 보여주겠다. 

---

import React from "react"
import signup ifrom "./sign up";

              const signup = () => {
              return {
              <route path="/signup" component={signup}/>

              <route path="/signup" component={signup}>

                   export default signup;
     

---

                ## 폴더관리

                pages, components

                pages- main.js, home.js 최상위 부모컴포넌트
                --> routes.js 에서 import 하는 부분들.


                components - main.css, 각종 자잘한 components
              
                

클론,외부패키지받을때 인식이 안될수있음
노드모듈스에 없을때가 있음. -> npm install, npm i (package.json으로 감-> dependencies에 가서 버전정보를 받아서 다운받음)