React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Learn React

If you're a web developer who has been itching to get into native development, now is your chance. In this series we'll be talking all about React Native. React Native allows you to build native iOS and Android applications in JavaScript and React.js. 

Regardless of your experience with React, or even with iOS development, my hope is that this series will be beneficial to everyone who is starting out with React Native. We'll jump straight into developing with React Native by looking first at the ecosystem of building React Native apps - including  Xcode, the iPhone simulator, live reload, debugging, and more. 

Once we get our ecosystem set up and our hello world example running using ES5, we'll jump straight into building a fully functioning iPhone app which utilizes many of the best parts of developing with React Native all while covering React.js and refactor to ES6 along the way.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

React Native Fundamentals

Updating this playlist is too hard. Check out: http://kcd.im/advanced-react and http://kcd.im/beginner-react

React from Kent

With the release of the React Hooks API, it is now possible to store state in functional components. In this playlist, we'll take an initial look at the `useState` hook as well as a few others. In one of the later lessons, we'll build a custom hook, a tool for easily sharing functionality with more that one component.

An Introduction to React Hooks

Redux was [announced back in 2015](https://www.youtube.com/watch?v=xsSnOQynTHs) and immediately took off as the de-facto state management solution for React. As it gained widespread traction, it also became clear that in many cases it was brought into applications prematurely. The community in some ways started to push back on its use and recommended the built-in `setState` method as an alternative. Several other state libraries also started popping up around this time. Finally, as React Hooks were announced with a built-in `useReducer` method it appeared that Redux's time was up. However, these claims have proven to be premature. Redux is not dead and instead remains React's most popular state management library`*`.

Recent updates to redux exposing a [hooks-based API](https://react-redux.js.org/api/hooks) address some of its most serious drawbacks and make it even more appealing. This course will show you how to apply redux to a modern react hooks application. I hope you leave this course with a continued appreciation for React Hooks and renewed enthusiasm for Redux.

Thanks for watching 📺.

---

**Notes**

- This content has been inspired by the incredible work done by [Mark Erikson](https://twitter.com/acemarke) on modernizing redux and the fantastic [Redux Style Guide](https://redux.js.org/style-guide/style-guide).

- `*` Comparing [redux](https://www.npmjs.com/package/redux) with [mobx](https://www.npmjs.com/package/mobx),  [xstate](https://www.npmjs.com/package/xstate) and [flux](https://www.npmjs.com/package/flux)

Redux with React Hooks

Learn how to use the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and deploy a [DynamoDB table](https://aws.amazon.com/dynamodb/) with [Next.js](https://nextjs.org).

- 🛠 API Route to handle CRUD actions
- 📦 AWS CDK for Infrastructure as Code
- 🔓 IAM role to restrict permissions
- 🚀 Deploy instantly to [Vercel](https://vercel.com)

You can view the completed code [here](https://github.com/leerob/nextjs-aws-dynamodb). 

Using DynamoDB with Next.js

In these lessons you’ll learn how to create a collection of primitive components that will allow you to create complex user interfaces, which are responsive, consistent, and maintainable. All without writing any custom styles. We’ll create components to manage layouts and whitespace, text and headings, basic user interface elements, and learn how to compose complex user interfaces from primitive components. 


Component-driven development in React

Theming using TailwindCSS and CSS Variables

The new React Hooks API allows to use different patterns in a simple, direct and functional way.

In this collection you will find a step by step guide to build a complex component using different design patterns implemented with the Hooks API.

We will start with a simple component `<Wizard>` that use the `useState` hook and in each lesson we will be improving the implementation by using different strategies.
In the last lessons we will have a full Wizard component with a flexible API to allow the user to manage the component based on their requirements and You will have learned the use of `useState`, `useReducer`, `useContext`, `useEffect` and `useCallback` along with some popular design patterns to build React applications.

You will be able to find the code and notes for each lesson in the github repository.


Build Advanced Component with React Hooks

La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Comenzaremos con un sencillo componente `<Wizard>` que hace uso del hook `useState` y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks `useState`, `useReducer`, `useContext` y `useEffect` junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

Podrás encontrar el código y notas para cada una de las lecciones en el [repositorio en github](https://github.com/matiasfha/egghead-build-wizard-with-hooks-collection).

Cada lección tiene un directorio asociado dentro de `src`, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente `Wizard.js` y un archivo `App.js` con el código que utiliza el componente además de algunas notas extra en el archivo `Readme.md`


Construye Componentes Avanzados con React Hooks y Patrones de Diseño

In this free collection on Facebook's new state management library, we'll get started using Recoil in our React applications and then delve into various common use cases that we may encounter in the field.

We'll start with the basics of state management in Recoil: the Atoms and Selectors. Then we'll dive further into the Selector API, an important part of the library. Along the way we'll learn different strategies for handling synchronous and asynchronous Selectors.

Manage React State with RecoilJS

Learn how to create a simple grid-based game with React, CSS Grid, and `useReducer`.

Check out the [accompanying article](https://kyleshevlin.com/tic-tac-toe)!

Tic Tac Toe in React

**Note:** This is recorded with an older version of React and many things have changed. The core concepts are still accurate, but there are some technical differences you’ll need to work through. 

React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focuses on the "V" in your MVC applications, and touts a blazing fast virtual DOM diff implementation.

This series will explore the basic fundamentals of React to get you started.

When you've finished with this series, be sure to check out [React: Flux Architecture (ES6)](https://egghead.io/courses/react-flux-architecture-es6) for real-world React application development.


Start Learning React

Many engineers working with redux have felt burdened by large amounts of boilerplate code and confusing indirection. These apps often rely on legacy patterns that are no longer recommended, but are still commonly found in production code bases. If you are are an engineer working on such an application, this course is for you. In it I will show you how to modernize your application, with react hooks, one component at a time. At the end of it, we'll still be using redux, but the structure and content of your code will be significantly improved.

We will cover migrating class components to functional components with [react hooks](https://reactjs.org/docs/hooks-reference.html) and how to replace `connect()` with [redux hooks](https://react-redux.js.org/api/hooks). This course will serve as a good tutorial for learning react hooks. It will also help you apply  modern patterns for using redux. These patterns, powered by the new [useSelector](https://react-redux.js.org/api/hooks#useselector) and [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) hooks will transform your redux applications for the better.

Modernizing a Legacy Redux Application with React Hooks

Crea Temas con TailwindCSS y Variables CSS

Learn VSCode with Ahmad Awais (Open Source JavaScript DevRel ❯ Google Dev Expert ❯ Author of 3rd most popular VSCode theme called 🦄 Shades of Purple).

VSCode

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

Redux: The Reducer Function

Learn how to implement adding a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Adding a Todo)

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Learn how to implement toggling a todo in a todo list application reducer.

Redux: Writing a Todo List Reducer (Toggling a Todo)

Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

You will learn how to write the reducer for the counter application in a test driven development way, as well as the conventions in implementing reducers.

Topics

Instructors

Content Type