• This repository has been archived on 13/Apr/2020
  • Stars
    star
    144
  • Rank 255,590 (Top 6 %)
  • Language
  • Created about 7 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐Ÿ‡ฐ๐Ÿ‡ท ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ - The the Road to learn React (2018) [Deprecated]

โ›”๏ธ Deprecated

์ตœ์‹  ๋ฆฌ์•กํŠธ Hooks ๋ฒ„์ „์œผ๋กœ ๊ฐœ์ •ํŒ <๋” ๋กœ๋“œ ํˆฌ ๋ฆฌ์•กํŠธ(2020)>๊ฐ€ ์ถœ๊ฐ„๋˜์–ด, ๋ณธ ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ (2018) ์ €์žฅ์†Œ์™€ ์ „์ž์ฑ…์€ ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋ณธ ์ฑ…์€ ๋ฆฌ์•กํŠธ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์™€ Hooks ๊ฐœ๋…์ด ๋„์ž…๋˜๊ธฐ ์ด์ „ ๋ฒ„์ „(2018)์ž…๋‹ˆ๋‹ค. ๋‹ค์Œ ๋งํฌ์—์„œ ์ตœ์‹  ๊ฐœ์ •ํŒ์„ ํ™•์ธํ•˜์„ธ์š”.


[ํŠœํ† ๋ฆฌ์–ผ] ๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ

Slack

๋ฆฌ์•กํŠธ ๋„์›€๋‹ซ๊ธฐ(์›์ œ: The Road to learn React) ํ•œ๊ตญ์–ด ๊ณต์‹ ๊นƒํ—ˆ๋ธŒ ๋ฆฌํผ์ง€ํ† ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๋ชฉ์ฐจ

  1. ์‹œ์ž‘ํ•˜๋Š” ๊ธ€

  2. ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ๋‹ค์ง€๊ธฐ

    1. ๋ฆฌ์•กํŠธ๋ฅผ ๋ฐฐ์›Œ์•ผ ํ•˜๋Š” ์ด์œ 
    2. ์ค€๋น„ ์‚ฌํ•ญ
      1. ์ฝ”๋“œ์—๋””ํ„ฐ ยท ํ„ฐ๋ฏธ๋„
      2. node ยท npm
    3. ๋…ธ๋“œ ํŒจํ‚ค์ง€ ์„ค์น˜ ยท ๊ด€๋ฆฌ
    4. ๋ฆฌ์•กํŠธ ์„ค์น˜
      1. CDN
      2. npm
    5. create-react-app
    6. JSX ๊ธฐ์ดˆ
    7. ES6 const ยท let
    8. ReactDOM
    9. Hot Module Replacement
    10. JSX ๋‚ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ์ฒ˜๋ฆฌ
    11. ES6 ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
    12. ES6 ํด๋ž˜์Šค
  3. ๋ฆฌ์•กํŠธ ๊ธฐ์ดˆ ํ–ฅ์ƒํ•˜๊ธฐ

    1. ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€ ์ƒํƒœ ๊ด€๋ฆฌ
    2. ES6 ๊ฐ์ฒด ์ดˆ๊ธฐ์ž
    3. ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„
    4. ํด๋ž˜์Šค ๋ฉ”์„œ๋“œ ๋ฐ”์ธ๋”ฉ
    5. ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ
    6. ํผ๊ณผ ์ด๋ฒคํŠธ
    7. ES6 ๊ตฌ์กฐํ•ด์ฒด
    8. ์ œ์–ด๋˜๋Š” ์ปดํฌ๋„ŒํŠธ
    9. ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ
    10. ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ
    11. ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ปดํฌ๋„ŒํŠธ
    12. ์ปดํฌ๋„ŒํŠธ ์„ ์–ธ
    13. ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ๋ง
  4. ์™ธ๋ถ€ API ์‚ฌ์šฉํ•˜๊ธฐ

    1. ์ƒ๋ช…์ฃผ๊ธฐ ๋ฉ”์„œ๋“œ
    2. ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
    3. ES6 ์ „๊ฐœ ์—ฐ์‚ฐ์ž
    4. ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง
    5. Search ์ปดํฌ๋„ŒํŠธ ํด๋ผ์ด์–ธํŠธ ยท ์„œ๋ฒ„ ์ฒ˜๋ฆฌ
    6. ํŽ˜์ด์ง€ ๋งค๊น€ ๋ฐ์ดํ„ฐ ๊ฐ€์ ธ์˜ค๊ธฐ
    7. ํด๋ผ์ด์–ธํŠธ ์บ์‹œ
    8. ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ
    9. Axios ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ
  5. ์ปดํฌ๋„ŒํŠธ ๋ชจ๋“ˆ ๊ตฌ์„ฑ ยท ํ…Œ์ŠคํŠธ

    1. ES6 Import ยท Export
    2. ES6 ๋ชจ๋“ˆ ๊ตฌ์„ฑ
    3. Jest ์Šค๋ƒ…์ƒท ํ…Œ์ŠคํŠธ
    4. Enzyme ๋‹จ์œ„ ํ…Œ์ŠคํŠธ
    5. PropTypes ์ปดํฌ๋„ŒํŠธ ์ธํ„ฐํŽ˜์ด์Šค
  6. ์‹ฌํ™”: ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ

    1. Ref ยท DOM
    2. Loading ์ปดํฌ๋„ŒํŠธ
    3. ๊ณ ์ฐจ ์ปดํฌ๋„ŒํŠธ
    4. ์‹ฌํ™”: ์ •๋ ฌ
  7. ์‹ฌํ™”: ๋ฆฌ์•กํŠธ ์ƒํƒœ ๊ด€๋ฆฌ

    1. ์ƒํƒœ ๋Œ์–ด์˜ฌ๋ฆฌ๊ธฐ
    2. ์‹ฌํ™”: setState()
    3. ์ƒํƒœ ์ œ์–ด
  8. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐฐํฌํ•˜๊ธฐ

    1. Eject
    2. Heroku ๋ฐฐํฌ
  9. ๋งˆ์น˜๋Š” ๊ธ€


์ง€์€์ด ยท ์˜ฎ๊ธด์ด

์ง€์€์ด

๋กœ๋นˆ ์œ„์›Œํฌ (Robin Wieruch) @rwieruch

์˜ฎ๊ธด์ด

์ด์ˆ˜์ง„ (Sujin Lee) @sujinleeme

๋„์›€์ฃผ์‹  ๋ถ„


์ฐธ์—ฌ ๋ฐฉ๋ฒ•

ํ›„๊ธฐ์“ฐ๊ธฐ

์†Œ์‹๋ฐ›๊ธฐ

๋„์›€๋ฐ›๊ธฐ

  • ํ•™์Šต ๋„์ค‘ ๋„์›€์ด ํ•„์š”ํ•˜๊ฑฐ๋‚˜, ๋‹ค๋ฅธ ์‚ฌ๋žŒ์„ ๋„์™€์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด "The Road to learn React" ๋…์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์Šฌ๋ž™์— ๋“ค์–ด์˜ค์„ธ์š”.
  • ํ•œ๊ตญ์–ด ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•œ ์ฑ„๋„์ด ์—ด๋ ค์žˆ์Šต๋‹ˆ๋‹ค. #road-to-react-korean ์ฑ„๋„์—์„œ ํ•จ๊ป˜ ๊ณต๋ถ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

ํ›„์›ํ•˜๊ธฐ

  • ์ด ์ฑ…์˜ ํ”„๋กœ์ ํŠธ ํ›„์›์ž๊ฐ€ ๋˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ›„์› ๋ฐฉ๋ฒ•์—์„œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•˜์„ธ์š”.

๊ธฐ์—ฌํ•˜๊ธฐ

  • ๋ณธ๋ฌธ ๋‚ด ์˜คํƒˆ์ž๋ฅผ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜, ์ถ”๊ฐ€ ์„ค๋ช…์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ํ’€ ๋ฆฌํ€˜์ŠคํŠธ(Pull Request)๋ฅผ ๋ณด๋‚ด์ฃผ์„ธ์š”.
  • ์‹ค์Šต ๋„์ค‘ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ธฐ๋ฉด ์ด์Šˆ(Issues)์— ๋“ฑ๋กํ•ด์ฃผ์„ธ์š”. ์ด์Šˆ๋ฅผ ๊ฒŒ์‹œํ•  ๋•Œ, ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๋ถ€๋ถ„์˜ ์˜ค๋ฅ˜ ๋กœ๊ทธ ๋ฉ”์‹œ์ง€, ์Šคํฌ๋ฆฐ ์ƒท, ์ฑ… ํŽ˜์ด์ง€, ๋…ธ๋“œ ๋ฒ„์ „๋ฅผ ํ•จ๊ป˜ ๋ช…์‹œํ•ด์ฃผ์„ธ์š”. ์—ฌ๋Ÿฌ๋ถ„๋“ค์˜ ๋ฆฌ๋ทฐ์™€ ์ด์Šˆ๋Š” ์ฝ˜ํ…์ธ ๋ฅผ ๊ฐœ์„ ํ•˜๋Š”๋ฐ ํฐ ๋„์›€์ด ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

More Repositories

1

the-road-to-learn-react

๐Ÿ““The Road to learn React: Your journey to master plain yet pragmatic React.js
2,828
star
2

the-road-to-learn-react-chinese

ใ€ŠReact ๅญฆไน ไน‹้“ใ€‹The Road to learn React (็ฎ€ไฝ“ไธญๆ–‡็‰ˆ) | ๆœ€็ฎ€ๅ•๏ผŒไธ”ๆœ€ๅฎž็”จ็š„ React ๅฎžๆˆ˜ๆ•™็จ‹ใ€‚
1,836
star
3

hackernews-client

The Source Code for "The Road to learn React" E-Book
JavaScript
425
star
4

the-road-to-react

๐Ÿ““The Road to React: Your journey to master React.js
370
star
5

use-state-with-callback

Custom hook to include a callback function for useState.
JavaScript
277
star
6

react-hooks-introduction

Introduction to React Hooks for function components (released in React 16.7.)
JavaScript
258
star
7

use-data-api

Custom hook for React Components to fetch data from an API.
JavaScript
242
star
8

react-local-storage

Showcase on how to use the native localStorage of the browser in React.
JavaScript
179
star
9

the-road-to-learn-react-russian

The Road to Learn React - ะ ัƒััะบะธะน ะฟะตั€ะตะฒะพะด
152
star
10

hacker-stories

The Source Code for "The Road to React" Book
TypeScript
104
star
11

use-custom-element

Custom hook to bridge Custom Elements (Web Components) to React.
JavaScript
91
star
12

the-road-to-learn-react-portuguese

The Road to Learn React - Traduรงรฃo para o Portuguรชs
84
star
13

use-combined-reducers

Custom hook to combine all useReducer hooks for one global state container.
JavaScript
75
star
14

react-router-dynamic-routes-example

An example implementation of dynamic routes with React Router
JavaScript
74
star
15

the-road-to-react-chinese

ใ€ŠReact ๅญฆไน ไน‹้“ใ€‹2020 ็ฎ€ไฝ“ไธญๆ–‡็‰ˆ
70
star
16

the-road-to-learn-react-spanish

The Road to learn React - Spanish Translation
67
star
17

react-redux-example

React Redux Example
JavaScript
65
star
18

react-router-6-examples

JavaScript
62
star
19

react-alternative-class-component-syntax

An alternative/future way of React Class Component with Class Field Declarations
JavaScript
59
star
20

react-controlled-components-examples

A set of controlled components in React: Select, Input, Radio, Checkbox
JavaScript
59
star
21

react-firebase-chat

React Firebase Chat Example
JavaScript
56
star
22

react-flow-example

React Flow Type Checking Example
JavaScript
51
star
23

react-testing-mocha-chai-enzyme

A solid test setup for React components with Mocha, Chai, Sinon, Enzyme in a Webpack/Babel application.
JavaScript
49
star
24

react-with-redux-philosophy

React state management with Redux philosophy.
JavaScript
44
star
25

react-context-example

Showcasing React Context
JavaScript
38
star
26

react-styled-components-example

React Styled Components Example
JavaScript
34
star
27

the-road-to-learn-react-french

French Translation - The the Road to learn React
34
star
28

react-testing-jest-enzyme

A solid test setup for React components with Jest and Enzyme in a React + Webpack application.
JavaScript
34
star
29

react-list-component

Implementation of different list components in React.
JavaScript
31
star
30

react-semantic-ui-example

React Semantic UI Example
JavaScript
29
star
31

the-road-to-react-korean

๐Ÿ‡ฐ๐Ÿ‡ท ๋” ๋กœ๋“œ ํˆฌ ๋Ÿฐ ๋ฆฌ์•กํŠธ - The Road to React (2020)
29
star
32

react-component-organization-example

React Code Organization Example
JavaScript
28
star
33

react-mobx-local-state-example

React MobX (for Local State) Example
JavaScript
27
star
34

react-local-storage-cache

How to cache results in React with Local Storage.
JavaScript
27
star
35

react-children-as-a-function-example

An example implementation of React's children as a function for implementing a currency converter
JavaScript
26
star
36

the-road-to-learn-react-italian

The Road to learn React - Italian Translation
20
star
37

react-autosave-example

Autosave on a Form for React by Example
JavaScript
18
star
38

react-hooks-usestate-vs-usereducer

Showcasing when to use useState vs useReducer in React.
JavaScript
15
star
39

react-slot-pattern-example

An example implementation of React's slot pattern for passing components as props
JavaScript
15
star
40

react-prevent-rerender-component

Showcasing when and how to prevent a rerender of a component in React
JavaScript
14
star
41

react-intersection-observer-api-example

Showcasing of the Intersection Observer API in React with createRef()
JavaScript
13
star
42

react-mock-data

How to mock data in React with a fake API
JavaScript
13
star
43

react-asynchronous-request-setstate-unmounted-component

Example of preventing to set state on unmounted React Components
JavaScript
13
star
44

react-component-types

React Component Types
JavaScript
12
star
45

react-component-composition-example

React Component Composition by Example
JavaScript
11
star
46

react-interval-setstate-unmounted-component-performance

Example on removing intervals (or listeners) on unmounted React Components
JavaScript
11
star
47

create-react-app-with-sass

Showcasing on how to use SASS in create-react-app
JavaScript
10
star
48

create-react-app-with-css-modules

Showcasing how CSS modules work in create-react-app
JavaScript
10
star
49

react-usereducer-hook

State management in React with the useReducer hook.
JavaScript
9
star
50

react-render-prop-component-for-state

An example implementation of React's render props for managing state on behalf of a component
JavaScript
9
star
51

react-reusable-components

Showcasing how reusable components can be made reusable in React.
JavaScript
8
star
52

react-slider

React Slider Component by Example
JavaScript
8
star
53

the-road-to-react-portuguese

๐Ÿ““The Road to React: Sua jornada para dominar React.js
8
star
54

react-event-handlers

Showcasing how different React event handlers work.
JavaScript
8
star
55

react-usereducer-middleware

React's useReducer Hook with Middleware (and Afterware)
JavaScript
7
star
56

the-road-to-react-spanish

๐Ÿ““The Road to React: Your journey to master React.js
7
star
57

react-composability-over-configurability

Simple example showing the power of composition in React.
JavaScript
7
star
58

the-road-to-learn-react-thai

6
star
59

react-computed-properties

Computed Properties in React
JavaScript
5
star
60

react-render-props-example

An example implementation of React's render props for implementing an advanced List component
JavaScript
5
star
61

react-usestate-hook

Showcasing how state management in React works with the useState hook.
JavaScript
5
star
62

react-remove-item-from-list

Remove an Item from List in React
JavaScript
5
star
63

react-styling

Different examples on how to CSS style React components
CSS
4
star
64

the-road-to-learn-react-vietnamese

Vietnamese Translation - The the Road to learn React
4
star
65

react-add-item-to-list

Add an Item to a List in React
JavaScript
4
star
66

react-derive-state-props

How to derive state from props in React
JavaScript
4
star
67

the-road-to-learn-react-persian

๐Ÿ““The Road to learn React: Your journey to master plain yet pragmatic React.js
3
star
68

react-router-nested-routes-example

An example implementation of nested routes with React Router
JavaScript
3
star
69

the-road-to-learn-react-albanian

๐Ÿ““The Road to learn React: Your journey to master plain yet pragmatic React.js
2
star
70

react-ref-example

How to use ref in React as exmaple
JavaScript
2
star
71

react-update-item-in-list

Update an Item in a List in React
JavaScript
2
star
72

the-road-to-react-hungarian

2
star
73

use-with-viewbox

Custom hook to add a viewbox attribute to your SVG in case it's missing.
JavaScript
1
star