React.js : 초보자 가이드, 시작 위치

4412 단어 reactwebdevjavascript

목차


  • What Is React
  • How It Works
  • Is It Suitable For You
  • Roadmap To Learn React

  • 반응이란 무엇인가

    React Is A Javascript Library To Build User Interfaces. Think Of It As Simple Web Library That You Can Inject Through <script> Tag.

    사람들을 끌어들이는 React의 주요 기능


  • 거대한 커뮤니티가 있습니다
  • 라이브러리는 선언적이며 이해하기 쉽습니다.
  • 컴포넌트 베이스이다
  • Facebook으로 돌아가서 많은 Morden 웹 응용 프로그램에서 사용됨
  • 다양한 생산 준비 프레임워크가 이를 기반으로 구축됨
  • JSX를 사용하여 구성 요소를 작성할 수 있으며 템플릿을 사용하는 것보다 훨씬 쉽습니다.

  • 작동 원리

    It Uses Virtual Dom To Handle State And All Its Component And React Based On State Changes. And Updating Virtual Dom Update Browser Dom.

    React.createElement(
      'h1',
      {className: 'heading'},
      "hey reader"
    )
    

    React Is Just Library And If You Want To Work With Its True Potential You Have To Use Bable To Transpile All JSX into browser-javascript

    Above Component In Jsx is littraly

    <h1 className='heading'>hey reader</h1>
    

    But You Don't Have To Worry About This Transpiling Things Because All The Framework Build On Top Of React Just Do That Automatically.

    당신에게 적합합니까?

    For Most Cases React Is Completely Suitable To Work With Because It Provides 1000s' Of Open-Sources Community Library That Is Help To Solve So Many Problems.

    But, It Is Recommended To Just See What You Want To Achieve And It Is Too Overkill To Use React In That Scenario.

    React를 배우기 위한 로드맵

    React 개요



    React 학습 자료



    나 자신에게도 그것을 사용했기 때문에 나는 이것을 추천한다
  • Brain Hold FrontEnd Masters Notes
  • React Docs

  • 배울 것들의 목록



    더 나은 이해를 얻으려면 목록을 따르십시오
    나는 그것을 배웠고 그 도서관에 대한 나의 경험 때문에 다른 도서관보다 어떤 도서관에 편견이 있습니다.
  • 스타터 프로젝트(Vite.js, Create-React-App)
  • JSX 및 Babel이 번들러와 작동하는 방식
  • React Functional Components(클래스 구성 요소를 사용할 수 있지만 Functional은 사용 및 학습하기 쉽습니다)
  • 기능 구성 요소의 수명 주기
  • 기능 구성 요소의 UseState 후크
  • React의 소품
  • 각 Todo 항목은 고유한 구성 요소로 Todo 응용 프로그램을 빌드합니다. Props와 함께 상태 및 수명 주기 후크를 사용합니다.
  • UseContext 후크를 배우고 이 후크로 Todo 앱 위에서 개선하십시오
  • UseMemo, UseReducer Hooks 배우기
  • React-Router에 대해 알아보거나 라우터에 도달하여 다른 페이지를 만들고 위의 응용 프로그램에서 사용
  • 응용 프로그램 위에 스타일을 지정하기 위해 다른 CSS 및 구성 요소 라이브러리를 배우십시오.
  • Recoil 및 Redux와 같은 상태 관리에 대해 알아보십시오("Redux는 너무 복잡하고 시간이 많이 걸리며 Redux가 필요하지 않을 수도 있으므로 주의하고 원하는 것을 선택하십시오")
  • 단일 페이지 앱, 정적 사이트 생성 및 서버 측 렌더링에 대해 알아보기
  • 간단한 프로젝트에 Gatsby 또는 Next.js를 사용하고 이에 대해 알아보십시오.
  • React와 함께 Typescript를 사용하십시오.
  • 마지막으로 데이터 가져오기 및 오류 처리에 대해 알아보십시오.
  • 데이터 가져오기 및 캐싱에 ReactQuery 또는 Swr 사용


  • 이 목록과 블로그에서 귀하의 의견 및 개선 사항에 대해 자유롭게 의견을 말하십시오.

    좋은 웹페이지 즐겨찾기