React를 배우고 싶지만 어디서 부터 시작해야 할지 모르겠습니까? 다른 큐레이팅 된 리소스 목록을 찾지 마십시오

React는 사용자 인터페이스 라이브러리입니다. 많은 일을 하지 않습니다. 요소를 렌더링 합니다. 기간. React는 기능으로 가득 찬 스위스 군용 나이프 프레임 워크가 아닙니다. 2020 StackOverflow 개발자 설문 조사에서 React는 두 번째로 인기 있는 웹 프레임 워크입니다.

"React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다."reactjs.org

Ultralearning 책에서 제가 얻은 교훈 중 하나는 그 기술이 적용될 맥락에서 새로운 기술을 배워야 한다는 것입니다. 따라서 책을 처음부터 끝까지 읽거나 수동적으로 비디오를 보는 것보다 실천을 통해 배우는 것이 좋습니다. 복사 및 붙여 넣기가 필요 없습니다!

React, 전제 조건 및 관련 주제를 배울 수 있는 몇 가지 리소스입니다.

전제 조건 

CSS 

• CSS Layout tutorial
• Build a Professional Website

JavaScript 

• A re-introduction to Javascript or Learn JavaScript in an hour
• ES6 Tutorial or Coursera ES6 Basics
• Follow some Vanilla projects:
  Music Box
  Todo App
  Tetris Game
  Twitter clone
  Product catalog
  E-commerce site
  YouTube API Proxy server
  

이러한 프로젝트 중 일부에는 Node.js를 사용하는 백엔드 측이 포함됩니다. 15 개의 Vanilla Project Ideas와 Vanilla JavaScript를 사용한 20 개 이상의 웹 프로젝트에서 백엔드 코드 없이 더 많은 vanilla 프로젝트를 찾을 수 있습니다.

다른 버전의 Node.js로 환경을 엉망으로 만들지 마십시오. Docker Compose를 사용하여 이 내용을 읽고 개발 워크 플로가 개선 될 때까지 노드를 설치하지 마십시오.

React and Stuff 

Study Plans 

• 4-Week Plan: A Study Plan To Cure JavaScript Fatigue
• How to Learn React — A roadmap from beginner to advanced
• Resources for Learning React
• How to learn React.js in 2020
• A simple guide to learning React from scratch

React: First steps 

• What React Does (and Doesn't Do)
• React Tutorial: An Overview and Walkthrough
• React: Getting Started - The Complete Tutorial for 2020
• From React official docs
  Tutorial: Intro to React
  If you prefer learning concepts first, Hello World
  Thinking in React
  Composition vs inheritance
  

React Hooks 

• A Simple Intro to React Hooks
• How to fetch data with React Hooks?
• Fix useEffect re-running on every render
• A Complete Guide to useEffect
• Examples of the useReducer Hook and How to useReducer in React
• React Context and How to useContext in React?
• React State Hooks: useReducer, useState, useContext
• Five common mistakes writing react components (with hooks) in 2020

연습(Walk-throughs) 

Basic & Intermediate 

• Game of live
• Markdown preview
• Recipe App
• Bookmark app
• Quiz
• Calculator
• Build a website
• Weather app
• Movie list app
• Multi Step Form With React & Material UI
• YouTube clone

Advanced 

• Expense tracker and its backend
• Chat with Chatkit or with Socket.io
• Firebase Authentication in React Tutorial for Beginners
• Yelp clone. To start with TDD in React, Getting Started with TDD in React
• Travel Log
• Todoist clone
• Building a Newsreader
• eCommerce site
• Reservation app
• Netflix clone

React & Redux 

Redux는 가장 어려운 주제가 될 수 있습니다. 저장, 작업, 감속기, 썽크, 사가, 파견. useState 후크를 사용하는 방법부터 시작하여 useReducer, useContext 및 마지막 Redux를 사용합니다. 이런 식으로 더 자연스럽게 느껴집니다.

Redux 스토어에 무엇을 입력해야 하며 API 호출을 어디에서 호출해야 하는지 이해해야 합니다. Redux가 필요하지 않을 수도 있습니다.

Tutorials 

• 8 things to learn in React before using Redux
• What Does Redux Do?, A Complete React Redux Tutorial for Beginners and Immutability in React and Redux: The Complete Guide
• Redux vs. The React Context API
• React Redux Tutorial for Beginners This is a complete Redux tutorial. It covers almost everything you need to know, from creating an store to testing your reducers.
• Leveling Up with React: Redux
• Redux Tutorial - Learn Redux from Scratch

Walk-throughs 

• Simple Notes app
• Shopping Cart Checkout Summary An interview process exercise. Try to add Redux on your own
• Movie app with Redux Again try to add Redux on your own.
• Developing Games with React, Redux, and SVG

Courses 

Paid

• Pluralsight React.js Getting Started
• Coursera Full Stack React
• Udemy Instagram clone

Free 

• The Beginner's Guide to React
• The Free React Bootcamp
• Learn React for free
• 30 days of React
• Learn Building Applications with React and Redux