학습 반응 1일차

뭐

React는 UI(사용자 인터페이스)를 구축하는 데 사용되는 Java 스크립트 라이브러리입니다.

meta에서 개발한 오픈 소스 프로젝트입니다.

React에서 우리는 재사용이 가능한 컴포넌트를 만들었습니다.

React에서 우리의 초점은 구성 요소를 구축하는 것이며 더 작은 구성 요소를 결합하여 더 큰 구성 요소를 만듭니다.

왜

선언적 접근 방식 → 우리는 React에게 무엇을 해야할지 알려주기만 하면 됩니다. 우리는 어떻게 해야할지 걱정할 필요가 없습니다.

컴포넌트 기반 설계 → React에서는 Re-useable 컴포넌트를 사용하므로 코드를 적게 작성해야 합니다.

가상 DOM → 그래서 DOM은 많은 요소를 가진 큰 나무와 같으며 DOM을 조작하는 데 시간이 걸리므로 React가 하는 일은 Java 스크립트에서 직접 변경한 다음 DOM에서 업데이트하여 React가 빠르게 유지될 수 있도록 하는 것입니다.

JSX → 사이트를 .html, .css, .js 3개의 다른 파일로 만드는 것보다 .in React에서 for ex처럼 하나의 파일에 모든 것을 작성합니다→ 버튼을 만들고 3개의 다른 파일에서 변경해야 하지만 React에서는 단일 구성 요소를 만들어야 합니다(모든 css, js, html 작성).

라이브러리 또는 프레임워크 반응???

도서관

라이브러리는 특정 기능을 얻기 위해 코드에 포함하는 코드 조각입니다.

라이브러리를 사용하는 경우 프레임워크와 같이 프레임워크보다 더 많은 자유가 있습니다. 파일을 특정 위치에 넣어야 합니다.

뼈대

프레임워크는 사용자가 무언가를 개발할 수 있는 플랫폼입니다.

프레임워크에서는 라이브러리가 아닌 프레임워크에 코드를 포함해야 합니다.

우리는 도서관보다 더 많은 구조를 가지고 있습니다.

따라서 자체적으로 React는 기능이 떨어지지만 React Router와 같은 다른 항목과 결합할 수 있습니다.

어떻게

컴포넌트란??

따라서 구성 요소는 사이트를 구축하는 데 사용되는 재사용 가능한 코드 조각입니다. 또한 그들은 본질적으로 모듈식입니다.

구성 요소를 사용하면 UI를 여러 부분으로 나눌 수 있으며 각 부분을 분리하여 생각할 수 있습니다.

구성 요소를 사용하면 한 구성 요소에서 다른 구성 요소로 정보를 전달할 수 있습니다.

구성 요소에는 두 가지 유형이 있습니다.

클래스 기반

기능 기반

또한 구성 요소는 HTML을 반환합니다.

React Ratings Demo

서버 설정

React를 사용하려면 서버를 실행해야 합니다.

React 사이트를 실행하기 위해 포함할 파일.

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js">
</script>

//Earlier there is only one single file but nowadays it splits up in the 2 files.
1st File is for React -> To make Changes in the JavaScript or for Javascript also the same file we include in the during our App Development.
The 2nd File is used for DOM Manipulation.

<script src="https://unpkg.com/babel-standalone"></script>

Also we have include another 
file called Babel 
It is used to convert the HTML like code into the 
Java-Script.

Also we have to tell the 
Compiler that there can be JSX in there
<script src="index.js" type="text/jsx"></script>**

구성 요소를 만들 수 있는 두 가지 방법이 있습니다.

→ 클래스 사용(기능이 더 풍부함)

→ 기능 사용(기능은 적지만 React Hooks라는 기능이 있어서 더 기능이 가능해졌습니다.)

구성 요소가 HTML을 반환한다는 것을 알고 있으므로 HTML을 반환할 수 있는 위치도 만들었습니다.

<div id="root">
</div>
**We can select this using getElementById and Insert the HTML in it.**

Let's make a Hello world Component ->
class Hello extends React.Component{
    render(){
        return <H1> Hello World</H1>
    }
}
-> But this only Return not manipulate the HTML

so for this we have
ReactDOM(<Component name>,<Where to Render it>)

ReactDOM(<Hello/>,document.getElementById('root'));  <- this will print the Hello world

**But what if we want to return Multiple things ?? return can only return only one thing
for this we can wrap it in a div**

class Hello extends React.Component{
    render(){
        return (
                <div>
                <H1> Hello World</H1>
                <H1> Hello World</H1>               
                </div>
        )
    }
}
-> By this way we can print the Multiple things in it.