🍿React JS 로 영화 웹 서비스 만들기 - JSX? 컴포넌트?🍿

index.html 파일에 

이 root 는 index.html 파일과 index.js 파일 두개 서로 같아야 한다. 물론 꼭 root 가 아니더라도 된다.

두개가 같은 id 를 가지고 있으면 ok!

 

---

1. localhost 를 게속 유지하고 refresh 할 수 있고, 그걸 보려면 npm start 를 실행하고 console을 종료하지 않아야한다.

2.react 는 소스코드에 처음부터 html 을 넣지 않는다.
html 에서 html 을 추가하거나 제거하는 법 을 알고 있다.

3. <App />은 html 이 아니다. component 이다.
component 는 html 을 반환하는 함수.  => <App/>은 html을 반환하는 함수! 이다.
* react 는 component 와 함께 동작함. 모든것이 component 이며, component 가 data 를 보여줌.

 
4. jsx : js 를 확장한 문법, JS안의 HTML,JS의 모든 기능 포함!  ,즉, html js 사이의 이러한 조합을 jsx 
JSX는 react에서 나온 매우 custom한 유일한 개념이다. 나머지는 다 JS를 사용함.
-jsx 에 대한 개념은 다른 분야로 가면 사용못함




5. component 를 만드는 방법? : component 를 작성할때마다 import React from 'react'; 를 써줘야만 한다.
만약 쓰지 않는다면, react 는 여기에 JSX가 있는 component 를 사용하는 것을 이해하지 못함.

6. react application은 한번에 하나의 component 만 rendering 할 수 있다. => 이제 여러 컴포넌트를 렌더링이 가능하다고 함.

이렇게 했는데 오류가 뜸... 뭐지??? 
( 혹시...렌더링 여러개 하는법 아시는분~~)


=> 따라서 모든것은 application 즉, App.js  안에 들어가야만 함. 




index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import Potato from './Potato';



ReactDOM.render(<App/>, document.getElementById('root'));​

Potato.js

import React from 'react';

function Potato(){
  return(
    <h3> i love potato </h3>
  )
}

export default Potato;

App.js

import React from 'react';
import Potato from './Potato';


function App() {
  return (
     <div className="App"> 
       <h1>hello!!</h1>
       <Potato/>
     </div>
     
  );
}

export default App;

 

 

 

아래는 git 으로 연동하는 과정에서? 
에러가 발생하여 오류해결방법을 찾다가 아래 블로그를 통해 해결함. 참고하기 바람.

 

 

Git requested URL returned Error 403 해결방법

 

https://cheonjoosung.github.io/blog/git-push-error