Prática de Shadowing: The React Interview Questions You need to Know - Aprenda a falar inglês com vídeo

Escolha um modo de prática

Cada modo abre uma sala de prática em tela cheia.

320 frases
Se as frases estiverem muito curtas ou longas, clique em Edit para ajustá-las.
1
five most frequent React interview questions
2
and they actually cover up all the fundamentals of React and
3
if you actually understand these five
4
that means you're basically understanding how React works from rendering to basically SSR to global state management
5
and pretty much everything you need to know.
6
The first question or the first most frequent React interview question is how to pass data from child to parent.
7
We all know that React has actually the parent-child flow diagram with like data flowing.
8
So like it flows from the parent, which is, you know, always on the top and it flows down to the child.
9
But now how do we take it actually the data, how let's say a child wants to communicate with the parents
10
and actually send a piece of data from the child to the parent.
11
How can we do that?
12
So let's imagine we've got this simple react component, which is called the parent component that has a child called child component.
13
And that inside of the child, we've got like an input.
14
So what we want is actually whatever we put inside of the input, we want to send that piece of data from the child right into the parent.
15
So how can we do that?
16
So simply just declare a state in here on the top and you declare the state on the parent.
17
For example in here, you know, just to be able to receive the data from the actual child.
18
So you do like data from child and set data from child.
19
You create a simple handler that is like handled data from child
20
that's going to receive the actual data received from the child and actually update the state with that piece of data.
21
And simply in here on the GSX, you just pass in the send data to parents, and you just bind it with your handle data from child callback,
22
which means you're just basically grabbing the data and actually just setting the data on your own local state.
23
So now on the child in here, we just simply have an input and everything.
24
But also like whenever we do on change, that means whenever every single keystroke that happens to be on the input.
25
So every single key stroke in here, we do actually through props, every cool props, because this actually being pass through props, the send data to parents, we call it through props in here,
26
and we pass in the value we want to send back to our parent.
27
And of course, the value is going to be like whatever we type inside of the, like particularly the input in here, and everything is going to flow up into the parent component here,
28
is going to be stored locally into the data.
29
And everything is going to flow up into the parent component here, is going to be stored locally into the data from child state.
30
And now, of course, we can use the data from child state in here to basically render whatever we want.
31
And then on, of course, we can go ahead and render the data from child state in here to actually, you know, showcase and display the data received from the child component.
32
So this is basically what our example looks like.
33
We've got a parent component here on the top.
34
Right now, for example, the child input in here is empty.
35
So we've got nothing.
36
But if you type something on it, like hello from the other side or something, you're going to have basically this is going to flow on every single keystroke.
37
So like on every single key stroke you type in here, it's going to flow back into the parent.
38
And that's how you basically pass data from child to parent.
39
The second question is how to render an element outside of the component scope or the components tree.
40
For example, let's imagine we've got this real simple component here, which is called render elements outside tree.
41
And instead of that, we've got a div.
42
And instead of the div, we've got a paragraph and a button.
43
So that means wherever we're actually going to render this element, those two, like the paragraph and the bottom,
44
I'm actually going to render inside of the tree depending on where we place that particular component.
45
So for example, for our case in here, we're actually placing the render element side tree inside of the GSX up in here, which means basically inside of the root,
46
inside of like the main element in here.
47
Of course, for our up component, if we go to the main.gsx, the up component is going to be directly rendered inside of the root.
48
And if we track back the root, The root is basically, you know, a div inside of the body in here.
49
So the body is actually, you know, the parent of all dom nodes.
50
Then it actually comes right after the root in here.
51
And of course, we render all of our React components and elements inside of React.
52
And of course, we render all of our React elements and components inside of this root container.
53
So now from this element, what we want is actually we want to render a particular element.
54
Let's say we want to render a paragraph.
55
but instead of rendering it inside of the root in here
56
and inside of the tree we want to render it directly to the body from this component.
57
I mean you might probably be thinking oh that's not really passable how am I supposed to do
58
that or why not just go ahead and have another component
59
and just like put another DOM node in here
60
and actually say oh you can render it over here
61
but like for us actually React provides a really really nice API
62
that is called portals that allows you to do exactly that easiest way possible.
63
So with portals, we can actually go ahead and import the create portal function or method from the React DOM.
64
That's basically going to allow us to render a child component or a child React element in here.
65
And actually, the second argument will specify where to render it particularly.
66
So here we are actually grabbing the DOM node in here by doing document, getElementsById, and we do model to grab this model in here.
67
So that means it's going to grab us this reference to this particular domino
68
that has an ID of model in here and we're just going to render this paragraph right inside of it.
69
So technically this paragraph is not going to be placed in between the first paragraph and the button, but instead it's going to be completely placed outside of the current tree.
70
So if we go ahead and look at it, there you go.
71
So we've got the first paragraph in here.
72
This is actually the last button in here.
73
And the one that actually is specified using a portal, it's actually being rendered completely outside into the modal container.
74
This child is placed inside the document body in here.
75
And if you try to look into it, if you go inspect in here, go to elements.
76
Now, if you look inside of the body in here, inside of the body, we've got the roots, which has pretty much everything.
77
And if you look at the modal, the modal basically has this.
78
So it has the paragraphs we're rendering using our portal.
79
And that's simply how you render a component or elements outside of the react tree.
80
The third one is how to implement code splitting in your react app and why.
81
And by code splitting in here, we also mean lazy loading of react components.
82
So that basically the question in here covers both of the topics.
83
So lazy loading is basically deferring loading components code until it's rendered for the first time.
84
And that's basically used when you have a lot of components and a big projects or mid-sized projects.
85
And you lazily load components on demand, only on demand,
86
to basically make the main bundle of the application or the website smaller and actually easier to be loaded
87
when the website is firstly visited by a person or something and only load those functionalities,
88
those extra functionalities or extra components when they are needed on demand.
89
So lazy loading is officially supported by React, of course, and it has an API for it that's called lazy loading it has a function
90
that allows us to do that and suspense and everything
91
and it uses javascript promises behind the scenes to handle the lazy loading components
92
so for example in here we've got this simple component here called lazy load model
93
and let's imagine this one has actually a button where it loads
94
when you click on that button it's called like open model
95
so when you click on it it opens a particular model
96
or a dialog for you
97
and let's say we want this dialog to be only lazy loaded
98
when the button is clicked so like when this component is rendered the model is not going to be loaded whatsoever.
99
It's only going to be loaded when the button is clicked and the model is about to be opened.
100
Let's say, for example, this model has a lot of code
101
that we don't want to actually initially load into our bundle to make our website
102
or React application lightweight and smaller and easier to be loaded over the network and everything.
103
And of course, our model component here is just a normal component.
104
If you go inside of components, model.gsx in here, just a normal component.
105
It uses GSX to render stuff with Tailwind and stuff like that.
106
So it's pretty easy, pretty simple.
107
And the way to lazy load is actually using the lazy function that is actually going to be imported from React.
108
So you do lazy, you actually return a callback on it.
109
So you do a callback in here and you do import component model.
110
Now you don't need this delay for demo because I'm actually just delaying this just to see the demo.
111
But the simple way you need to do is actually use the import and you use the import as a function, not like the normal import we're used to do,
112
but import with a function in here that's going to actually return a promise for you
113
and you give it the path of the component that you want to lazy load.
114
And this return a promise, if you look into this, it's going to be a promise and it's going to only be loaded when you actually call and render this modal component.
115
Now, the way you use modal in here
116
and the way to render the lazy loaded modal
117
or other component you actually lazy load in is by just calling it and putting it inside of Suspense.
118
So you import Suspense in here from React.
119
Suspense basically allows you to display and render a fullback UI like a loading UI
120
while this model is lazily loaded over network.
121
Because of course, this is not going to be loaded initially.
122
It's only going to be loaded on demand.
123
That means the JavaScript code and the bundling is going to be only loaded when this model is about to be rendered.
124
And the model here is going to be rendered only
125
when we click on the button and when this show model is going to turn to true.
126
So that means this suspense is actually going to go ahead and display as fullback UI in here.
127
We're displaying just like a small loading text in here while code for the model is loading.
128
Once it's loaded, it's going to just like, the model is going to completely replace the loading here.
129
So if you look at it real quickly on the example here, if you click on the open model example, we see loading here while the code is loading.
130
And once it's loaded, we're going to find and actually see, we're going to have our model being rendered for us by React.
131
And when we implement lazy loading, that's what's actually going to enforce code splitting of our components.
132
So for instance in here, because we're lazy loading the model.
133
So if you go and actually see our build directory because you're using Vita in here and actually, you know, Vita is going to generate and build all the JavaScript and React in here.
134
I'm going to just turn it into a JavaScript code in here for the browser.
135
So I'm going to find a couple of assets in here.
136
We're going to find the index, which is the main file in here that has all the code for the whole website and all application.
137
And because we're lazy loading the model in here, it created a separate JavaScript file for it, which means a separate bundle.
138
And it didn't, you know, this is what I mean by code splitting.
139
So you split the code of the model into a completely separate file that could be lazy loaded on demand.
140
And that's going to make your application run faster and gets loaded fast.
141
And if you want to double check if it's lazy loaded or not, you can go to the network tab in here and actually refresh.
142
You're going to find all the JavaScript in here being loaded for you.
143
But if you actually go ahead and clear and try to click on open model, you're going to find the model.jsx only gets loaded when you click on the open model button,
144
which means it's being lazy loaded and have our React code splitting work as charm.
145
Fourth question is, what is the best way to add a global store to a React Outdoor project?
146
And I think the best answer for this kind of question
147
is it depends on exactly what library the team wants to use for of course managing the global state
148
because there are so many libraries it actually depends on exactly the circumstances
149
and what the team wants and what actually works best for the projects
150
and of course the two most used and frequent libraries in here
151
and i'm going to talk about the first one here
152
because that's pretty much used everywhere which is redox
153
and i know a lot of you actually already know Redux
154
and probably like 90% of the time Redux is going to be the answer for most of the questions like that.
155
So Redux is pretty good, it's pretty accurate, it's wild and it's used everywhere and it's easy to integrate and everything.
156
Or the second one
157
which is actually coming really really well like these last days is called Zeus 10
158
which is very integrated to work with React and React hooks
159
and everything and it's super super simple to use and set up in just couple of seconds.
160
So I'm going to start with Redux in here.
161
For Redux, there's actually a Redux toolkit, which is another library that uses Redux behind the scenes, but actually provides optionated sort of setup
162
that allows you to easily set up Redux
163
because Redux is a little harder and actually has some dependencies to install and everything.
164
But using Redux toolkit, it's going to be super easy
165
and straightforward for you to set up and actually use Redux inside of your projects.
166
For instance, in here for our projects in here, we have two implementations.
167
So Redux in here for simply what you need to do is actually create first a slice
168
so of course after installing a redox toolkit
169
and everything you have to install redox toolkit and actually go ahead
170
and create a slice it's sort of like a slice of your global store
171
so you imagine global store has many slices
172
and each slice in here is just like an object
173
that has a lot of properties and function or particularly methods
174
so for example in here i've got theme slice
175
which is has a name has an initial state with the mode light in here whether it could be dark
176
or light theme and it has some reducers in here now reducers are simply methods
177
that actually are going to be called by the react component actually trigger a state change in here
178
which means they change for example the mode in here from light to dark
179
or vice versa so you simply create the styles in here you create another file that's called store
180
and you actually import
181
that reducer of course you do export default theme slice reducer
182
you grab it in here to configure store from the redox.js
183
to kit that's going to actually you create a store for it.
184
And of course, you can add in here as many slices as you want.
185
And once you have got the store, you go ahead and actually import a provider from React Redux, which of course you need to install as well.
186
And you do provider, you provide the store you just created in here, and you provide all your elements that you want to use or have access to that particular store.
187
Like for example, the theme toggler in here.
188
And the theme toggler is actually of course, our component that wants to have access to our global store, which can actually go ahead and use this too
189
which is use selector to actually select a slice of the
190
state for example it's going to have full access to the state
191
and can access the mode from our theme slice
192
or the dispatch in here to actually to dispatch an action
193
of course those actions in here can be imported as well
194
from the theme slice in here the actions you just created as well
195
so you do dispatch toggle theme in here
196
and whenever this change theme in here is going to be called
197
which is called exactly when the input is checked in here like a checkbox
198
when it's checked it's going to change the theme from light to dark or vice versa.
199
And that's what you're going to get in here.
200
For example, dark mode in here, if you click on this, it's going to activate the dark mode in here.
201
If you click on it, it's going to deactivate and back and forth in here.
202
And all the data in here, the whole state is saved on a global store and any component at any time can access that piece of state.
203
Now, if you want to use Zeus 10, that's basically the same thing, but it's actually a lot simpler.
204
So Zeus 10 in here, just install Zeus 10, you import the create function in here, you do create you're going to have a set and get function
205
and this just basically you return an object and inside of
206
that object you put all your properties in here
207
which are going to be of course going to represent the
208
state for example the mode in here could be light
209
or dark and you can of course put all your methods inside the methods actually going to toggle
210
or be able to access
211
and actually change the state for example this toggle thing is actually going to go with the set
212
and it's going to set the mode depending on exactly what is the current one it's kind of like inverse it.
213
And the same thing in here for the Zeus 10 theme toggler, the component here that has access to this, you just do use app store, which is our, you know,
214
hook we created using the create method from Zeus 10.
215
And we just do use app store, we grab the state in here, we grab the mode, and we do toggle theme in here to actually access to the toggle function.
216
And whenever we call it, that's actually going to toggle the theme and actually change that on the Zeus 10 store.
217
And of course, for Zeus 10, you can basically create as many stores as you want.
218
All of them are very lightweight, very independent, and they work perfectly.
219
And of course, as I said, global state management in React is a vast thing with many libraries
220
and many options to choose from and to do with depending on the main goal of your project and your team, and of course, your preference as well.
221
Fifth and the last question in here, let's say for example, he asks you to give me an example of a basic React SSR implementation.
222
So always in the React realm in here, whenever we talk about SSR, the first thing that comes to our head is actually basically the Next.js framework,
223
which is a huge framework used by millions of developers out there
224
that does SSR and it does it perfectly with so many great features.
225
So maybe you want to outline that there is a type of frameworks
226
that already does SSR like Next.js or Remix or something like that.
227
And you outline this like very big frameworks.
228
And of course, you can give him a very simplified version of an SSR React application with like Node.js, Express.js with React.
229
So for example, you have a simple project in here that does show how SSR works.
230
And as I said before, SSR is just like server-side rendering.
231
So it has to involve a server behind the scenes
232
that actually compiles your React code and send it back to the client or the browser to render that particular React code.
233
So in here, to have SSR, you have to set up a simple project that uses Express.js and React.
234
And you basically install a couple of dependencies like Express, React, React DOM.
235
And here I chose to use ASBuild in here to compile our project.
236
Of course, you can use whatever you want.
237
You can use Webpack, Babel, but I think ASBuild is really perfect for that kind of case scenario
238
because actually basically it can compile everything very easy and it has a super easy API to follow and work with.
239
So I would really recommend going with that if you want to implement this in an interview.
240
Next in here, you just simply have a React
241
or a simple Express.js application in here
242
that serves static files from the disk in here
243
and actually uses the up router in here to do up.get to serve our react component
244
and html file in here whenever the server is hit.
245
So here we're saying it on the root of the server, root you run out of the server.
246
We're going to go ahead and read the file
247
which is the index.html which is right over here inside of the public
248
and of course it's just a simple index.html in here
249
that has basically nothing but it has this id in here root
250
which of course we're render our react component
251
that are inside of the src right inside of it
252
so we're going to use the server in here we're going
253
to read the data from the index.html in here going to grab the data
254
and make sure there is no error and last
255
but only is going to render do like response send
256
and here we're going to replace the root element in here with the root element
257
but this is actually the important part in here you have to focus on where you do react dom server
258
which is you import it from react dom for slash server
259
and you call the render to string
260
which is a method provided by the React team in here
261
to be able to render your React components into a string that could be sent back from a server response.
262
So that means render to a string in here.
263
It takes a React component like our application in here.
264
And of course, our op.gsx in here has a simple React component that uses states that renders a simple gsx in here.
265
It uses onclick, pretty much anything where you could do React normal stuff.
266
And you just render that one.
267
And of course, here is going to be converted into a string
268
and it's going to be sent back from the server to the client.
269
So the browser can render our website.
270
And here, of course, you just do listing on port, for example, 3000 or something to start the server.
271
Now, another crucial part in here is actually to make sure you build your server and client in here using ES build, otherwise they won't work and won't compile.
272
So you have to do go ahead and do build client in here.
273
Like I have a script in here.
274
I'm using ES build to build the index.js in here
275
and the server and actually bundle them out inside of the build directory.
276
So later on, I can use this start script in here to basically start our Express JS server.
277
Simply just do yarn build server.
278
That's going to build your server and yarn build client as well.
279
And last but least, you just do yarn start to start a server.
280
It's going to be listed in over 3000.
281
Now if you go to local 3000, you click on it, you're going to get your react application in here that is server side rendered.
282
And of course, it works perfectly.
283
Whenever, for example, we click on the button, the state and the counter changes perfectly.
284
And as a proof to make sure that it's actually really server-side rendered.
285
It's not like a client-side application or something.
286
And to showcase to the interviewer that you basically understand exactly what's happening.
287
You're not just copy-pasting code like chatGPC or something.
288
So you go to the network tab in here and actually head over to the local host, which is of course where, you know, the main HTML gets returned back.
289
So you go to local host in here and make sure, you know, this is the root of your website.
290
You go to preview, there's actually the HTML that's returned back from the server and rendered on the browser.
291
You go to response and you look at the HTML here.
292
That's exactly the HTML you have.
293
So it has the root in here.
294
But if you see in here, that's actually was rendered by React.
295
So this is actually our React component, our component, particularly that was rendered right over here.
296
That means server side rendered.
297
And of course, this was sent back from the server.
298
So that works perfectly.
299
And later on, of course, if you notice in here, we've got a bundle.javascript in here that gets sent back.
300
And this bundle.javascript is actually what makes this particular button in here works where hydration works particularly.
301
It's like you can click on the button and have this JavaScript work.
302
This bundle.js is very crucial.
303
Of course, this bundle.js is actually what gets compiled by using bundle or build client in here, esbuild, and you build the index.js in here.
304
And if you look at the index.js, it has, and it uses a special function
305
and you'd also to make sure you actually know
306
that one is it uses the react dom hydrate
307
and it takes the root node of a react open here
308
or you know the main components
309
that was rendered before on the server you have to provide the one here as well
310
and you provide the node where it was rendered before
311
and have that actually inside of the root node and
312
that will always to hydrate and actually activate the javascript with the rendered html from the server
313
so the JavaScript can work and of course can make your application interactive by, you know, of course you can click on the buttons in here,
314
you can change and you can have everything working as expected with JavaScript.
315
So that was the most frequent React interview questions in here.
316
So thank you guys for watching.
317
Really hope you guys enjoyed.
318
Let me know in the comments if you really like this video.
319
I can do more frequent React or X technology sort of questions for your interviews and stuff.
320
Anyway, guys, see you hopefully in the next ones.

Baixar aplicativo

Tudo o que você precisa para falar fluentemente

Pronúncia com IANota em cada frase
Prática de IPADomine cada som
VocabulárioMonte seu banco de palavras
Jogo de vocabulárioAprenda brincando

Vocabulário e dicas de fala para esta lição

Esta aula de conversação de nível B2 usa o vídeo “The React Interview Questions You need to Know”. As palavras que mais se repetem: react, component, render, inside, model. Este vídeo tem 320 frases e 4753 palavras para praticar shadowing. A fala dura 21:28. O falante fala rápido, cerca de 221 palavras por minuto, então espere sons ligados e reduzidos. 84% das palavras estão entre as 3.000 mais comuns do inglês; vale a pena estudar o restante antes de começar.

Vocabulário principal deste vídeo

As 15 palavras mais avançadas do vídeo, com pronúncia e significado:

PalavraPronúnciaSignificado
react verbo/ɹiːˈækt/reagir
render verbo/ˈɹɛn.dɚ/tornar
import substantivo/ˈɪm.pɔɹt/importados
slice substantivo/slaɪs/fatia
bundle substantivo/ˈbʌn.dl̩/fardo, trouxa
paragraph substantivo/ˈpæɹəɡɹæf/parágrafo
toggle verbo/ˈtɒɡ.əl/alternar
install verbo/ɪnˈstɔl/instalar
compile verbo/kəmˈpaɪl/compilar
portal substantivo/ˈpɔːɹtl̩/portal
depend verbo/dɪˈpɛnd/depender
toolkit substantivo/ˈtulˌkɪt/toolkit
prop substantivo/pɹɑp/escora, apoio
yarn substantivo/jɑɹn/lã, fio
dispatch verbo/dɪˈspæt͡ʃ/despachar

Phrasal verbs que você vai ouvir

PalavraPronúnciaSignificado
go ahead verbo/ˌɡoʊ əˈhɛd/vai em frente
set up verbo/ˌsɛt ˈʌp/preparar
cover up verboencobrir

Frases que vale a pena repetir

Frases curtas e completas do vídeo que você pode usar na conversa do dia a dia:

  • How can we do that?
  • We've got a parent component here on the top.
  • Let's say we want to render a paragraph.

Gramática neste vídeo

As estruturas que o falante mais usa, com as palavras exatas do vídeo:

EstruturaNo vídeo
Voz passiva be + particípio passado — o foco está no que acontece, não em quem fazis called · be stored · be placed
Orações relativas who / which + oração — informação extra sobre uma pessoa ou coisaparent, which is · component, which is · here, which is

Pronúncia para ficar de olho

O falante usa 52 contrações e formas reduzidas, como we're, we've, you're. Diga-as na forma curta, do jeito que você ouve.

  • Os sons de “sh” e “zh”: showcase /ˈʃoʊˌkeɪs/, hydration /haɪˈdɹeɪʃən/, refresh /ɹɪˈfɹɛʃ/
  • Palavras longas — acerte a sílaba tônica: dependency /dɪˈpɛndənsi/, directory /dɪˈɹɛktəɹi/, deactivate /ˌdiːˈæktɪveɪt/, whatsoever /ˌ(h)wʌtsoʊˈɛvɚ/, interactive /ˌɪn.tɚˈæk.tɪv/

Sons difíceis para falantes de português:

  • Consoante final — sem acrescentar um “i” depois: react /ɹiːˈækt/, import /ˈɪm.pɔɹt/, node /noʊd/, depend /dɪˈpɛnd/, toolkit /ˈtulˌkɪt/
  • /l/ final — a língua toca o céu da boca, não vira “u”: modal /ˈməʊdəl/, toggle /ˈtɒɡ.əl/, install /ɪnˈstɔl/, compile /kəmˈpaɪl/, passable /ˈpæsəbəl/
  • /h/ — um sopro suave, diferente do “r”: hydrate /haɪˈdɹeɪt/, hydration /haɪˈdɹeɪʃən/, handler /ˈhænd.lə/, whatsoever /ˌ(h)wʌtsoʊˈɛvɚ/

Como praticar com este vídeo

  1. Ouça o vídeo inteiro uma vez sem falar e anote as palavras que você não conhece.
  2. Comece na velocidade 0,75×, faça shadowing frase por frase e volte à velocidade normal quando ficar fácil.
  3. Grave a sua voz e compare com o original, prestando atenção a palavras como react, render, import.

O que é a Técnica de Shadowing?

Shadowing é uma técnica de aprendizado de idiomas com base científica, originalmente desenvolvida para o treinamento de intérpretes profissionais. O método é simples, mas poderoso: você ouve áudio em inglês nativo e repete imediatamente em voz alta — como uma sombra seguindo o falante com 1-2 segundos de atraso. Pesquisas mostram melhora significativa na precisão da pronúncia, entonação, ritmo, sons conectados, compreensão auditiva e fluência na fala.

Técnica de shadowing: leia o guia completo passo a passo →