👩‍💻 반응 JS - 초보자의 베스트 가이드!(섹션 1)

18955 단어 react career beginners javascript

React JS는 프레임워크가 아닌 구성 요소 기반 JavaScript 라이브러리입니다!이것은 매우 중요한 정보이다. 왜냐하면 모든 유형의 도서관은 그 장점과 한계성을 가지고 있기 때문이다.
삼키기 반응 JS 코드를 종료하는 것은 당신을 도와주지 않습니다. 중요한 것은 이 건의를 알고 라이브러리에서 제시한 해결 방안을 보는 것입니다.
이 시리즈에서는 JSX를 JavaScript로 전송하는 Babel JS도 설치했습니다.보상으로 당신은 바벨에 대해 최종적으로 알게 됩니다.)
구성 요소 기반 라이브러리와 마찬가지로 구성 요소 간에 정보를 전파할 때도 한계가 있다. 단방향 데이터 연결을 사용하기 때문에 조합과 상하문 API 기술 등 해결 방안을 보았다.
우리는 또한 구성 요소의 상태를 토론했다. 우리는 갈고리 상태와 상태를 향상시키는 기술을 사용했다.마지막으로, 나는 또 다른 갈고리를 사용했다. useEffect는 구성 요소의 생명 주기를 보여 주었다.

이것은 아마도 초보자의 가장 좋은 강좌일 것이다. 나는 그 중에서 소개할 것이다.

구성 요소

CDN

부터

체인 구성 요소

단방향 데이터 흐름(단방향 귀속)

컨텍스트 API

Babel JS-Transpiring JSX

성분

구성 요소 상태 - 반응 연결 사용:useState

상태 상승

Hook useEffect가 있는 구성 요소 수명주기(데이터를 로컬 스토리지에 저장하는 예시)

이것은 몇 개의 문장으로 나눌 것이다. 이 문장에서 구성 요소가 무엇인지 알게 될 것이다. CDN을 시작으로 곧 다음 문장이 나올 것이다.

구성 요소

자신의 상태를 관리하는 패키지된 구성 요소를 구축하고 복잡한 UI로 조합합니다.
구성 요소 논리는 템플릿이 아닌 JavaScript로 작성되기 때문에 응용 프로그램을 통해 풍부한 데이터를 쉽게 전달하고 상태를 DOM에서 제외할 수 있습니다.

간단한 HTML을 만듭니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>

</body>
</html>

더 잘 이해하기 위해서, 이 색인에서 모든 작업을 완성할 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>

  <script>
    function MyComponent(){

    }
  </script>
</body>
</html>

MyComponent 함수는 이미 React의 구성 요소일 수 있습니다.

CDN부터.

이제 React를 주입해서 게임을 시작해야 합니다. CDN을 사용하여 테스트를 진행하지만, 더 튼튼한 프로그램을 만들려면 NPM이나 Yarn과 함께 설치해야 합니다.
here를 클릭하여 시작 링크를 가져옵니다.

색인html은 다음과 같이 해야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React JS - BEST GUIDE for Beginners!</title>
</head>
<body>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script>
    function MyComponent(){

    }
  </script>
</body>
</html>

CDN의 첫 번째 링크는 전체 React, 전체 라이브러리, 가상 DOM, 그리고 React로 이해할 수 있는 모든 것입니다.
두 번째 링크는 페이지에 React 구성 요소를 주입하거나 문자열을 생성하고 백엔드를 통해 렌더링하는 React DOM입니다.
이 경우 앱이라는 div에 주입됩니다.

<body>
  <div id="app"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script>
    function MYComponent(){

    }
  </script>
</body>

이제 React를 통해 생성된 모든 구성 요소가 주입됩니다.
React DOM은 페이지에 주입되는 역할을 하기 때문에 두 번째 CDN 링크를 사용하여 ReactDOM이라는 전역 변수를 생성합니다. 이제 그 옆에 Render 방법이 있습니다.

ReactDOM.render()

이것은 매우 간단하다. 기본적으로 네가 어떤 구성 요소를 주입하고 싶은지, 어디에 주입하고 싶은지 말해라.
이 경우 다음과 같이 주입할 MyComponent 함수를 사용합니다.

<script>
    function MyComponent(){

    }

    ReactDOM.render(
      MyComponent
    )
  </script>

그러나 아직 준비가 되지 않았습니다. MyComponent는 일반적인 JavaScript 함수입니다. React는 구성 요소인 줄 몰랐습니다. 우리가create Element라는 React 방법을 사용해야 한다는 것을 알아야 합니다.
Create Element는 세 가지 주요 매개 변수를 받아들인다. 첫 번째는 구성 요소이고, 두 번째는 내가 그에게 전달하고 싶은 속성이다. 우리는 다음에 토론할 것이다. 세 번째는 이 구성 요소의 하위 요소이다. 우리는 지금 토론할 생각이 없다.

ReactDOM.render(
      React.createElement(MyComponent)
    )

이제 우리는 다른 매개 변수를 무시하고 구성 요소만 전달할 것입니다.
이제 이 구성 요소가 어디로 주입될지 말하고 DOM을 조작하기만 하면 됩니다.

ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );

우리는 이 부분을 완성했다. 지금까지 우리의 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React JS - BEST GUIDE for Beginners!</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>

    <script>
      function MyComponent() {

      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

보시다시피 저희 구성 요소인 MyComponent는 비어 있습니다. 이 표시를 만들려면 HTML 표시,div,span 등입니다. React에서 모든 내용은 이 함수인 React로 만듭니다.같은 구문을 가진 createElement.
구성 요소는 다음과 같이 생성됩니다.

function MyComponent() {
        return React.createElement("div", null, "Hello world");
      }

앞에서 말한 바와 같이 세 개의 매개 변수가 있습니다. 첫 번째 매개 변수에서 우리는 문자열에 HTML 표시를 놓았습니다. span, h1입니다. 이 예에서 나는div를 놓았고 두 번째 매개 변수에서 속성입니다. 예를 들어 클래스, id, 스타일은 대상의 모든 속성을 놓을 수 있습니다. 이 예에서null을 놓았고 세 번째 이상은 이 표시의 하위 항목입니다. 이 예에서 이 표시의 하위 항목은 문자열입니다.
보시다시피, 모든 구성 요소가 React 요소가 있는 함수 출력을 되돌려야 하기 때문에, 우리는 시작까지 되돌려줍니다.
저장할 때 이 div가 React를 통해 나타나는 것을 볼 수 있습니다.

원소를 검사하는데 우리 부서가 거기에 있습니까?

h1로 전환

<script>
      function MyComponent() {
        return React.createElement("h1", null, "Hello world");
      }

React에서, 당신은 영원히 하나의 구성 요소만 있을 수 없습니다. 사실상, 몇 개의 구성 요소가 다른 구성 요소를 호출할 것입니다. 항상 하나는 메인 구성 요소입니다. 이 페이지는 모든 다른 구성 요소를 호출합니다.
모든 사람은 아이가 있을 것이다.

최종 코드:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React JS - BEST GUIDE for Beginners!</title>
  </head>
  <body>
    <div id="app"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
    ></script>

    <script>
      function MyComponent() {
        return React.createElement("h1", null, "Hello world");
      }

      ReactDOM.render(
        React.createElement(MyComponent),
        document.getElementById("app")
      );
    </script>
  </body>
</html>

구성 요소 부분은 현재 온라인입니다!다음 링크를 클릭하면 다음 페이지를 볼 수 있습니다. 이것은 React가 전방 구성 요소의 가장 좋은 해결 방안 중 하나라는 것을 보여 줍니다.그것은 기적을 창조할 수 있다.
트위터에서 저의 최신 소식을 팔로우하세요.
신용:

Reference

이 문제에 관하여(👩‍💻 반응 JS - 초보자의 베스트 가이드!(섹션 1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/juanpabllo/react-js-best-guide-for-beginners-2gcn

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

nekohtml의 두 가지 작은 예

iOS 충돌 이상 캡처

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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