React 101 - 파트 1: 첫 번째 단계

13471 단어 tutorialreactjavascriptbeginners
내 Javascript 시리즈 이후:

이제 React 학습 여정을 시작할 준비가 되었습니다 :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 전날 React 과정에서 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 1일차 메모를 요약했습니다.

반응이란 무엇입니까?



React는 사용자 인터페이스(프론트엔드 애플리케이션)를 구축하기 위한 Javascript 라이브러리입니다.

React는 애플리케이션 상태의 변화에 ​​따라 진화할 수 있는 요소를 사용하여 인터페이스를 나타낼 수 있는 라이브러리입니다.

React는 2개의 개별 요소로 사물을 분리할 수 있습니다.

응용 프로그램의 상태를 저장하고 다양한 사용자 상호 작용에 따라 수정할 수 있는 상태입니다.

애플리케이션의 상태에 따라 새로운 버전의 인터페이스를 렌더링하는 render() 함수.

더 이상 DOM의 변경 사항을 처리하지 않습니다. 애플리케이션의 상태가 변경될 때마다 React는 render() 함수를 다시 시작하고 DOM 수준에서 변경 사항을 적용합니다.

반응 첫 단계



가능한 한 빨리 학습을 시작하기 위해 지금은 React 및 React DOM 라이브러리 CDN 링크만 포함합니다. 나중에 실제 프로덕션 React 앱을 올바르게 시작하는 방법을 배우게 됩니다.

나는 또한 세 번째 파일(app.js)을 포함할 것이고 그것은 우리의 로컬 Javascript/React 코드가 될 것입니다.

defer 속성은 페이지 html이 로드된 후 해당 스크립트의 로드를 연기합니다.

또한 본문 안에 id="app"가 있는 div를 넣습니다. 해당 div는 React App의 컨테이너가 됩니다.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js" defer></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" defer></script>
    <script src="app.js" defer></script>
</head> 
<body>
    <div id="app">

    </div>
</body>
</html>


첫 번째 단계에서는 Hello World h1 태그를 만들고 요소를 앱 컨테이너에 연결합니다.

app.js

// Create a new React element
const title = React.createElement('h1', {}, 'Hello World')
// Render this element in the div id="app"
ReactDOM.render(title, document.querySelector('#app'))


첫 번째 React 앱... 더 잘할 수 있기를 바랍니다 ;-)


이 예제(React.createElement)는 실제 환경에서 사용할 것이 아닙니다. 이 방법은 React가 백그라운드에서 DOM을 조작하는 방법을 보여주기 위해서만 사용합니다.

실제 React 앱에서는 JSX 구문을 사용합니다. JSX 구문을 사용하면 동일한 작업을 수행할 수 있지만 다른 구문을 사용할 수 있습니다.

JSX란 무엇입니까?



JSX는 JavaScript XML을 나타냅니다. JSX를 사용하면 React에서 HTML을 작성할 수 있습니다. JSX를 사용하면 React에서 HTML을 더 쉽게 작성하고 추가할 수 있습니다.

JSX를 사용하면 JavaScript로 HTML 요소를 작성하고 createElement() 및/또는 appendChild() 메서드 없이 DOM에 배치할 수 있습니다.

JSX는 HTML 태그를 반응 요소로 변환합니다.

JSX를 반드시 사용해야 하는 것은 아니지만 JSX를 사용하면 React 애플리케이션을 더 쉽게 작성할 수 있습니다.

JSX는 브라우저에서 읽을 수 없으므로 JSX를 실행하기 전에 표준 자바스크립트로 변환해야 합니다.

Babel은 바로 그런 일을 해 주는 도구입니다. 모든 JSX 스크립트를 사용하여 모든 브라우저에서 읽을 수 있는 표준 자바스크립트로 변환할 수 있습니다.

Babel을 빠르게 설치하려면 index.html 헤드에 Babel CDN에 대한 링크를 추가할 수 있습니다. 나중에 우리는 로컬 컴퓨터에 이러한 모든 도구를 설치하는 방법을 배웁니다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


다음은 JSX의 예입니다.

const title = <h1>Hello World</h1>
ReactDOM.render(title, document.querySelector('#app'))


도전을 조금 더 추진하고 JSX 내에서 변수 이름을 표시할 수 있습니다.

const name = 'Mike'

// To use the variable name use the syntax {variableName}
function render() {
  const title = <h1>
    Hello {name}
  </h1>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()


실제로 { } 내에서 모든 js 표현식을 사용할 수 있습니다.

function render() {
  const title = <h1>
    Hello {name.toUpperCase()}
  </h1>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()


모든 자바스크립트 표현식이 유효합니다. 짝수 루프. 예를 들어 items.map은 항목 목록을 생성합니다.

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
function render() {
  const title = 
  <div>
    <ul>
      {items.map((item) => <li>{item}</li>)}
    </ul>
  </div>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()



나중에 이 목록을 참조하려는 경우. 예를 들어 항목을 제거하면 React는 각 목록 항목을 고유하게 식별하는 방법이 필요합니다. 그런 이유로 맵을 사용할 때 참조 키를 설정합니다.

const items = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
function render() {
  const title = 
  <div>
    <ul>
      {items.map((item, key) => <li key={key}>{item}</li>)}
    </ul>
  </div>
  ReactDOM.render(title, document.querySelector('#app'))
}
render()


결론



오늘은 여기까지입니다. 아직 배워야 할 것이 많으니 내일 뵙겠습니다... 하나도 놓치지 않으려면 팔로우를 눌러주세요!

트위터에서 나를 팔로우하세요:
HDU 1244 DP
Mistel Keyboard에서 일어나는 미스터리한 현상과 대책

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage