React & Redux Toolkit - Bases y proyecto práctico
Summary
TLDRThis tutorial offers an in-depth guide on managing global state in a React application using Redux Toolkit. It explains the benefits of using Redux for state management in large-scale apps and demonstrates a practical example, creating a React app from scratch. The process includes setting up the Redux store, configuring slices for state management, fetching data from an API, and displaying it in a component. The tutorial simplifies complex concepts, making Redux more accessible for developers.
Takeaways
- 😀 This tutorial teaches how to manage the global state of a React application using a tool called Redux Toolkit.
- 🔧 Redux Toolkit is an improvement over the older Redux, simplifying its use with React by reducing boilerplate code and verbosity.
- 🌐 The script discusses the problem of state management in large or scaling applications, where passing state through multiple components can be cumbersome.
- 📚 It explains the concept of a global state, which is a store that holds common information for various components, accessible directly without passing through props.
- 🛠️ The tutorial includes a practical example of writing code in a React application, demonstrating the flow of information from parent to child components.
- 📝 The process of creating a new React application using `create-react-app` and setting up the project structure is covered.
- 🔄 The script describes the use of `react-redux` and `@reduxjs/toolkit` for state management and handling asynchronous operations with Redux Thunk middleware.
- 🔑 The importance of actions and reducers in Redux is highlighted, with actions representing functions that carry new values and reducers updating the global state based on those values.
- 🔍 The tutorial includes a step-by-step guide on creating a `slice` for user management within the Redux store, including setting up initial state and reducers.
- 🌌 The video demonstrates fetching user data from an API and integrating it into the global state, making it available for any component to use.
- 🔬 The use of `react-redux` hooks like `useDispatch` and `useSelector` is shown for dispatching actions and selecting parts of the state, respectively.
Q & A
What is Redux Toolkit and why is it used?
-Redux Toolkit is a tool used to manage the global state of a React application. It simplifies the use of Redux by reducing boilerplate code and making the code less verbose.
What problem does Redux solve in a React application?
-Redux solves the problem of managing the state across various components, especially in large applications where passing state through props can become complex and unmanageable.
How does information flow in a React component tree?
-In a React component tree, information typically flows from parent components to child components through props.
What issues arise when scaling a React application without Redux?
-When scaling a React application without Redux, managing state through props becomes cumbersome. Passing state and functions through multiple levels of the component tree can lead to complex and hard-to-maintain code.
What is the benefit of creating a global state store in Redux?
-Creating a global state store in Redux allows multiple components to access shared state directly, without having to pass data through multiple levels of the component tree.
What are some alternatives to Redux for state management in React?
-Alternatives to Redux for state management in React include the Context API (included with React), MobX, and other state management libraries.
How did Redux Toolkit improve upon the traditional Redux approach?
-Redux Toolkit improved upon the traditional Redux approach by reducing the amount of boilerplate code, making it easier to set up and use Redux with less configuration and verbosity.
What is the role of a reducer in Redux?
-A reducer in Redux is a function that determines how the state of the application changes in response to actions sent to the store. It takes the current state and an action, and returns the new state.
What is a 'slice' in Redux Toolkit?
-A 'slice' in Redux Toolkit is a specific part of the Redux state, along with the reducers and actions related to that part of the state. It is a modular way to manage different pieces of state.
How do you connect a React component to the Redux store?
-To connect a React component to the Redux store, you use the `useSelector` hook to access the state and the `useDispatch` hook to dispatch actions. The component is also wrapped with the `Provider` component, passing the store as a prop.
Outlines
📚 Introduction to Global State Management with Redux Toolkit
The video begins with an introduction to managing global state in a React application using Redux Toolkit. It explains the concept of Redux, when to use it, and sets the stage for a practical example. The tutorial will cover the challenges of passing state through multiple components and the benefits of using a centralized state management approach.
🛠 Setting Up a New React Application
The script describes the process of creating a new React application using 'create-react-app' and setting up the project structure. It includes removing unnecessary files and modifying the 'App.js' and 'index.js' to simplify the project. The video also mentions installing necessary libraries and setting up a basic component structure.
🎨 Adding Styling and Components with Bootstrap
The paragraph details adding Bootstrap for styling the application. It includes creating a 'NavBar' component with branding and setting up classes for dark themes and layout. The script also covers importing Bootstrap and setting up a container for the application's main content.
🔍 Fetching User Data from an API
The tutorial moves on to fetching user data from a public API, explaining how to access and use endpoints to retrieve user information. It discusses the structure of the API response and how to select specific data points, such as user details including name, email, and avatar.
📝 Creating a Static User List Component
The script describes creating a 'UserList' component to display a static list of users. It includes setting up the component structure, using the 'map' function to iterate over users, and displaying user details like name, email, and avatar in a card layout.
🔄 Configuring Redux for State Management
This section delves into configuring Redux using Redux Toolkit to manage the application's state. It explains creating a 'store', setting up 'slices' for different parts of the state, and using 'configureStore' to initialize the store. The video also covers wrapping the application with a 'Provider' to make the store accessible to all components.
📚 Creating User Slice for Redux State
The tutorial focuses on creating a 'users' slice within Redux to manage user-related state. It involves using 'createSlice' from Redux Toolkit to define the initial state and reducers for handling state updates. The script also explains exporting the slice's reducer to be included in the application's global state.
🌐 Making Asynchronous API Calls with Redux
The script covers making asynchronous API calls to fetch user data and integrate it with Redux state management. It explains using the 'fetchUsers' thunk function to perform the API call and 'createAsyncThunk' to handle the asynchronous operation, updating the state with the fetched users.
🔧 Dispatching Actions to Update the State
This part explains how to dispatch actions to update the Redux state with the fetched user data. It details creating an action called 'setUserList' to handle the new user list and using the 'dispatch' function to execute the action, updating the state with the new user data.
🔄 Consuming Redux State in the User List Component
The final paragraph discusses consuming the Redux state in the 'UserList' component. It explains using the 'useSelector' hook to select the user list from the global state and displaying it in the component. The video concludes by emphasizing the simplicity of Redux Toolkit for managing state in larger applications.
Mindmap
Keywords
💡Redux Toolkit
💡Global State
💡Prop Drilling
💡Slice
💡Reducer
💡useSelector
💡useDispatch
💡Thunk
💡React Redux
💡Boilerplate
Highlights
Introduction to managing global state in a React application using Redox Toolkit.
Explanation of Redux and when to use it for state management.
Practical example of writing code in a React application using Redox Toolkit.
Discussion on the challenges of passing state through multiple components in a large application.
Introduction of global state to solve complex state management issues.
Overview of different tools and libraries available for state management, including React's built-in context and Recoil.
Explanation of the simplification of Redux with the introduction of Redux Toolkit.
Demonstration of setting up a new React application using 'create-react-app'.
Step-by-step guide to installing necessary libraries for Redux in a React project.
Creating a header component with branding for the React application using Bootstrap.
Explanation of the structure and flow of information in a Redux application, starting from the user interface.
Description of actions and reducers in Redux and their roles in updating the global state.
Practical implementation of Redux in a React application to manage a shopping cart example.
Guide to creating a global state for user management in a React application using Redux Toolkit.
Integration of an external API to fetch user data and store it in the Redux global state.
Use of React-Redux's `useDispatch` hook to dispatch actions and update the global state.
Consumption of global state data in a React component using the `useSelector` hook.
Final demonstration of a fully functional user list component displaying data from the Redux global state.
Conclusion summarizing the benefits of using Redux for state management in large-scale React applications.
Transcripts
[Música]
hola en este tutorial aprenderemos a
gerenciar el estado de una aplicación de
react de manera global usando una
herramienta llamada red books toolkit
aprenderemos que es redux cuando usarlo
y desde luego haremos un ejemplo
práctico escribiendo algo de código en
una aplicación de react el flujo de la
información a lo largo del árbol de
componentes se da desde los componentes
padres hacia los componentes hijos y por
lo general el paso de la información se
hace a través de las próx es decir que
si yo quiero pasar el estado de este
componente hacia este otro tengo que
abrirme camino a través de las próx
hasta llegar ahí y si quiero pasar el
estado o varios estados de ese
componente tengo que pasar también las
funciones que modifican a ese estado y
eso para todos los componentes en una
aplicación pequeña esto es viable y con
certeza no nos va a dar tanto trabajo el
problema es cuando la aplicación ya es
grande o tiende a escalar imaginemos
entonces una aplicación un poco más
compleja como esta de aquí si queremos
por ejemplo pasar el estado desde este
componente hacia este otro de aquí
tenemos que dar toda una vuelta si lo
hacemos a través de las próx
y eso ocurre para todos los componentes
que comparten información entre ellos y
que se encuentran de ciertas formas
distantes en el árbol de componentes
cuando esto ocurre decimos que tenemos
un problema de gerenciamiento del estado
de la aplicación afortunadamente ese
problema ya tiene una solución y es
crear un estado global es decir un estor
que almacena el estado de la aplicación
el estado con todas aquellas
informaciones que son comunes para
varios de nuestros componentes y a la
cual de los componentes pueden accesar
directamente sin tener que dar tantas
vueltas a través de las propias y para
ayudarnos con esto existen varias
herramientas o bibliotecas que podemos
usar primeramente tenemos la apei con
text que viene incluida en la propia
biblioteca de rayak y de la cual les voy
a estar hablando en un próximo vídeo
luego tenemos a movex que también es una
herramienta bastante interesante y que
con certeza les voy a traer en un
próximo vídeo y finalmente tenemos a
redux o el antiguo redux por decirlo de
alguna manera el antiguo redux era algo
complejo de entender y de usar para
comenzar a usarlo teníamos que crear
mucho código de boiler plate
muchos archivos y eran bastante verbos
pero hoy en día existe una herramienta
llamada red uts toolkit que es de cierta
forma una mejora al antiguo redux y que
simplificó muchísimo la manera de usar
redux con react evitando mucho código de
boiler plate y también evitando la
verbosidad para que nosotros nos podamos
centrar o concentrar en desarrollar lo
que es importante para nuestra
aplicación y de preocuparnos por hacer
tantas configuraciones así que redux
toolkit es el que vamos a estar usando
en este vídeo con un ejemplo práctico
ahora vale la pena conocer un poco de la
estructura funcional de redux y todo
comienza en la interfaz de usuario vamos
a imaginar que esto de aquí es un
carrito de compras que como vemos está
en 0 productos pero el usuario lo quiere
actualizar a 10 productos digitando el
valor de 10 en este input eso entonces
genera un evento y ese evento va a
ejecutar un despacho que en la práctica
va a ser un juego llamado justice page
el cual viene incluido en una biblioteca
llamada react redux que estaremos usando
ese despacho entonces
es lanzar una acción que una acción no
es más que una función que toma ese
nuevo valor es decir el valor de 10 y se
lo pasa al reducir el reducir entonces
es quien se encarga de actualizar el
estado global de la aplicación basado en
un estado inicial es decir es el reducir
quién va a colocar ese nuevo valor en el
estado de la aplicación y luego de que
ha sido actualizado el estado global de
la aplicación entonces ya va a estar
disponible para que seleccionemos ese
estado a través de un selector que en la
práctica también va a ser un juego
llamado y un selector incluido en la
misma biblioteca de react redux que
estaremos usando entonces es el selector
lo que nos va a permitir es seleccionar
la parte del estado en el que estamos
interesados es decir en el valor de 10 y
lo vamos a refrescar entonces en nuestra
interfaz de usuario de esa manera ahora
nuestro carrito tiene un valor de 10 y
básicamente en eso consiste redux en
actualizar un estado global para que
todos los componentes que estén
suscritos a ese estado puedan reflejar
el nuevo
valor en la interfaz de usuario muy bien
ahora vamos a ver en la práctica cómo
podemos empezar a usar redux en una
aplicación de rea que vamos a hacer un
ejemplo bastante sencillo pero que nos
permita entender los conceptos que
acabamos de ver y bueno para eso debemos
partir de una nueva aplicación de rayak
así que bueno yo en mi caso la voy a
colocar en la carpeta de documents y ahí
voy a decirle que quiero crear una nueva
aplicación de riego usando create react
up y bueno el nombre que le voy a dar a
esta aplicación va a ser en este caso
rayak redux algo como así redux el guión
up algo de esta manera voy a dar un
enter y se va a comenzar a crear la
aplicación esto tal vez demore un
poquito así que voy a pausar el vídeo y
cuando se haya creado la aplicación yo
vuelvo aquí luego de que ha terminado de
crear la aplicación lo que voy a hacer
es entonces ir hasta la carpeta de esa
aplicación y estando ahí voy a ejecutar
el comando con espacio punto simplemente
para abrir ese proyecto con visual
studio code miren que aquí bueno ya me
está abriendo el proyecto y este
proyecto que tengo aquí es
proyecto base que es creado con el
comando create ya que es realmente el
típico demo que viene con ese comando
así que bueno aquí voy a tener una serie
de archivos que no voy a necesitar así
que los voy a eliminar para que
simplemente el proyecto quede un poco
más limpio bien todos estos archivos que
estoy seleccionando simplemente los voy
a adelantar porque no los necesito y voy
a dejar simplemente el archivo de app
punto js index puntos totales aquí en
index punto está s
voy a limpiar también algunas cosas
estoy aquí no lo necesito esto de aquí
lo voy a remover este importe también y
sólo voy a dejar esto de esta manera muy
bien aquí voy a cerrar este index y en
el archivo de app
js también voy a realizar algunas
modificaciones esto de aquí por ejemplo
no lo necesito así que lo voy a quitar y
aquí por ahora tal vez también voy a
remover esto de aquí voy a colocar
simplemente un h1 que diga por ejemplo
react
returns o algo así muy bien voy a
guardar esto de aquí y lo que voy a
hacer entonces es abrir una nueva
terminal y bueno tal vez debería
ejecutar la aplicación para ver esto
aquí pero bueno yo voy a empezar de una
vez
instalando las bibliotecas que voy a
necesitar todas las bibliotecas que
necesito para esto así que lo que voy a
hacer aquí es usar jiang tu puedes usar
npm install pero bueno yo voy a estar
usando ya at y lo que voy a hacer es
entonces e ir tal vez aquí a
documentación de redux toolkit para ver
un poco de lo que necesito y como puedo
comenzar miren que aquí en reduction
toolkit punto está ese punto o hereje
entramos a la página oficial de redux
toolkit aquí en get started vamos a
tener algunas instrucciones de cómo
comenzar por ejemplo aquí tenemos que
nos dicen que podemos inclusive crear
una aplicación con criteria up y usar un
template de redux tanto para javascript
plano o javascript puro como para
en este caso pues yo les voy a mostrar
cómo hacerlo desde cero sin usar el
template pero bueno aquí entonces vamos
ahora a ir a la parte de quick start y
aquí bueno ya nos van a dar algunas
instrucciones de cómo comenzar realmente
a configurar redux bien que aquí nos
dicen que debemos instalar estas dos
bibliotecas de aquí que es la biblioteca
de redux js barra toolkit y la
biblioteca de riad critics así que voy a
copiar estas dos bibliotecas de aquí
realmente y las voy a traer aquí voy a
colocar y entonces ya como te dije tú
puedes usar npm install y bueno también
voy a instalar otras dos bibliotecas que
ya están usando una es actions que me va
a permitir hacer las llamadas de red es
decir consultar alguna ave y también voy
a estar usando bus trap para estilizar
la aplicación así que simplemente voy a
decirle aquí que es buscar action riad
grid books y rick perry books js barra
toolkit estas son las bibliotecas que
voy a estar usando cuidar un enter y se
van a comenzar a crear aquí sólo debemos
esperar un poco pero bueno
esperamos ya podríamos ir creando
algunas cosas no entonces por ejemplo
aquí en la carpeta de src yo voy a crear
una nueva carpeta llamada componentes en
donde voy a colocar nuevos componentes
que voy a estar creando y bueno un
primer componente de hecho va a ser una
especie de navegación o al menos de un
header con el brand para que la
aplicación no quede tan simple entonces
aquí voy a colocar un perdón index punto
a está ese no voy a colocar un archivo
llamado mad bar punto j es perfecto y
aquí bueno voy a usar un snippets de
riad que es el área
fcc para crear una estructura aquí del
componente y esto me crea esta parte de
código bueno miren que aquí ya se
instalaron las bibliotecas vamos a
verificar aquí en el path cage y jason
hemos instalado vustra hemos instalado
el jack reed ox hemos instalado action y
aquí en red uts js tool kit muy bien
entonces tenemos las bibliotecas
instaladas bueno sigamos aquí entonces
yo estaba creando este hardware de aquí
para poder demostrar el brand de la
aplicación y que no quede tan simple de
hecho ya es simple la aplicación
entonces sólo para que se muestre un
poco mejor bien entonces aquí que es lo
que voy a hacer bueno vamos a colocar
aquí el paréntesis perfecto y aquí
dentro de estos paréntesis lo que va a
retornar es un componente en up muy bien
y dentro un componente dif y dentro un
componente del tipo y muy bien aquí esta
preferencia va a ser hacia el home por
la ruta principal y bueno aquí vamos a
colocar algunas clases de booster no
entonces por ejemplo bueno de hecho voy
a comenzar por el comienzo aquí voy a
colocar que una clase llamada network
que también otra clase llamada nad bar y
el tema dark y de background también
vamos a colocar aquí dark muy bien y
esto sólo para darle un poco de estilo
aquí vamos a usar otra clase de bus trap
llamada container y aquí vamos a usar
entonces una clase de booster llamada
lavar brand estas son clases típicas en
un brand con busta aquí le voy a colocar
por ejemplo entonces lo que tengo allá
en él
en el h 1 voy a quitar esto de aquí de
hecho y lo voy a colocar justo aquí muy
bien pero bueno para que estas clases de
bus trap funcionen realmente yo tengo
que importar booster porque lo instalé
pero no lo estoy importando así que aquí
en el index punto j s yo necesito hacer
es donde yo voy a colocar aquí un
comentario que diga vustra y aquí voy a
colocar un importe y vamos a importar
booster bueno como podemos importar
vuestro bueno colocamos entonces aquí
mostrar que es el módulo que instale
barra vista una carpeta que está aquí
dentro barra css barra y el archivo
llamado bus track
vuestros ss
y tener que escribirlo de hecho miren
que aquí lo podemos ver en la carpeta de
not models si buscamos aquí por booster
podemos haber instalado
a ver aquí por aquí
aquí debe estar babylon browser
por aquí debería estar buscan aquí justo
aquí entonces está vuestra list css y
aquí debería haber un archivo llamado
booster css miren no es este de aquí
entonces si está ahí así que lo voy a
llamar entonces kivus trump
punto cesc es muy bien perfecto de esta
manera entonces ya lo habremos importado
cerramos aquí y estas clases de bustra
ya estarían funcionando muy bien
entonces aquí ya no vamos a necesitar
este h1 lo que voy a hacer es importar
es en ámbar que cree lo seleccionado
aquí y el llama no importa que
automáticamente muy bien perfecto aquí
vamos a cerrar esto doy un control ese y
ahora voy a abrir la terminal de nuevo
aquí voy a limpiar esta terminal un poco
y vamos a dar entonces un hard start
perfecto para iniciar la aplicación
bueno entonces aquí ya se me debería
iniciar la aplicación debería estar
iniciando uno iniciado bueno mientras
tanto entonces qué podemos bueno aquí de
hecho ya ya que iniciando pero bueno
aquí mientras tanto podemos seguir
haciendo algunas cosas de hecho voy a
cerrar esta carpeta de móviles perfecto
aquí yo lo que quiero realmente crear
como aplicación es una simple lista de
usuarios pero que esa lista de usuarios
quede en el estado global de la
aplicación con redux entonces voy a
tener un componente que
lista a esos usuarios esos usuarios los
voy a traer desde una buena de hecho
miren que aquí ya la aplicación inicio y
miren la estamos viendo aquí tenemos un
hardware aquí bien simple sólo con el
brand y aquí yo quiero crear entonces
una lista de usuarios estos usuarios y
los vamos a traer desde una app que es
una app gratuita llamada red red punto y
si ustedes entran aquí la pueden ver en
internet está un poco lento así que está
demorando aquí para mostrar las cosas
pero miren que aquí bajamos y tenemos
todos los endpoints que podemos usar de
esa pei para obtener todos los usuarios
una lista de usuarios de hecho podemos
explicar aquí y miren que este sería el
en point que podemos usar bueno le
podemos pasar parámetros por ejemplo que
me está diciendo que la página 2 nos va
a traer los usuarios de la página 2 y yo
clico aquí me muestra esos datos de la
ape y miren esta estructura de datos de
la ape y con bueno algunos parámetros
aquí y una red llamado deira que va a
tener dentro objetos cada objeto es un
usuario con haití email
nombre apellido y un avatar que es la
imagen bueno si usted no están viendo la
estructura de la pei de esta forma
probablemente porque no tengan esta
extensión llamada jason viewer que yo
tengo instalada aquí ustedes tal vez la
estén viendo así y si ya la tiene
instalada entonces la están viendo de
esta manera muy bien entonces qué es lo
que yo puedo hacer aquí por ejemplo le
puedo decir que bueno miren que aquí
tiene un total de 12 usuarios y sólo
sólo dos páginas estamos actualmente en
la página 2 y está mostrando 6 usuarios
por página entonces aquí está desde el
usuario 7 hasta el 12 porque está en la
página 2 pero yo le puedo decir aquí
camps que quiero otro parámetro entonces
aquí por ejemplo le puedo decir que
quiero el parámetro de usuarios por
página y le puede ser que me muestre 12
usuarios es decir todos los usuarios que
tienen la pei que son 12 que me los
muestra todos entonces miren desde el 1
hasta el 2 muy bien ahí ya tengo los dos
usuarios entonces éste en cuenta es el
que voy a estar usando para obtener esos
usuarios pero bueno a principio
yo lo que voy a hacer es que me voy a
llevar tal vez unos tres usuarios de
aquí o cuatro usuarios
los voy a llevar así de manera que voy a
copiar y le voy a colocar que de manera
fija no lo voy a colocar de manera fija
pero bueno para eso voy a crear también
otro otro componente como les dije no lo
he creado entonces no lo voy a pegar
estos usuales todavía aquí voy a crear
primero el componente ese componente se
va a llamar y user list de lista de
usuarios
js muy bien aquí vamos a usar el snipe
de la fcc que me crea aquí la estructura
perfecto y aquí dentro de este
componente es donde voy a crear aquí una
constante llamada users que va a ser
igual a un rey y dentro de la raíz voy a
colocar esos usuarios que copie de ella
que van a estar fijos por ahora ellos
están fijos muy bien ahora qué es lo que
quiero hacer aquí dentro este componente
bueno quiero listar a cada uno de esos
usuarios y mostrarlos en la interfaz de
usuario esto de aquí hasta ahora sería
básicamente crear la estructura de la
aplicación no hemos hecho nada con redux
pero ya lo vamos a hacer
primeramente entonces vamos a colocar
aquí lo bueno vamos a dejar el sedif
realmente y vamos a colocarle una clase
de bustra llamada container
container muy bien dentro vamos a
colocar aquí otro dif y le vamos a
colocar también una clase de bus trap
que va a ser la clase road para crear
una fila y bueno dentro de esa fila
entonces van a ver columnas en cada
columna va a haber una tarjeta con un
usuario esa es la idea pero entonces yo
necesito integrar a esos usuarios
entonces como yo los usuarios los tengo
aquí users los puedo integrar a través
de la función map esa función map
entonces tiene aquí dentro una función
que le voy a colocar que un rector
implícito y dentro va a tener entonces
un 10 y bueno ese dif a ver lo
completamos aquí
perfecto y ese día va a tener una clase
de buscar
qué es una columna con md y le vamos a
decir qué bueno que aquí por ejemplo sea
3 para que muestre 44 usuarios en por
cada fila no en pantalla normal de esta
pantalla que estoy usando muy bien
ahora esto de aquí entonces recibe a un
usuario y también recibe puede recibir
aquí un index no así que bueno ese index
de yo lo puedo usar en derecho para
colocar aquí el kit entonces aquí
colocamos index también podríamos usar
el aire de cada usuario aquí como aquí
pero es vamos a usar el indus recuerden
que el kiel siempre lo colocamos cuando
es un componente que va a ser repetido
varias veces dentro de una integración
muy bien y aquí vamos a colocar dentro
otro 10
con otra clase de gusta como les dije
aquí al principio solo estamos armando
la estructura de la aplicación aquí esto
va a ser un kart y dentro de secar vamos
a tener por ejemplo una imagen
esa imagen entonces va a ser el avatar y
aquí nosotros vamos a colocar qué
realmente la url de esa imagen va a ser
el avatar de cada usuario entonces cada
usuario tiene aquí una propiedad llamada
avatar perfecto
bueno aquí podemos de una vez agregar
algo más podemos agregar otro 10 con el
cuerpo vamos a colocar que una clase de
bus trap que va a ser el cuerpo harvad y
el cuerpo de esa tarjeta y nos vamos a
mostrar a cada usuario y aquí vamos a
colocar un h5 que tenga entonces por
ejemplo el nombre e incluso el apellido
entonces vamos a colocarlo aquí en un
string en la forma de template vamos a
decirle que me coloque aquí por ejemplo
a user punto
first a ver fierce name perfecto y que
aquí deje un espacio y luego coloque a
ver el símbolo de dólar y recuerden que
aquí estamos usando strings como
templates entonces yo puedo colocarlos
de esta manera muy bien aquí sería las
name muy bien y aquí debajo podemos
colocar inclusive un parágrafo y este
parágrafo
bueno aquí tendría entonces el el email
colocamos aquí y usher punto email muy
bien esto también lo podemos colocar
aquí en la clase de buster llamada card
esta carta
carthage y aquí está este h 5 vamos a
colocarle también clases de buscar para
que quede bien y le colocamos aquí un
carl tyson
perfecto entonces si yo guardo esto de
aquí si guardo los cambios y voy a mi
aplicación miren qué bueno de hecho no
me está mostrando aún nada porque no lo
he importado no debe importarlo aquí
entonces vamos a decirle que quiero a el
componente de user list
a ver bien que le importa
automáticamente esto de aquí lo podemos
solucionar este error lo podemos
solucionar colocando un
fragmentos justamente aquí porque no
podemos retornar varias cosas desde un
retorno entonces aquí solo debemos
retornar una cosa así que colocamos un
fragmento ahora si se fue el error y
miren que aquí ya me está mostrando esos
cuatro usuarios que coloque fijos el
nombre el apellido y el email muy bien
eso lo estamos haciendo de manera fija
aquí pero qué es lo que yo quiero hacer
bueno yo lo que quiero hacer realmente
es una llamada de red o una consulta a
esa p y que sus datos de esos usuarios o
sea esta lista de usuario que coloque
aquí fija quiero que se guarden en un
estado global ni siquiera en el estado
del componente quiero que se guarden en
el estado global va a ser muy simple una
aplicación muy simple pero es para hacer
el ejercicio de entender cómo funciona
redux entonces que lo que vamos a hacer
vamos a comenzar a configurar redux para
poder hacer la llamada de red obtener
estos datos de los usuarios y colocarlos
en el estado global de la aplicación y
luego consumir esos datos desde ese
estado global de la aplicación entonces
muy bien aquí vamos a venir a el src
creamos
una nueva carpeta yo lo voy a llamar
store
algunos la suelen llamar redux yo la
llamo store pero bueno sólo depende de
cada uno y dentro de estorbo ya colocar
un archivo llamado index punto j es y
aquí es donde voy a configurar la store
entonces qué es lo que voy a decirle
bueno quiero decirle que aquí quiero
importar primeramente tengo que
configurar la store no entonces para eso
tengo que importar desde redox toolkit
desde la biblioteca que instalamos
quiero importar una función llamada
configure store para configurar las
tornas muy bien y luego tengo que
simplemente usar la configurar store
bien esto de aquí recibe un objeto
y ese objeto recibe o debe tener un
reducir
y se reduce también es un objeto y este
reducir de aquí realmente va a ser un
reducir formado por muchos otros reduce
es que ya crearemos para cada parte del
estado de la aplicación que nosotros
queramos por ejemplo yo puedo crear un
reducir para usuarios otros reduce para
productos otro reducir para facturas
etcétera no dependiendo de los dominios
que tenga mi aplicación yo creo parte
del estado de la aplicación de esa forma
y luego los uno a través de un único
reduce que es el reduce de el de la
start o del estado global no entonces
miren que aquí básicamente con esto ya
la he configurado pero bueno debo
entonces exportar debo exportar este
está store que estoy configurando aquí
así que le voy a decir simplemente que
las porte como un default
la exporta aquí perfecto guardamos los
cambios y con esto ya la habremos
configurado bastante sencillo sin tantas
líneas de código antes con el ruido es
antiguo teníamos que realizar muchas
configuraciones aquí ahora ya no hacemos
tanta cosa ahora necesito entonces
pasarle esa store a todos los
componentes de la aplicación y eso lo
tengo que hacer a través de un provider
y bueno ya la biblioteca de read extrae
un componente provider entonces
simplemente lo debo usar aquí entonces
en el componente up
simplemente le voy a decir que aquí va a
estar lo de read ocs y voy a importar
o importar ese provider desde la
biblioteca de riac redux que también
habíamos instalado entonces aquí
simplemente voy a decirle que quiero el
componente provider este provider es un
componente así que simplemente lo voy a
usar y lo voy a colocar aquí por ejemplo
él debe estar arropando como el es un
rapper es un componente wrapper es un
provider tiene que estar arropando todos
los componentes que nosotros queremos
que tengan acceso a la store es decir al
estado global
entonces ese provider va a estar
arropando los dos componentes que
nosotros tenemos aquí y aquí store
simplemente va a estar es una propiedad
que le pasamos al provider y que va a
tener aquí como valor el store que
nosotros deberíamos estar importando una
inclusión no lo importado todavía así
que lo voy a colocar aquí import store
lo voy a importar desde el store que
acabe de crear aquí está en la carpeta
store así este store lo puedo usar aquí
pasársela aquí que es este de aquí
perfecto guardamos y con eso entonces ya
habremos configurado la store y ya la
estamos pasando a través del provider al
resto de la aplicación muy bien que
guardamos los cambios y ya no tendríamos
que hacer más nada aquí entonces ahora
lo que debemos hacer es comenzar a crear
nuestros reduce de cada parte del estado
de la aplicación y para eso yo voy a
volver aquí a la carpeta store y voy a
crear una nueva carpeta dentro llamada
slice est
esto lo puedes llamar tú de la manera
que quieras pero bueno yo por convención
voy a colocar esa carpeta aquí en slice
es y dentro yo suelo colocar una carpeta
para cada dominio de cierta forma cada
dominio del estado entonces por ejemplo
yo voy a tener un slice o un reducir
para el usuarios entonces yo creo dentro
una carpeta llamada users y dentro de
esa carpeta voy a tener un archivo index
punto gota es
este yo puedo tener varios reduce el si
para bar para cada reducir en mi caso
bueno yo crearía una carpeta para
separarlos de esa forma pero tú lo
puedes estructurar de la manera que
mejor te parezca muy bien entonces aquí
dentro de ese archivo index punto está
ese yo necesito crear un nuevo slice en
redux toolkit son llamados slice esas
partes que podemos tener del estado es
decir una parte para los usuarios una
parte para productos etcétera
eso se llama slice o una capa que sería
básicamente una parte del estado
entonces necesito crear un slice para
los usuarios entonces aquí lo que hoy yo
le voy a decir es que tengo que importar
desde la biblioteca de redux toolkit
una función que se llama create a ver
create slice este de aquí perfecto y con
eso voy a crear un slice así que la
tengo que usar avisar aquí create slice
y esto de aquí también recibe un objeto
y ese objeto va a tener una serie de
opciones lo primero que va a tener o de
propiedades lo primero que va a tener es
un nombre es el nombre que yo le voy a
dar a ese slice entonces yo lo voy a
llamar por ejemplo en este caso users
ahora así es como me voy a referir a él
dentro del estado y también va a tener
un estado inicial en el state y esto va
a ser un objeto el estado inicial es
como arranca mi aplicación en cada para
cada parte del estado no entonces yo por
ejemplo lo que voy a tener es una lista
de usuarios aquí en los usuarios voy a
tener una lista de usuarios y como
arranca esta lista bueno si es un array
arranca vacío luego lo voy a llenar con
los usuarios que yo traiga desde la
consulta de la japay perfecto y por
último lo que voy a tener es un reduce a
unos reduces porque podemos tener varias
entonces aquí esto también va a ser un
objeto por ahora no voy a crear ninguno
luego ya podemos empezar a crear algunos
reduce es aquí básicamente es esto de
aquí esto entonces yo lo tengo que lo
tengo que exportar de aquí
a exportar y lo tengo exportar en una
constante que le tengo que colocar un
nombre no entonces le voy a colocar por
ejemplo user slice se le suele colocar
la palabra slice porque es algo bien
slice porque es un slice que que estamos
creando una parte del estado no muy bien
ahora qué es lo que vamos a hacer bueno
tenemos que también exportar inclusive
lo voy a exportar como default aquí
exportar como default vamos a exportar
el reduce de este slice para poderlo
agregar donde poderlo agregar aquí en
nuestra en nuestra state o en nuestra
estoy aquí porque como les dije el
reducir de nuestra store que es único
está formado por varios reducirse y esos
reducir vienen de cada slice que creemos
que cada slice es una parte de nuestro
estado
aquí yo creo un slice solo para la parte
de usuarios entonces voy a exportar aquí
de ese slice el reducir no entonces aquí
yo lo llamé y usher y usher slice punto
reduce entonces el reducir de este slice
lo voy a exportar y eso lo tengo que
importar aquí para poderlo agregar a los
reduce desde aquí así que aquí le voy a
decir que voy a tener los reduce y como
sólo tengo uno pues voy a importarlo se
llama y usher hoy users y lo voy a
importar desde la carpeta de slides y
users perfecto y simplemente agregó stay
users aquí
muy bien con eso entonces ya habremos
agregado el slice day users a la store o
al estado global y eso pues ya sabemos
que está siendo pasado a todos los
componentes que tenemos en la aplicación
a través de éste provider muy bien que
es lo que necesitamos hacer ahora bueno
necesitamos hacer la llamada de red que
trae los usuarios o la consulta que trae
los usuarios y bueno sólo podemos hacer
incluso aquí dentro del mismo archivo de
redux reid ox entonces nos ayuda mucho a
organizar eso también porque podemos
hacer las llamadas de red aquí dentro
que son realmente operaciones asíncronas
que son tratadas por redux a través de
un middleware el millwall que trae por
defecto es un middleware llamada llamado
redux bank tenemos varios redox down
redux saga pero él redux down es el que
trae por defecto ya configurado en la
biblioteca de redux toolkit antes antes
lo teníamos que configurar nosotros
mismos en el redux antiguo pero aquí ya
eso queda bordes
si tú no te preocupas por crear todo ese
código de wyler plate así que bueno
entonces lo que vamos a hacer es crear
aquí dentro esas funciones que van a
ejecutar operaciones and síncrona como
las consultas a la api entonces aquí yo
voy a crear una función llamada por
ejemplo fecha
al users es decir la que va a traer a
todos los usuarios y esto de aquí
simplemente va a ser un road function
esa road function aquí va a retornar
otra función o debe retornar otra
función
entonces aquí esto lo que debe hacer es
retornar
otra función de esta manera perfecto
pero bueno esto de aquí si el retorno a
una función de esta manera y no tenemos
más código que colocar aquí podemos
evitar colocar el return y dejarlo de
esta forma así bueno vamos a quitar esta
llave que estas tareas sobrando y
perfecto de esta forma puede quedar
ahora que es lo que vamos a hacer aquí
la llamada de red y bueno o la consulta
no al papel y cómo lo hacemos bueno para
eso tenemos que usar action que fue la
biblioteca que yo instale aquí para eso
action entonces lo vamos a importar aquí
como action desde la biblioteca access
perfecto y ese action entonces me va a
permitir por ejemplo ejecutar un método
http del tipo get para traer alguna cosa
y donde lo vamos a traer bueno de la
play que les había acabado de mostrar de
esta de aquí vamos a copiar esta url que
me trae los dos usuarios disponibles en
esa pay y los vamos a colocar aquí
dentro de estas comillas y bueno como
esto de aquí que es una operación
asíncrona entonces va a retornar una
promesa y esa promesa la podemos tratar
puede ser aquí mismo la podemos tratar
con un then si todo sale bien entonces
esto va a tener aquí una respuesta
response y aquí vamos a ver qué hacemos
con esa respuesta pero si no así ocurre
un error también entonces podemos aquí
recibir
un error y ese error también lo
podríamos tratar pero aquí bueno nos
vamos a poner a tratar los errores
simplemente vamos a decirle que lo
queremos por ejemplo imprimir por
consola caso ocurre alguna cosa voy a
dar aquí un control chispa y a formatear
el código complete yo que es una
extensión que tengo instalada aquí en
visual studio code para formatear el
código muy bien entonces aquí si todo
sale bien voy a tener una respuesta que
trae un cuerpo llamado deira y ese deira
me trae todos estos datos de aquí
entonces dentro de ese deira va a estar
este de irak que serían los que sería la
raíz de los usuarios
yo voy a ignorar estas otras
informaciones sólo quiero el array de
irak entonces qué sucede que nosotros
aquí vamos a tener que la respuesta trae
a neira que es el cuerpo de datos y ese
deira dentro trae otra propiedad de ira
que sería el array con los usuarios pero
muy bien que lo que nosotros queremos
hacer con este reino esa lista de
usuarios bueno queremos colocar
en el estado global aquí está el rey que
está vacío aquí de la lista lo queremos
alimentar con esos usuarios que vienen
de la consulta y cómo hacemos para pasar
esto desde aquí hasta aquí bueno para
eso nosotros vamos a tener que usar unas
acciones que están dentro de los
reductos porque porque bueno esto de
aquí incluso podrían no estar en este
mismo archivo yo lo estoy colocando aquí
porque queda mejor pero esto de aquí
incluso podría estar fuera en otro
archivo podría ser un request que está
siendo hecho desde el propio perdón
desde el propio componente y usher list
tal vez usando un giuseppe que lo
podríamos colocar todo aquí entonces
para poder mandar esos datos desde allá
hasta aquí necesitamos un medio de
comunicación y ese medio de comunicación
es una función llamada action que está
dentro del objeto de los reduce entonces
yo voy a crear una acción para eso le
voy a llamar set y usher list porque él
va a aceptar la lista de usuarios aquí
en el estado
en el estado de la aplicación entonces
esto de aquí es una función
yo creo que la función y esa función que
recibe primeramente recibe el state es
decir este estado de aquí lo recibimos
aquí y además de eso también recibe una
acción bien que es lo que va a suceder
aquí que nosotros vamos a usar ese state
punto miren que aquí me aparece list es
decir esta lista de aquí a esa lista yo
la quiero ser igual al nuevo valor el
nuevo valor que es bueno la lista de
usuarios que nosotros vamos a obtener
desde la consulta y que la queremos
pasar acá entonces dónde viene esa lista
de usuarios viene en el action el action
tiene una propiedad llamada pay load
este de aquí y es el pay lo va a traer
los datos la lista de los nuevos datos
el listo de usuario que sería en este
caso que será el nuevo dato que nosotros
queremos colocar en el estado
miren aquí entra en lección y el estado
el estado va a recibir y el action es lo
que está llegando como un dato nuevo
ahora sí nosotros podemos usar este este
acción de aquí para poder pasar la
respuesta hacia acá pero bueno para eso
nosotros tenemos que exportar esta
acción de aquí para que ella quede
visible a lo que está por fuera de los
reduces entonces aquí yo le voy a decir
que quiero exportar
que conste vamos a desestructurar esto
desde el user slice
desde aquí desde las acciónes él va a
tener unas secciones que son estas que
están dentro del objeto de reducir y
aquí entonces yo quiero exportar a la
que se llama set y usar list esta de
aquí ahora sí entonces como la estoy
exportando y ya queda visible a esta
función de aquí y la puedo usar justo
aquí sets y usher list y bueno qué le
voy a pasar aquí le voy a pasar entonces
response
la respuesta trae un cuerpo de datos y
ese cuerpo de datos va a traer dentro un
array que también se llama their
perfecto pero esto de esta manera no nos
va a funcionar solamente así porque
porque tenemos que usar un despacho o un
despacho en este caso que es quien se
encarga de ejecutar a la acción' los
dispatcher son los que ejecutan las
acciones y donde entre ese despacho
aquí entra como un parámetro en esta
función lo vamos a llamar aquí dispatch
él entra aquí y de esa manera entonces
yo lo puedo usar justo aquí dispatch
es una función y dentro entonces le paso
la acción que quiero ejecutar de esta
manera ahora si nosotros estaríamos
ejecutando esta acción que simplemente
recibe los datos que vinieron desde la
consulta a la pei y se los pasa aquí
a esta acción entran en el en la
propiedad de pay lloyd y sp y love está
siendo asignado al estado de lista es
decir quedan guardados aquí si nosotros
guardamos aquí y refrescamos aquí
nuestra aplicación vamos a tener los
usuarios que estaban desde el inicio
ahora quienes subieron les sugiero que
instalen otra extensión llamada redux de
tools aquí en google chrome esta
extensión llamada redux de tools esa
extensión los que les va a permitir ver
el estado de la aplicación aquí en
inspeccionar si yo doy clic derecho
inspeccionar me va a parecer una pestaña
ahora aquí llamada redux miren que esta
pestaña me deja ver varias cosas me deja
ver la acción que se está ejecutando me
deja ver el estado la diferencia entre
el estado anterior y el nuevo en donde
entre otras cosas entonces lo que más me
interesa es el estado miren que en el
estado ya me dice que está usuarios y
users tengo un slice en el estado
llamado you ser no tengo más nada sólo
ese y dentro de ese estado pues slice
tengo la lista de usuarios que está
que está vacía pero ya se debería estar
llenando porque realmente nosotros ya
estamos haciendo la llamada a la peli e
intentando llenarla pero porque no se
está llenando buenos y nosotros volvemos
aquí
no se está llenando porque esta función
que es la que hace la llamada no la
estamos llamando en ningún lado debemos
ejecutarla en algún lado donde la
ejecutamos bueno en el componente que le
interesa que se que se consulten a los
usuarios y cual componente es ese el de
la lista de usuarios este de aquí
entonces qué sucede que yo no voy a
necesitar más estos usuarios estáticos
que estaban aquí voy a quitar
y voy a dejar el array aquí vacío por
ahora aquí entonces aquí dentro yo
necesito ejecutar
esta función de aquí fecha al users que
me trae a todos los usuarios pero como
eso es una operación que es asíncrona
nosotros tenemos que tratar eso como
efectos colaterales con un giuseppe que
ya habíamos visto eso antes así que aquí
yo voy a importar a news effect
y lo voy a usar por aquí voy a usar de
hecho voy a aprovechar aquí el
[Música]
aquí el sniper que me crea ya toda esta
estructura por ahora no lo voy a dejar
nada de aquí de dependencias y aquí voy
a quitar todo esto y qué es lo que voy a
hacer aquí bueno voy a ejecutar esa
función pero la tengo que importar así
que aquí voy a colocar todo lo que es de
redux voy a importar una función desde
el slice que está en la carpeta de store
slice y users
perfecto desde ahí qué es lo que quiero
bueno quiero la función llamada fecha al
users y esta fecha al users la voy a
ejecutar aquí
coloquemos la de esta manera yo guardo
pero se van a dar cuenta de que a pesar
de que se está ejecutando aquí no nos va
a traer los datos bueno aquí ya no
aparecen los usuarios porque los
quitamos si yo voy aquí inspeccionar y
voy a enel redux en el estado miren que
aún mi lista sigue vacía no se ha
llenado con los usuarios porque a pesar
de que estoy ejecutando esto de aquí no
se está llenando con los nuevos datos
porque realmente esto de aquí necesita
ser ejecutado por un despacho nuevamente
necesitamos un despacho aquí y como lo
obtenemos bueno usando la biblioteca
que habíamos instalado llamada react
redux esa biblioteca y entonces nos va a
haber aquí redux nos va a proporcionar
algunos looks
el primer hooks es llamado just dispatch
stage dispatch lo voy a colocar por aquí
él va a retornar una función yo lo voy a
llamar la voy a colocar quien está
constante llamada this page aquí news
dispatch mandó ejecutar aquí el hook que
me retorna a la función que queda en
esta constante que llame dispatch y ese
despacho entonces es una función que voy
a colocar aquí dispatch y ese despacho
es el que ejecuta a ésta
esta función de fets alias ers ahora sí
sí yo guardo aquí los cambios bueno aquí
me está marcando algo aquí el criterio y
es porque bueno ya que me está exigiendo
como dependencia al despacho a la
función dispatch así que se la voy a
colocar aquí para mantenerlo contento
solamente guardo los cambios y miren que
se ahora yo vengo aquí a mi aplicación
que sucedió y ahora el state de la
aplicación
se llenó con los usuarios tenemos el
estado de joseph la lista y aquí está la
lista de los 12 usuarios que están que
vienen de la pei y cada uno con sus
datos estamos entonces
usando linux en una aplicación de una
manera bastante sencilla pero miren en
este caso lo que estamos haciendo
entonces es realizar una llamada a una
para una consulta y colocando esos datos
de esa consulta los estamos colocando en
el estado global de la aplicación
muy bien ahora qué es lo que sucede qué
bueno que aquí en la aplicación no
tenemos nada por qué porque no estamos
consumiendo esos datos desde el estado
global de la aplicación así que ahora
vamos a cerrar de cierta forma el ciclo
hasta ahora solo llevamos los datos
hacia el estado global ahora los debemos
consumir desde allá por cualquier
componente que lo necesite en este caso
como es una aplicación bien sencilla
quién los va a necesitar es el mismo
componente de user list pero bueno como
hacemos eso para eso tenemos que usar
otro book que viene aquí en esta
biblioteca llamado ius el lector es
ellos el lector no va a permitir
entonces tomar parte del estado de la
aplicación y bueno yo y de hecho usar
aquí el snipe y el selector y el jean
auto completa miren que él va a colocar
aquí lo que yo quiero obtener desde el
estado miren aquí ejecutó el fuck you
selector y eso aquí tiene una función
dentro un corvette que recibe el estado
de la aplicación todo el estado entero
pero de ese estado yo puedo tomar parte
solamente una parte de lo que yo
necesite yo necesito aquí es la parte de
los usuarios es decir el slice de users
que yo tengo aquí este de aquí y users
perfecto y ese users inclusive él tiene
algo específico que yo quiero aquí que
es la lista es solamente aquí tiene la
lista y yo pues voy a desestructurar
esto que está siendo retornado aquí
lista entonces qué sucede qué bueno
ahora aquí yo de hecho puedo quitar este
users de aquí no necesito pero aquí me
tocaría colocar list ahora si no quiero
colocar list y dejar de ser yo puedo
renombrar este list que estoy trayendo
de aquí lo puedo renombrar como users
así de esta manera y ya queda de esa
forma si guardo los cambios y venimos
aquí miren lo que sucede ahora tenemos
todos los usuarios pero ahora están
llegando desde la app y qué pasa luego
al estado global de la aplicación y del
estado global de la aplicación
aquí a la interfaz de usuario y de esa
forma entonces estamos cerrando el ciclo
bueno aquí de hecho le voy a colocar
aquí un margin top de 4 para que separan
un poco las columnas también necesito
que se separen con un margin botón de
cuatro por ejemplo ahora si tenemos un
poco más de espacio aquí y de espacio
entre ellos también miren que tenemos
aquí la foto de cada usuario el nombre
el apellido y el email es decir estamos
entonces
consultando una app y tomando sus esa
lista de usuarios colocando esa lista en
el estado global de la aplicación y
dejándola ahí para que cualquier
componente pueda usar esa lista de
usuarios en este caso el componente que
está usando la lista de usuarios es un
componente que creamos llamado y usar
list y ese mismo yo ser list es
realmente quien aquí en este caso está
haciendo el llamado a la apei o quién
manda por lo menos a ejecutar esa
operación entonces aquí de esta manera
cerramos el ciclo de redux de una manera
bastante sencilla tal vez aquí ustedes
no le encuentren mucha gracia tal vez
mucha utilidad porque una aplicación muy
sencilla sólo podríamos hacer con un
yusef
aquí colocando todos los usuarios en el
estado del propio componente pero pues
es una manera de ilustrar cómo lo
podemos usar de una forma muy muy
sencilla ahora esto es muy útil cuando
la aplicación es muy grande es una
aplicación que escala porque ahí vamos a
tener muchos componentes y varios de sus
componentes con seguridad van a
compartirla
misma información entonces para que no
se lo estés pasando a través de prop se
la puedes dejar en un estado global o en
un estor como la de redux para que ellos
la consulten directamente desde allá ese
es el propósito de redux espero que
bueno haya sido un poco clara la
explicación y bueno así cualquier duda
surge pues no dude en escribir en los
comentarios
espero que les haya gustado el vídeo que
les haya parecido útil nos vemos en un
próximo
chao
[Música]
関連する他のビデオを見る
![](https://i.ytimg.com/vi/pX0SBJF01EU/hq720.jpg)
Learn Redux Toolkit in under 1 hour
![](https://i.ytimg.com/vi/5yEG6GhoJBs/hq720.jpg)
Redux - Complete Tutorial (with Redux Toolkit)
![](https://i.ytimg.com/vi/p3Lj9CLIWyA/hq720.jpg)
Introduction to Redux | Lecture 257 | React.JS 🔥
![](https://i.ytimg.com/vi/o-Bm_rGIBIk/hq720.jpg)
useEffect to the Rescue | Lecture 140 | React.JS 🔥
![](https://i.ytimg.com/vi/CQKfbqVzM1U/hqdefault.jpg?sqp=-oaymwEXCJADEOABSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDyJ4y8EsupR_qG8aD8VD74y6YI5g)
FAQs Angular Maximilian Schwarzmuller
![](https://i.ytimg.com/vi/hnVOvvbQrwA/hq720.jpg)
Creating our first react app using create-react-app | Complete React Course in Hindi #2
5.0 / 5 (0 votes)