분류 Reactjs

리엑트 매우 간단한 시작

컨텐츠 정보

  • 조회 408 (작성일 )

본문

<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
7 <script type="text/babel">
8 ReactDOM.render(<div>Hello World</div>, document.getElementById('root'))
9 </script>
10 </body>
11</html>


새로운 것을 배우거나 (또는 ​​이미 익숙한 것에 대한 기초적인 이해를 확고히 하고 싶을 때), 당신이 할 수 있는 가장 중요한 것 중 하나는 남은 모든 것이 당신이 한 가지 일 때까지 모든 것을 제거하는 것 배우려고 해요.


https://kentcdodds.com/blog/super-simple-start-to-react 


애플리케이션 구축에 대해 이야기 할 때 여러 가지 추상화 (도구 및 라이브러리)를 구성합니다. 당신이 하고 싶은 모든 것이 배뿐이라면, 모든 것을 하나의 추상화가 시작되고 다른 끝이 언제인지 알지 못하는 고무 밴드의 하나의 큰 볼로 보는 것이 당연합니다. 왜냐하면 정직하게 그렇게 중요하지 않기 때문입니다. 당신이 걱정하는 것은 무언가를 선적하는 것입니다.


그러나 만약 당신이 정말로 탄탄한 기초를 얻고 추상화를 최대의 잠재력으로 사용하고자 한다면, 고무 밴드를 분리하고 분리하여 탐구함으로써 훨씬 더 효과적이라는 것을 알게 될 것입니다. 

기능과 전체 응용 프로그램에서 어떤 역할을 수행하는지 알게 됩니다. 이렇게 하면 나중에 사용할 때 의도하지 않은 방식으로 두 조각을 모으려고 하지 않을 것입니다. 의도 된 사용 사례가 무엇인지 이해하기 때문입니다.


계속해서 React로 시도해 봅시다. React 애플리케이션을 빌드 할 때 많은 도구를 함께 사용합니다 (개발 도구와 프로덕션에 제공하는 라이브러리 모두). 반응이 끝나고 웹팩이 시작되는 위치를 모르는 경우 어느 쪽을 사용하는 것만 큼 효과적이지 않습니다. 따라서 모든 것을 제거하고 가능한 한 간단하게 만들어 봅시다 : 곧은 index.html 파일.


다음은 기본적으로 Egghead에 대한 초보자 안내서의 React 코스에서 무료로 볼 수 있는 간단한 버전입니다. 

다음 부분에서는 egghead.io에서 "Villailla JavaScript 및 DOM을 사용하여 사용자 인터페이스 만들기"를 볼 수 있습니다.


일반 HTML 파일로 시작해 봅시다 :


<html>
2 <body></body>
3</html>



(기술적으로는 이런 종류의 브라우저가 매우 관대하기 때문에 자동으로 html과 body 태그를 자동으로 추가 할 것이기 때문에 그다지 필요하지는 않습니다.


자, JavaScript를 사용하여 DOM 노드를 만들어 컨테이너 또는 "루트"DOM 노드에 넣겠습니다. 추가해 봅시다 :


<html>
2 <body>
3 <div id="root"></div>
4 </body>
5</html>

JavaScript에서 DOM 노드를 쉽게 찾을 수 있도록 루트 ID를 제공합니다. 다음에 추가해 봅시다 :


<html>
2 <body>
3 <div id="root"></div>
4 <script type="module">
5 const rootElement = document.getElementById('root')
6 </script>
7 </body>
8</html>

이제 rootElement가 생겼으니 DOM 요소를 만들어서 넣습니다.


<html>
2 <body>
3 <div id="root"></div>
4 <script type="module">
5 const rootElement = document.getElementById('root')
6 const element = document.createElement('div')
7 element.textContent = 'Hello World'
8 element.className = 'container'
9 rootElement.append(element)
10 </script>
11 </body>
12</html>

이제 페이지에서 볼 수 있는 것은 "Hello World"이며 루트 내의 div 안에 렌더링 됩니다.


React을 추가하자 


이 다음 부분에서는 egghead.io에서 "React의 createElement API를 사용하여 사용자 인터페이스 만들기"를 볼 수 있습니다.


React를 페이지에 추가하자. 자바 스크립트가 있는 타사 라이브러리이므로 브라우저에서 해당 자바 스크립트를로드하려면 별도의 스크립트 태그를 페이지에 추가해야 합니다.


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script type="module">
6 const rootElement = document.getElementById('root')
7 const element = document.createElement('div')
8 element.textContent = 'Hello World'
9 element.className = 'container'
10 rootElement.append(element)
11 </script>
12 </body>
13</html>

글쎄, 페이지에 React (글로벌 변수 React)를 사용하여 React 요소를 만들 수 있습니다.


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script type="module">
6 const rootElement = document.getElementById('root')
7 // const element = document.createElement('div')
8 // element.textContent = 'Hello World'
9 // element.className = 'container'
10 // rootElement.append(element)
11
12 const element = React.createElement(
13 'div',
14 {className: 'container'},
15 'Hello World',
16 )
17 </script>
18 </body>
19</html>

이 요소는 일반적인 JavaScript 객체입니다. 계속해서 페이지에 기록하면 다음과 같은 내용이 표시됩니다.


{
2 $$typeof: Symbol(react.element)
3 key: null
4 props: {className: "container", children: "Hello World"}
5 ref: null
6 type: "div"
7 _owner: null
8 _store: {validated: false}
9 _self: null
10 _source: null
11 __proto__: Object
12}

내 블로그 게시물에서 이에 대해 자세히 알아보십시오. JSX 란 무엇입니까?


이제 반응 요소를 가져 와서 DOM 노드로 바꾸고 그 DOM 노드를 루트에 넣을 수있는 무언가가 생겼습니다. 그것이 반응의 대상입니다. 추가해 봅시다 :


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script type="module">
7 const rootElement = document.getElementById('root')
8 const element = React.createElement(
9 'div',
10 {className: 'container'},
11 'Hello World',
12 )
13 ReactDOM.render(element, rootElement)
14 </script>
15 </body>
16</html>

이제 우리는 원래의 바닐라 JavaScript 솔루션에서와 동일한 것을 렌더링 할 것입니다.


JSX 추가 


이 다음 부분에서는 egghead.io에서 "React의 JSX 구문으로 사용자 인터페이스 만들기"를 볼 수 있습니다.


우리가 위와 같이 아무도 React를 쓰지 않습니다. 우리는 모두 JSX를 사용하고 있습니다! 

그러나 브라우저는 JSX가 무엇인지 모릅니다! 따라서 이 특수 구문을 사용하여 코드를 작성하는 것을 좋아하지만 브라우저가 이해하는 것을 제공해야 합니다. 

브라우저는 React.createElement를 이해합니다. JSX를 사용하여 코드를 작성하고 JSX를 React.createElement로 변환하는 도구가 있다면 어떨까요? 이것이 바로 바벨 컴파일러가 우리를 위해 하는 일입니다.


Babel은 JavaScript로 완전히 작성되어 브라우저에서 실제로 실행될 수 있습니다! 페이지에 추가하겠습니다 :


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
7 <script type="module">
8 const rootElement = document.getElementById('root')
9 const element = React.createElement(
10 'div',
11 {className: 'container'},
12 'Hello World',
13 )
14 ReactDOM.render(element, rootElement)
15 </script>
16 </body>
17</html>

이를 통해 babel에게 스크립트 태그에 있는 코드를 컴파일하고 싶다고 말할 수 있습니다. 유형을 text / babel로 변경하면 됩니다 :


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
7 <script type="text/babel">
8 const rootElement = document.getElementById('root')
9 const element = React.createElement(
10 'div',
11 {className: 'container'},
12 'Hello World',
13 )
14 ReactDOM.render(element, rootElement)
15 </script>
16 </body>
17</html>


이제 설정이 완료되었으므로 JSX를 사용할 수 있습니다!


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
7 <script type="text/babel">
8 const rootElement = document.getElementById('root')
9 // const element = React.createElement(
10 // 'div',
11 // {className: 'container'},
12 // 'Hello World',
13 // )
14 const element = <div className="container">Hello World</div>
15 ReactDOM.render(element, rootElement)
16 </script>
17 </body>
18</html>

그리고 그게 다야! 다음은 빌드 도구 없이 index.html 파일에서 React를 실행하는 데 필요한 모든 것을 단순화하고 최종 버전입니다.


<html>
2 <body>
3 <div id="root"></div>
4 <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
5 <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
6 <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
7 <script type="text/babel">
8 ReactDOM.render(<div>Hello World</div>, document.getElementById('root'))
9 </script>
10 </body>
11</html>


결론 


이제 전체 앱을 이와 같이 빌드하는 것은 좋지 않지만, 이것이 유익한 것으로 React 기본 추상화의 다른 부분이 무엇을 담당하는지 이해하는 데 도움이 되었기를 바랍니다. 

다른 추상화와 분리하여 한 번에 하나씩 다시 추가하면 이러한 도구와 라이브러리가 단독으로 작동하는 방식과 이를 함께 사용하여 멋진 것을 만드는 방법을 이해하는 데 실제로 도움이 될 수 있습니다.


학습 여정을 계속하고 싶다면 The Beginner 's Guide to React를 놓치지 마십시오. 행운을 빕니다!