Giter VIP home page Giter VIP logo

react-learning-resources's Introduction

React-learning-resources

Go through this list from top to bottom, select the recommended articles as a minimum introduction to React. The articles, mentioned on this page, address many of the pain points of learning important React concepts.

As a minimum it is worth understanding:

  • Component Design Principles
  • Atomic Design
  • JavaScript ES6 Thinking in React
  • Presentational and Container Components Stateful and Stateless Components
  • JSX
  • Refs
  • Higher Order Components
  • BEM (CSS)

This free course is a good starting point if you do not wish to individually follow the links provided: https://scrimba.com/g/glearnreact

Articles and Videos

Declarative vs Imperative Programming: Or wrong ways I was thinking about React (start with this)

https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

React Composition (*Highly Recommended)

https://flaviocopes.com/react-composition/

Frontend component design principles (*Highly Recommended)

https://engineering.carsguide.com.au/front-end-component-design-principles-55c5963998c9

Introduction to The Beginner's Guide to ReactJS

https://egghead.io/lessons/react-introduction-to-the-beginner-s-guide-to-reactjs

Atomic Design (*Highly Recommended)

http://bradfrost.com/blog/post/atomic-web-design/

Functional JavaScript

https://twitter.com/ChromiumDev/status/1045345957230112771

JavaScript ES6

http://es6-features.org/#Constants

Understanding ES6

https://leanpub.com/understandinges6/read

Thinking in React (*Highly Recommended)

https://reactjs.org/docs/thinking-in-react.html 1

Presentational and Container Components (*Highly Recommended)

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Beginner's Guide to React

https://egghead.io/lessons/react-introduction-to-the-beginner-s-guide-to-reactjs

Lift State Up (*Recommended)

https://medium.com/@nimelrian/thinking-in-react-a-paradox-statement-33c19e2eb9e2

Stateful and Stateless Components (*Recommended)

https://code.tutsplus.com/tutorials/stateful-vs-stateless-functional-components-in-react--cms-29541

Functional vs class components (*Recommended)

https://react.christmas/16

React Lifecycle Methods- how and when to use them (*Recommended)

https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1

Learn React

https://reactjs.org/tutorial/tutorial.html

Uncontrolled Components (*Recommended)

https://reactjs.org/docs/uncontrolled-components.html

React Composition Patterns From The Ground Up (*Highly Recommended)

https://hackernoon.com/react-composition-patterns-from-the-ground-up-8401aaad93d7

React composability over configurability (*Highly Recommended)

https://github.com/the-road-to-learn-react/react-composability-over-configurability

8 React conditional rendering methods (*Recommended)

https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e

An Unforgettable Way to Learn Redux—The Visual Guide (*Recommended)

https://levelup.gitconnected.com/an-unforgettable-way-to-learn-redux-f36afd38c966

Getting Started with Redux (*Recommended)

https://egghead.io/courses/getting-started-with-redux

Learn Redux

https://medium.com/codingthesmartway-com-blog/learn-redux-introduction-to-state-management-with-react-b87bc570b12a

Introducing JSX

https://reactjs.org/docs/introducing-jsx.html

JSX In Depth (*Recommended)

https://reactjs.org/docs/jsx-in-depth.html

Higher Order Components (*Recommended)

https://reactjs.org/docs/higher-order-components.html

Refs and the DOM (*Recommended)

https://reactjs.org/docs/refs-and-the-dom.html

React Context

https://reactjs.org/docs/context.html

React Patterns (*Highly Recommended)

https://reactpatterns.com/

How to Use Classes and Sleep at Night

https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4

Essential TDD, BDD for React (*Recommended)

https://github.com/Cmdv/Essential-TDD-BDD-React-list

33 Concepts Every JavaScript Developer Should Know (*Recommended)

https://github.com/leonardomso/33-js-concepts

Learning JavaScript Design Patterns (*Recommended)

https://addyosmani.com/resources/essentialjsdesignpatterns/book/

BEM (*Highly Recommended)

http://getbem.com/introduction/

Learn CSS Layout (*Recommended)

http://learnlayout.com/

Flexbox Frogger

https://flexboxfroggy.com/

Flexbox Defense

http://www.flexboxdefense.com/

ITCSS: Scalable and Maintainable CSS Architecture (*Recommended)

https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

react-learning-resources's People

Contributors

flipflop avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

schurma jeel2308

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.