Giter VIP home page Giter VIP logo

react-redux-links's Introduction

React/Redux Links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.

Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.

You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and email newsletters. Finally, I also keep a dev blog at blog.isquaredsoftware.com, where I write about React, Redux, Webpack, and more.

Table of Contents

Getting Started

Basic Tutorials

Intermediate Concepts

Advanced Topics

Comparisons and Discussion

Recommended Learning Path

You should usually learn these technologies in the following order:

  1. "How Web Apps Work": a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
  2. JavaScript: If you don't know JavaScript, nothing else will make sense
  3. React: You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
  4. Redux: Redux can be used separately, but it's most commonly used with React.
  5. TypeScript: Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, then learn how to use them with static types.

The resources in this page are listed in that order.

You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.

Links in the "Additional Resources" sections are available as references and reading as needed.

How Web Apps Work

Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.

Recommended Primary Resources (should read)

Javascript

Recommended Primary Resources (should read)

General JS
Specific Topics

Additional Resources (read as needed)

General JS
Specific Topics

React

Recommended Primary Resources (should read)

General React

Start with reading the official docs first. The React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first, which is now available in beta. We've linked to that rather than the existing "main" documentation.

These other listed tutorials are also excellent and may explain things in a different way.

Project Setup
  • Read: Simple React Development in 2019 (a guide to setting up an app, development environment, and deployment)
  • Use: CodeSandbox.io (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
  • Use: Create-React-App (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)
Specific Topics

Additional Resources (read as needed)

General React

Redux

Recommended Primary Resources (should read)

General Redux

Start with reading the official docs first.

The other tutorials are also excellent and may explain things in a different way.

Mark Erikson's Redux Resources
  • Read: "Idiomatic Redux" concepts and opinion series. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
  • Legacy resources (do not cover "Modern Redux", but still informative)
Specific Topics

Additional Resources (read as needed)

Specific Topics

TypeScript

Recommended Primary Resources (should read)

Specific Topics

Additional Resources (read as needed)

react-redux-links's People

Contributors

alexkrolick avatar averythedev avatar bakineugene avatar ffloriel avatar goshacmd avatar joecortopassi avatar john-d-pelingo avatar keithort avatar krawaller avatar kulshekhar avatar kuponik avatar lakston avatar markerikson avatar mijankarim avatar mismatch avatar muriukialex avatar mxstbr avatar paullaros avatar piotrwitek avatar puterakahfi avatar sammylupt avatar silviyaboteva avatar starandtina avatar t-mdo avatar timarney avatar tinkerx3 avatar tuchk4 avatar valentinogagliardi avatar vtrrsl avatar zyst avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-redux-links's Issues

Improve article list metadata

In order to provide the most up-to-date information for react-redux links metadata should be included for the articles. My suggestion would be to add the dates the articles were published. If this is something you're interested in let me know and I can submit a PR.

Refactoring: split up React Component Patterns

The React Component Patterns page has gotten really large, and is probably due to be split up into smaller pages.

The first step would be to extract the "Higher Order Components" and "Composing Components with Functional Programming" subcategories into a new page called "React Component Composition", and split up the "HOC" subcategory into separate subcategories for HOCs and render prop/function-as-a-child info.

So, the new page would look like:

  • React Component Composition
    • Higher-Order Components
    • Render Props
    • Functional Composition

We'd then need to add links to those categories back into the top of the "React Component Patterns" page, and add anchor tags so that any external links to react-component-patterns.md#higher-order-components would auto-scroll to have the link at the top of the page.

Finally, the Table of Contents in the README would need to have the new page added as a list item underneath the "React Component Patterns" entry.

Thanks!

I've noticed lately that my 'Reverse Engineering React' videos are getting many more hits. I did some fishing and found that you've linked to them from here. So this is just to say a hearty thank you for doing so!

Potential Links Dump: "Front End Learning Resources"

I assembled this list at my day job to train folks who had done C++/Java/etc, but never even touched JS or React before. Most of these links could be included here.

This list is at least somewhat less stale than the rest of the repo, although some of the links are likely outdated (like, Tania Rascia's React tutorial is still class-based, and I think Dave Ceddia has a couple newer posts that should be referenced).

Content follows:

Recommended Learning Path

You should learn these technologies in the following order:

  1. "How Web Apps Work": a series of posts that lays out the big picture of the core technologies, terms, and concepts used in client/server web apps
  2. JavaScript . If you don't know JavaScript, nothing else will make sense
  3. React . You can use React by itself, or with Redux and/or TypeScript. Learning it separately will minimize the number of new concepts and syntax you have to learn at once.
  4. Redux . Redux can be used separately, but it's most commonly used with React.
  5. TypeScript . Because it adds static types on top of JS, you need to understand JS first. Also, it's easiest to understand React and Redux first, then learn how to use them with static types.

The resources in this page are listed in that order.

You are not required to read every single link and article listed in this page. However, you should try to read through as many of the articles linked in the "Recommended Primary Resources" sections as possible, especially for topics you are not already familiar with. Many of the recommended tutorials do cover the same topics, so feel free to skip past concepts you've already learned.

Links in the "Additional Resources" sections are available as references and reading as needed.

true

How Web Apps Work

Mark's post series that describes the key terms, concepts, technologies, syntax, and data flow used in web apps.

Recommended Primary Resources (should read)

Javascript

Recommended Primary Resources (should read)

General JS

Specific Topics

Additional Resources (read as needed)

General JS

Specific Topics

React

Recommended Primary Resources (should read)

General React

Start with reading the official docs first. However, the React team is in the process of starting a major rewrite of the React docs site to focus on teaching function components and hooks first. That won't be published until mid-2021. Until then, a third party has made a fork of the React docs and converted the tutorials and examples to show function components instead of classes, so I'm going to link that here and suggest reading it.

These other listed tutorials are also excellent and may explain things in a different way.

Project Setup

  • Read: Simple React Development in 2019 (a guide to setting up an app, development environment, and deployment)
  • Use: CodeSandbox.io (an online IDE that uses VS Code's editor, and can let you develop and run your apps completely in the browser)
  • Use: Create-React-App (the official CLI tool for creating a React app with one command. Sets up a project with good default build settings out of the box.)

Specific Topics

Additional Resources (read as needed)

General React

Redux

Recommended Primary Resources (should read)

General Redux

Start with reading the official docs first, and also watch Mark Erikson's "Redux Fundamentals Workshop" videos.

The other tutorials are also excellent and may explain things in a different way.

Mark Erikson's Redux Resources

  • Read: "Idiomatic Redux" concepts and opinion series. A series of blog posts that describes standard Redux development best practices, why they exist, and how Redux is meant to be used. (These are not required reading to get started, but highly recommended once you understand the basics.)
  • Legacy resources (do not cover "Modern Redux", but still informative)

Specific Topics

Additional Resources (read as needed)

TypeScript

Recommended Primary Resources (should read)

Specific Topics

Additional Resources (read as needed)

webpack 2

Is the webpack document compatible to webpack 2?

Add "Gatsby-Starter-TypeScript-Redux-TDD-BDD" Somewhere?

Hello!

Thanks so much for creating this awesome repo of information! My team and I have recently released a Gatsby React starter template that comes with Redux out of the box.

The template is all about TDD (test-driven development) and BDD (behavior-driven development). In the README it specifically calls out the quote unquote proper way of dealing with async events such as API calls by putting them in "Redux middlewares", and in the scaffold we provide a simple middleware with Jest unit tests to provide an example for users and help start them off on the right foot.

Here's the project:
https://github.com/Evaluates2/Gatsby-Starter-TypeScript-Redux-TDD-BDD

Anyway, we'd love to get feedback on this project from @markerikson and everyone else in the @react + @Redux community! 🙏❤️

Also, I wasn't sure exactly where something like this would fit best in the list here so I'm looking for suggestions on that as well. Thanks!

Request for Additional Links List Maintainers

Per my post at Redux, Writing, Responsibilities, Burnout, and a Request for Help, trying to keep this list updated on a weekly-ish basis has become too much of a mental weight for me.

I still read a ton of articles anyway, but trying to catalog them every week isn't something I want to deal with at this point.

I've seen many people say that this list has been a huge benefit for them as they try to learn React, so I don't want to just abandon the list completely. I would really appreciate it if some members of the React/Redux community could step up and offer assistance in maintaining the list.

There's two main aspects of maintaining this:

  • Evaluating and cataloging links to new articles
  • Reviewing older articles and pruning ones that are no longer relevant

If you are interested in assisting with maintaining the list, please comment here, and we can figure out the best way to handle this.

(I've dumped the existing backlog of potential links from my queue over into #98 , if anyone would like to help reviewing and cataloging them.)

Thanks in advance!

React/Redux - Help

Hello, i have a component, that renders 5 cards from react-bootstrap, the imgs, names, etc... When i start my app, i see all the cards. So i have made a simple drop down menu, whit 2016 and 2017 options. My objective is when i click the year that i want, i want to show the cards respectives of that year !! Im not asking for some one to do this for me, i want to do it for myself, but i need some help getting started or some tutorial., if some one could help me, i will apriciated . Thanks in advanced

Validate Links

Hello, I wrote a tool that can validate README links (valid URLs, not duplicate). It can be run when someone submits a pull request or a commit is pushed to react-redux-links.

For example, you would see that

https://github.com/ericdouglas/react-roadmap now redirects to
https://github.com/ericdouglas/react-learning

But more importantly, you would be alerted if a link is broken

It is currently being used by

Examples

If you are interested, connect this repo to https://travis-ci.org/ and add a .travis.yml file to the project.

See https://github.com/dkhamsing/awesome_bot for options, more information
Feel free to leave a comment 😄

Specify the license

This is a really cool list! I wonder what is the license of the content in this repo?

Highlight "top articles"

Since a lot of the categories have many articles listed, it would be helpful to highlight the top 2-4 "must read" articles in each category, if appropriate.

I should figure out how to format this, and which ones I want to highlight.

Obscure crawler matching

A few things that could make the scripts harder to detect:

  • implement a simili-random scheduling interval to avoid strict patterns in scraping
  • random/multiple User-Agents

Potential Links Dump: 2020-08-15

Potential Links Dump: 2018-11-18

Refactor list for improved readability

Some of the pages need to be split up and organized better. In particular, the React/Redux Architecture page has way too much info all crammed together.

I'm looking at splitting it up into several new categories, each with a separate page:

  • React Component Patterns
  • React State Management
  • React and Forms
  • React and AJAX

So, mostly just the file structure stuff left in the page, maybe a couple other bits.

Also debating how to split up some of the "Redux Architecture" and "Redux Techniques" links as well. For that matter, both "React Tutorials" and "Redux Tutorials" could stand to be sorted through.

If anyone's got thoughts or suggestions, feel free to comment.

Suggestion: React Sights

Just found this very useful tool https://github.com/React-Sight/React-Sight which is an extension for chrome that visualizes the component hierarchy tree of a React application.

I dunno if this has been discussed. I checked the other issues but haven't found anything related to tooling.

Side note: There doesn't seem to be a markdown for tools. They're just mentioned at the root README.md..

I can make a PR with the new file where its first content are

  • react devtools
  • react sight

Or they can be written somewhere at the README.md.?

Looks like redux devtools are on the other repository.

(docs): Relative Links are broken at Repository Main Page

Issue

When you try to navigate clicking in the links at the README.md rendered on the repo main page, it actually is using the last resource of the url (the repo name) and replacing with the .md filename.

When you open the README.md content and click on them they work just fine, since you're browsing through the blob files of the repo.

Proposed Solution

Was reading this article https://help.github.com/articles/relative-links-in-readmes/, and absolute paths are not recommended. So I would recommend you to put a relative link operand (./path/to/file.md) in each link so it can be found.

React 16/Fiber Highlights

Hey Mark,

I'm recommending this repo to several friends and colleagues, and one of the questions I am hearing most frequently these days is "what does Fiber do?"

It may be worth adding a section that highlights the notable changes regarding React 16, the "upgrade path" or lack thereof, etc.

The following writeup contains some good resources to peer into the new features and changes,
https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520

Any of these worth adding?

Edit/resolved: For anyone looking, the section is found here:
https://github.com/markerikson/react-redux-links/blob/master/react-implementation.md

Potential Links Dump - 2018-06-29

Per my post at Redux, Writing, Responsibilities, Burnout, and a Request for Help, trying to keep this list updated on a weekly-ish basis has become too much of a mental weight for me.

I still read a ton of articles anyway, but trying to catalog them every week isn't something I want to deal with at this point.

For now, I'm going to dump my accumulated backlog of potential links to be considered for inclusion, and move on. (FWIW, I threw together a small Python script to scrape, convert, and archive tagged links from my Pocket list.)

If anyone would like to take on the task for reviewing and adding this, please do so and file PRs!

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.