[리액트] 생활코딩- 리액트 설치, 특징, 배포, 함수 형태

리액트 설치 

1. node.js설치

2. vsCode 설치 - https://code.visualstudio.com/#alt-downloads - 64비트

3. 한글로 설치

4. 보기- 터미널

 

리액트 특징

 

* Router를 통해서 안에 있는 화면을 바꿔줍니다. 

* 자바스크립트를 사용하지 않습니다.

* hook을 지원합니다.

* 싱글뷰 application이라고도 한다. index.html 한장으로 사용합니다.

 

 

실행 과정 & 구조

1. 터미널 열기

2. 폴더 생성 : npx create-react-app 폴더이름 입력

    ex) npx create-react-app begin-react

 

 

3. 개발환경 실행 : npm start

4. 서버 끄기 : ctrl+C 누르면 서버 끌 수 있습니다.

5. 현재창/ 새창 열기

  target="_blank"           // _blank : 새로운 창에서 열기, _self : 현재창에서 열기

 

알아야 할 사항

1. class

원래 사용했던 class -> className으로 바꼈습니다.

 

2. 파일개념

1) src- index.js   : 입구파일

   <App />태그가 index.js의 전체 

   이 App 태그는 App.js에서 왔습니다.

코드해석: id값이 root인 태그로 렌더링 합니다.

 

 2) src - App.js : 메인 - index.js의 App 태그에 들어가는 부분 

    이곳에서 내용을 편집해가면서 ui를 만들어갑니다.

3.public- index.html :  root가 있는 파일

  src-index.js 의 root가 있는곳 

  root값을 변경하면 서버가 바뀝니다.

 

배포

npm start로 킨 서버는 개발을 위한 서버입니다.

개발환경을 위한 서비스가 아니라, 실제 서비스를 위한 서버를 만드는 배포를 해보겠습니다.

 

기존 개발환경이 있다면 끄고 ( ctrl+ c ) 

npm run build

라고 명령을 주면 build라는 폴더가 생깁니다.

그 안에는 index.html 파일이 생기는데, 이때 파일에는 공백이 없습니다.

배포하기 위해최소 용량으로 만들어졌기 때문입니다.

 

이 폴더의 index.html을 웹서버에 반영시키고 싶을 때는

serve -s build

라는 명령을 내립니다.

그러면 웹서버가 실행됩니다.

 

함수 형태

1.function 

function App() {
  return (
    <div>
      <p>안녕하세요</p>
    </div>
  );
}
export default App;


// export를 앞에 붙여도 된다. 
export default function App() { 
  return (
    <div>
      <p>안녕하세요</p>
    </div>
  );
}

2. const App = () => 

const App = () => {   //arrow 함수형태(es6문법 -> 구글에 검색)
  return (
    <div>
      <p>반갑습니다</p>
    </div>
  )
}
export default App;

3. class   (사용량 적음)

class App extends React.Component{
  render(){
    return (
      <div>
        <p>건강하세요</p>
      </div>
    );
  }
}
export default App;

javaScript 영역과 web 영역

 

 

1. javaScript 영역

- return 이 아닌 부분은 javaScript 영역입니다.

 

- 중괄호 안은 자바스크립트 영역입니다.

 {name} {age} {height} {"서울시"} {12345} {element}

2. web영역

- return 에 속하는 부분은 Web 영역입니다.

 

//자바스크립트 영역
var name = "홍길동";
let age = 24;
const height = 172.3;

const element = <h1>{name}</h1> 

//json 형태 -> 접근할 때는 user.~~로 접근한다.
const user = {
  firstname: "길동".
  lastname:"홍"
}



 // 변수에 괄호를 치면 자바스크립트 영역
function App(){
  return(
    <div>
      {/* web 영역 */}

      {name} {age} {height} {"서울시"} {12345} {element}

      {/* 전에 썼던 방식 : <div style="color:#ff0000"> </div> */}
      <div style={{ color:'#ff0000', backgroundColor:'yellow'}}>world</div>
      
      <h3 className='Mycolor'>Hello 리액트(익스터널방식) </h3>     
    </div>

  );
}
export default App;