Shadowing Practice: 71k - Learn English Speaking with Video

Kies een oefenmodus

Elke modus opent een volledig scherm oefenruimte.

132 zinnen

Als zinnen te kort of te lang zijn, klik op Bewerken om ze aan te passen.

React is a JavaScript library full of fancy terms like reconciliation, composition, and error boundaries.

But what do all these terms actually mean?

Let's start from the beginning with components.

Components are the building blocks of every React app.

They allow us to make all the visible parts of our applications, like buttons, inputs, or even entire pages.

Just like Legos, you can use components as many times as you want.

Every React component is a JavaScript function that returns markup.

But since React is a JavaScript library, React components don't return HTML markup.

They actually return something called JSX, which is JavaScript in disguise.

JSX is optional, but the alternative way to make user interfaces is with the function createElement, which gets annoying to write pretty fast.

So everyone just uses JSX.

Since JSX is JavaScript, you can't write attributes like you would in HTML.

You have to write them in the camel case style.

That means HTML attributes like class become class name.

Unlike HTML, which is static and unchanging, the benefit of using React is that you can use dynamic JavaScript values in your JSX.

If you have data, you can display it in your JSX using curly braces.

Curly braces accept values like strings and numbers directly.

You can use them to make your attributes dynamic.

And you can style React elements using a JavaScript object within the curly braces.

Since JavaScript functions can only return one thing, in React you can only return one parent element from a component.

So you can't do this without getting a big error.

We could fix this by wrapping these components in a div, but maybe you don't want to add another element to the page.

Instead, you can use an empty component called a React fragment.

Okay, but what if I want to pass data into another component?

For that, you use something called props.

To make a prop, create a name on the component you want to pass data to

and set it equal to some value.

And that's it.

You can then use that prop in the component you passed it to.

Props refers to properties on an object, which is what you get in the parameters of each component.

To use the prop, take it from the object like a normal JavaScript property.

Think of them like custom attributes you can add to any component.

So wait, can you pass anything as a prop?

Yes, you can.

You can even pass other components as props using the children prop.

If you make opening and closing tags for a component, you can pass other components in between them.

These past components are called children, and you can access them on the children prop of the parent component.

And it's great for something called composition, which is about organizing our React components in the most optimal way.

The children prop is really useful for creating layout components when you want your children to have the same common layout.

The key prop is another built -in prop to React.

And no, unlike the name implies, it doesn't unlock anything interesting.

The key prop is used so React can tell one component apart from another, usually when you're creating a list with the map function.

A key is just a unique string or number to identify a component.

You'll usually know when you need to add a key because React will warn you in the console.

Fortunately, if you don't have a unique value for each item, you can always use the current index from the map function.

But how does React take all my amazing code and make it display something in the browser?

That process is called rendering.

React does this for us, but it's important to know how it works, because sometimes we can do a bad thing and cause it to infinitely re -render,

which crashes our app.

The way React knows how and when to render our application is using something called the virtual DOM, also known as the VDOM.

Okay, but what does DOM mean?

DOM stands for Document Object Model, which is what every browser uses to model all the HTML elements on a web page.

And when you draw it out, it kind of looks like a tree.

Here's the complete rendering process in React.

If the state of our React app changes, then React updates the virtual DOM, which is quicker to update than the real DOM.

Then, React uses a process called "diffing" to compare the updated virtual DOM to a previous version to see what's changed.

Once it sees what's different, React uses a process called "reconciliation" to update the real DOM with the changes that it found.

Whenever someone uses our app, tons of events take place like clicks, mouse movements, and key presses, many of which we need to detect.

Event handling is how we take those user events and do something with them.

React has a lot of built -in events such as OnClick, OnChange, and OnSubmit.

These three events are ones you'll probably use the most.

If we want to alert users when a button is clicked, we would add the onClick prop to the button and connect it to a function that would show that alert.

To manage data in our React apps, we need to use state, not that kind of state though.

State is like a snapshot from a camera.

It's a picture of our app at any given time.

To manage state, we also can't use JavaScript variables.

They don't cause our app to re -render.

Instead, we use special functions like useState and useReducer.

useState takes an argument that serves as the starting value of the state variable, which is likes in this example,

and returns an array containing the state variable and a function to update that state.

Using our button example, we could also update the number of times the button's been clicked with the update function,

setClicks, and display it in the button with the state variable likes.

Controlled components use state values to have more predictable behavior.

Here's an example of a controlled component where the value typed into the input is being put into state

and controlled by the state variable value.

Here's how it works.

The user types and set value puts what the user typed into state.

The state value is then updated and finally, the input uses that updated state as its value.

Controlled components are a great pattern to use because if we want to change the component's behavior, we just need to change the state that controls it.

UseState is an example of a React hook, which allow us to hook into features such as state within function components.

There are five main types of hooks.

State hooks like useState and useReducer help you manage state within React components.

Context hooks such as useContext let you use data pass through React context Ref hooks,

such as useref, let you reference things like HTML elements, Effect hooks, like UseEffect, let you connect with external systems like browser APIs,

and performance hooks like Use Memo and Use Callback, which can improve performance by preventing unnecessary work.

You'll use all of these hooks at some point, but the majority of the time you'll likely use just three hooks in your React components: useState, useEffect, and use ref.

When you think of the word purity, you might think of something like purified water.

Purity is a term used to describe how React components should work.

But this type of purity is more like how mathematical formulas are pure.

Pure React components mean that the same input should always return the same output.

To keep a React component pure, they should only return their JSX and not change any objects or variables that existed before rendering.

The cup component in this example is impure because it changes the variable count during render, which exists outside the component.

This leads to JSX having the wrong output when it is used more than once.

To help make sure we don't run into errors like this, we can use something called strict mode.

Strict mode is a special component which tells us about mistakes as we develop our React apps.

It's really convenient because it's just a component.

We usually wrap around our app component and it'll tell us when we really shouldn't do something.

But what if we need to do something outside our React app?

Your app might need to talk with the browser API, or make a request to a server.

100

If you do have an external system, you're going to need a way to step outside of React.

101

Effects are code that reach outside of our React application.

102

Usually effects, also known as side effects, can be done within event handlers.

103

For example, to make an HTTP request when you submit a form or click on a button.

104

If you can't run your effects within an event handler, then you can run them using the Use Effect hook.

105

For example, a common pattern is to fetch data when components first load with the useEffect hook.

106

Like effects, sometimes you want to step outside React and work directly with the DOM.

107

To reference an actual DOM element, you can use what's called a ref.

108

You can create a ref with the useRef hook, and to get access to a DOM element, use the ref prop on any React element.

109

For some tasks such as focusing an input, it's much easier to reference the actual DOM element instead of attempting to do it the React way.

110

Context is a powerful way to pass prop data through your app's components.

111

Most React apps have tons of nested components.

112

To get data down multiple levels involves passing the same props through components that don't actually need it.

113

Context lets us jump through the component tree and use data at any level without making props.

114

To use context, you first create context and apparent component, then wrap your parent component in a special context component called a context provider.

115

Put the data you want to pass down on the provider, And finally, access that data in any child component with the Use Context hook.

116

Portals, on the other hand, are kind of like context but for components.

117

Portals let you move React components into any HTML element you select.

118

Portals are great for components that can't be displayed properly because of their parents' component styles.

119

for example, for displaying modals, drop -down menus, and tooltips.

120

To create a portal, just use the Create Portal function pass your component to it, and choose the HTML element where you'd like your React component to appear.

121

Suspense is a special component that helps you handle loading a component or its data.

122

Suspense is helpful for components that take some time to fetch data.

123

It provides a better user experience to show a fallback component, like a loading spinner, until the data is available instead of nothing.

124

Suspense is also useful if you're lazily loading a component, which lets us load a component only when it's needed.

125

Since React apps are all JavaScript, errors that happen during rendering can totally break your app.

126

Error boundaries are components that let you catch app -breaking errors

127

and show a fallback component to tell the user about what happened.

128

For example, our app will crash if we run this code because it throws an error when there's no user.

129

To prevent our app from crashing, we'll first add an error boundary to display a fallback component, with a more helpful error message to be displayed to the user.

130

Now if you really want to dive deep into React, I've put together a complete bootcamp to help you master every one of these concepts from front to back.

131

You can get started now at reactbootcamp .dev.

132

I hope you learned a lot in this video, and I'll see you in the next one.

App downloaden

Alles wat je nodig hebt om vloeiend te spreken

AI UitspraakScoor elke zin

IPA OefeningBeheers elk geluid

WoordenschatBouw je woordenschat op

WoordenspelLeren terwijl je speelt

Scan QR

Download on theApp Store Get it onGoogle Play

FOR YOU

Aanbevolen Video

184 zinnen

Atomic Habits - Small Habits, Big Change || Graded Reader || Improve Your English ✅

Business EnglishDaily ConversationUniversity Students

239 zinnen

My 4.9-Star iOS App Is Actually a Website: Here’s How I Built It

Daily ConversationUniversity StudentsWorking Adults

37 zinnen

How to Create & Style Closed Captions Fast in ActivePresenter 10.5

Daily ConversationWorking Adults

91 zinnen

TS 97 Quick Start Video

Daily ConversationUniversity Students

320 zinnen

The React Interview Questions You need to Know

Business EnglishInterview EnglishUniversity Students

Woordenschat en spreektips bij deze les

Deze video bevat 132 zinnen en 2007 woorden om na te spreken. Het gesproken deel duurt 11:51. De spreker praat in een natuurlijk tempo van ongeveer 169 woorden per minuut, dicht bij een alledaags gesprek. Slechts 77% van de woorden hoort bij de 3.000 meest gebruikte Engelse woorden, dus de woordenschat is pittig.

Belangrijke woorden in deze video

15 minder gangbare woorden uit de video, met uitspraak en betekenis:

component /kəmˈpoʊ.nənt/ (zelfstandig naamwoord) — onderdeel, component. A smaller, self-contained part of a larger entity. Often refers to a manufactured object that is part of a larger device.
hook /hʊk/ (zelfstandig naamwoord) — haak. A rod bent into a curved shape, typically with one end free and the other end secured to a rope or other attachment.
element /ˈɛləmənt/ (zelfstandig naamwoord) — element. One of the simplest or essential parts or principles of which anything consists, or upon which the constitution or fundamental powers of anything are based.
render /ˈɹɛn.dɚ/ (werkwoord) — veroorzaken. To cause to become.
variable [ˈvæɹ.i.ə.bl̩] (bijvoeglijk naamwoord) — veranderlijk, variabel. Able to vary or be varied.
portal /ˈpɔːɹtl̩/ (zelfstandig naamwoord) — portaal. An entrance, entry point, or means of entry.
attribute /ˈæt.ɹɪˌbjut/ (zelfstandig naamwoord) — attribuut, eigenschap. A characteristic or quality of a thing.
virtual /ˈvɜɹt͡ʃuəl/ (bijvoeglijk naamwoord) — virtueel. In effect or essence, rather than in fact or reality; also, imitated, simulated.
wrap /ɹæp/ (werkwoord) — inpakken, omhullen. To enclose (an object) completely in any flexible, thin material such as fabric or paper.
boundary /ˈbaʊndɹi/ (zelfstandig naamwoord) — grens. The dividing line or location between two areas.
curly /ˈkɝli/ (bijvoeglijk naamwoord) — krullig, krullerig. Having curls.
helpful /ˈhɛlp.fl̩/ (bijvoeglijk naamwoord) — behulpzaam. Furnishing help; giving aid; useful.
output /ˈaʊtpʊt/ (zelfstandig naamwoord) — productie. Production; quantity produced, created, or completed.
string /stɹɪŋ/ (zelfstandig naamwoord) — draad, koord. A long, thin and flexible structure made from threads twisted together.
connect /kəˈnɛkt/ (werkwoord) — verbinden. To join (to another object): to attach, or to be intended to attach or capable of attaching, to another object.

Phrasal verbs die je zult horen

get in (werkwoord) — binnenraken. To get into or inside something, literally or figuratively.
stand for (werkwoord) — staan voor. To mean; to symbolize; to represent; especially of an acronym or abbreviation.

Uitspraak om op te letten

De spreker gebruikt 25 samentrekkingen en verkorte vormen, zoals don't, can't, you'll. Spreek ze kort uit, zoals je ze hoort.

De klanken “sh” en “zh”: composition /ˌkɑm.pəˈzɪʃ.ən/, reconciliation /ˌɹɛkənˌsɪliˈeɪʃ(ə)n/, optional /ˈɑp.ʃə.nəl/, snapshot /ˈsnæpʃɒt/
Lange woorden — let op de klemtoon: composition /ˌkɑm.pəˈzɪʃ.ən/, reconciliation /ˌɹɛkənˌsɪliˈeɪʃ(ə)n/, unnecessary /ʌnˈnɛs.əˌsɛɹ.i/, mathematical /ˌmæθ(.ə)ˈmæt.ɪ.kəl/, fortunately /ˈfɔɹ.t͡ʃə.nɪt.li/

Zo oefen je met deze video

Luister de hele video één keer zonder te spreken en noteer de woorden die je niet kent.
Begin op 0,75× snelheid, spreek zin voor zin na en ga terug naar normale snelheid zodra het makkelijk gaat.
Neem jezelf op en vergelijk met het origineel; let daarbij op woorden als component, hook, element.

Grammatica in deze video

De structuren die de spreker het meest gebruikt, met de exacte woorden uit de video:

Structuur	In de video
Lijdende vorm be + voltooid deelwoord — het gaat om wat er gebeurt, niet om wie het doet	are called · is used · is called
Betrekkelijke bijzinnen who / which + zin — extra informatie over een persoon of ding	JSX, which is · HTML, which is · object, which is
Present perfect have/has + voltooid deelwoord — iets uit het verleden dat nu nog telt	button's been clicked · I've put

Wat is de Shadowing-techniek?

Shadowing is een wetenschappelijk onderbouwde taalleermethode die oorspronkelijk is ontwikkeld voor professionele tolkentraining en gepopulariseerd door polyglot Dr. Alexander Arguelles. De methode is eenvoudig maar krachtig: je luistert naar native Engelse audio en herhaalt het onmiddellijk hardop — als een schaduw die de spreker volgt met slechts 1–2 seconden vertraging. In tegenstelling tot passief luisteren of grammaticadrills, dwingt shadowing je hersenen en mondspieren om echte spraakpatronen tegelijkertijd te verwerken en te reproduceren. Onderzoek toont aan dat het de uitspraaknauwkeurigheid, intonatie, ritme, verbonden spraak, luisterbegrip en spreekvaardigheid aanzienlijk verbetert — waardoor het een van de meest effectieve methoden is voor IELTS Speaking-voorbereiding en echte Engelse communicatie.

Shadowing-techniek: lees de volledige stap-voor-stap-gids →

Shadowing Practice: 71k - Learn English Speaking with Video

Kies een oefenmodus

App downloaden

10 Essential React Native Tips Every Developer Must Know

Can You Understand The 5 Levels of English?

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

The easy way to keep your repos tidy.

LangChain in 5 Minutes (Explained Clearly)

Use these CSS features instead of JavaScript

React Conf 2025 React Native Keynote