Convert Figma logo to code with AI

markerikson logoreact-redux-links

Curated tutorial and resource links I've collected on React, Redux, ES6, and more

22,578
2,502
22,578
33
View on GitHub

Top Related Projects

reduxjs's avatar

redux

60,792

A JS library for predictable global state management

reduxjs's avatar

react-redux

23,371

Official React bindings for Redux

typescript-cheatsheets's avatar

react

44,903

Cheatsheets for experienced React developers getting started with TypeScript

enaqx's avatar

awesome-react

64,351

A collection of awesome things regarding React ecosystem

brillout's avatar

awesome-react-components

41,924

Curated List of React Components & Libraries.

Quick Overview

React-Redux-Links is a curated collection of high-quality articles, tutorials, and resources for learning React, Redux, and related topics. It serves as a comprehensive guide for developers looking to deepen their understanding of these technologies and stay up-to-date with best practices in the React ecosystem.

Pros

  • Extensive collection of well-organized resources
  • Regularly updated with new and relevant content
  • Covers a wide range of topics, from beginner to advanced
  • Curated by an experienced developer in the React community

Cons

  • Can be overwhelming due to the sheer volume of information
  • Some links may become outdated over time
  • Lacks interactive elements or hands-on exercises
  • May require additional context for complete beginners

Code Examples

This repository does not contain code examples as it is a collection of links and resources rather than a code library.

Getting Started

As this is not a code library, there are no specific getting started instructions. However, users can begin by visiting the repository at https://github.com/markerikson/react-redux-links and exploring the various sections based on their interests and skill level. The README provides an overview of the available categories and how to navigate the resource collection.

Competitor Comparisons

reduxjs logo

redux

60,792

A JS library for predictable global state management

Pros of Redux

  • Official Redux library with core functionality and tools
  • Extensive documentation and ecosystem support
  • Actively maintained with regular updates and improvements

Cons of Redux

  • Steeper learning curve for beginners
  • More boilerplate code required for setup and usage
  • Can be overkill for smaller applications

Code Comparison

Redux (setup):

import { createStore } from 'redux'
const store = createStore(rootReducer)

React-Redux-Links (no code, as it's a curated list of resources)

Summary

Redux is the official state management library for React applications, offering robust tools and extensive documentation. React-Redux-Links, on the other hand, is a curated list of resources for learning React, Redux, and related topics.

While Redux provides a complete solution for state management, it can be more complex to set up and use, especially for beginners. React-Redux-Links offers a wealth of information and tutorials but doesn't provide any actual code or functionality.

Redux is best suited for larger applications with complex state management needs, while React-Redux-Links is an excellent resource for developers looking to learn and improve their skills in React and Redux ecosystem.

reduxjs logo

react-redux

23,371

Official React bindings for Redux

Pros of react-redux

  • Official Redux bindings for React, ensuring compatibility and optimal performance
  • Regularly updated and maintained by the Redux core team
  • Comprehensive documentation and extensive community support

Cons of react-redux

  • Focused solely on Redux integration, lacking broader React ecosystem resources
  • May be overwhelming for beginners due to its technical nature
  • Limited to Redux-specific content, not covering alternative state management solutions

Code Comparison

react-redux:

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

react-redux-links:

# React Redux Links

A curated list of high-quality articles, tutorials, and resources for learning React, Redux, and related topics.

## Table of Contents

- [React Resources](react-resources.md)
- [Redux Resources](redux-resources.md)
- [React Redux Resources](react-redux-resources.md)

Summary

react-redux is the official Redux binding for React, providing a robust integration between the two libraries. It offers up-to-date documentation and is maintained by the Redux core team. However, it focuses solely on Redux integration and may be challenging for beginners.

react-redux-links, on the other hand, is a curated collection of resources covering a broader range of topics related to React, Redux, and the surrounding ecosystem. It serves as a valuable learning resource but doesn't provide actual code or implementation details.

typescript-cheatsheets logo

react

44,903

Cheatsheets for experienced React developers getting started with TypeScript

Pros of react

  • Focused specifically on TypeScript with React, providing in-depth TypeScript-specific guidance
  • Regularly updated with the latest TypeScript and React best practices
  • Includes practical examples and code snippets for common TypeScript+React scenarios

Cons of react

  • Narrower scope, focusing primarily on TypeScript and React integration
  • Less comprehensive coverage of the broader React ecosystem (e.g., Redux, routing, testing)
  • May be less suitable for developers not using TypeScript in their React projects

Code Comparison

react-redux-links:

const mapStateToProps = state => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

react:

interface Props {
  todos: Todo[];
}

const mapStateToProps = (state: RootState): Props => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

The react repository provides TypeScript-specific examples, including type annotations for props and state, while react-redux-links focuses on general JavaScript usage.

enaqx logo

awesome-react

64,351

A collection of awesome things regarding React ecosystem

Pros of awesome-react

  • Broader scope, covering more aspects of the React ecosystem
  • More frequently updated with new resources
  • Includes a section on React Native

Cons of awesome-react

  • Less curated, potentially overwhelming for beginners
  • Lacks detailed explanations or context for listed resources
  • May include outdated or less relevant links due to its breadth

Code comparison

While both repositories primarily consist of markdown files with lists of links, awesome-react includes some basic HTML for structuring its content:

<br/>
<br/>
<h3>React Native</h3>

react-redux-links uses pure markdown for its structure:

## React Native

- **Intro to React Native**

Summary

awesome-react offers a comprehensive collection of React-related resources, making it suitable for developers seeking a wide range of information. However, react-redux-links provides a more focused and curated list, which may be more beneficial for those specifically interested in React and Redux. The choice between the two depends on the user's needs and experience level with React development.

brillout logo

awesome-react-components

41,924

Curated List of React Components & Libraries.

Pros of awesome-react-components

  • Focuses specifically on React components, making it easier to find ready-to-use UI elements
  • Organized into clear categories (e.g., UI Components, Charts, Tables), improving navigation
  • Includes a wider variety of components, covering more use cases for React developers

Cons of awesome-react-components

  • Less comprehensive in terms of React ecosystem resources (e.g., state management, routing)
  • May not provide as much depth in terms of learning materials and best practices
  • Could potentially include outdated or less maintained components due to its broad scope

Code comparison

While both repositories primarily consist of curated lists rather than code, here's a comparison of how they structure their content:

react-redux-links:

## React Component Patterns

- [React Component Jargon as of August 2016](https://medium.com/@arcomito/react-component-jargon-as-of-august-2016-28451d8ceb1d)
- [React in Patterns](https://github.com/krasimir/react-in-patterns)
- [React Patterns](https://github.com/chantastic/reactpatterns.com)

awesome-react-components:

## UI Components

### Editable data grid / spreadsheet

* [react-data-grid](https://github.com/adazzle/react-data-grid) - Excel-like grid.
* [ReactGrid](https://github.com/silevis/reactgrid) - Add spreadsheet-like behavior to your app

Both repositories use markdown to organize their content, but awesome-react-components tends to have more nested categories and focuses on linking directly to component libraries.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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)