Shadowing Practice: React Native for Beginners tutorial - Learn English Speaking with Video

Elige un modo de práctica

Cada modo abre una sala de práctica a pantalla completa.

347 oraciones

Si las oraciones son demasiado cortas o largas, haz clic en Editar para ajustarlas.

Hello and welcome.

I'm Dave and I'm excited about this

React Native for Beginners course.

If you want to learn

React Native and build apps that are compatible with both

Android and iOS devices, you're in the right place to start.

I'll provide links to all resources in the video description.

I'll also provide a link to join my Discord server where you can discuss

React Native with fellow students, ask questions, and help each other out.

Hey everyone, this

React Native for beginners educational video series is made possible by Zero to Mastery, also known as ZTM.

I've been recommending ZTM on my channel for a couple of years now because ZTM has an amazing selection of in -depth, up -to -date courses.

React, Next .js, Node .js, ZTM has it.

Python, AI, prompt engineering, ZTM has it.

Security, code interview prep, ZTM has it.

When viewers ask me where they can go to learn more after completing a course on my channel, I recommend ZTM.

And I always put links in my video description to ZTM courses,

just like I've linked to ZTM's React Native course in the description for this video.

After you complete this

React Native course, ZTM's Complete React Native Developer is your next logical step.

ZTM's course will reinforce the basics you learn from me and guide you through creating large -scale

React Native apps that you can put in your portfolio and show confidently in a job interview.

Look for the link in the video description and check out ZTM today.

And we begin on the React Native homepage.

You'll find that at reactnative .dev.

And you can see it says

Learn Once, Write Anywhere.

That's because when you create an application with React Native, it can run on Android devices, iOS devices, and all types of web -enabled devices,

laptops, desktops, possibly tablets or any other internet device as well as you see the different logos here for browsers,

different platforms, and of course

Android and iOS.

Let's scroll down just a little further and you can see it says create native apps for Android, iOS, and more using

React and that's what we're going to learn how to do.

Now let's talk requirements

because at the beginning of every course you have requirements both what knowledge should you already have

and what tools do you need to get started?

Let's begin with the tools.

So first, we'll go to code .visualstudio .com.

And if you don't have

Visual Studio Code or VS Code for short, you want to download that for the platform you're on.

Here, it automatically identifies that I'm on Windows, so it wants me to download for Windows.

If you're on Mac or Linux, those are also supported.

Now after you get VS Code, you will likely also want to get Git.

So that is available at git -scm .com.

And here is a download for Windows in the bottom right.

Of course, this will also identify what operating system you are on and suggest that download for you.

Now, after you have Git, there's one more thing you want to download, and that is Node .js.

And you'll find that at Node .js .org.

Now you can see you can download Node .js.

LTS is the long -term support version, and that's what I recommend.

Okay, I have VS Code running.

I have closed the welcome screen that you might see after you install VS Code, and I just have an empty folder open.

My folder is named React Native Series that you'll see over here.

You don't have to create that if you don't want to.

That is what I have called my folder.

And then you have some menus here at the top.

Now, I'm zoomed in some to help the video and help you see what's going on.

So you don't see all of the menus at the top.

But if you click the three dots, you see the other menus that are available.

We're going to open a terminal.

So you can choose the terminal menu and then choose new terminal here.

And once you do that, you'll have a terminal window.

I already had one open so I just closed one

but with this terminal window you'll notice a couple of things one

you can see where my folder is here on windows I'm in documents tutorials

and then the react native series folder that I created

but also at the top you'll see what type of terminal I'm running so

if I click this where it says bash I believe

I could hear maybe the arrow to the right there we go I could change the type of terminal

that I have here's PowerShell that comes with windows

but bash comes with git

and that's what i want to use now it just opened another new one

but i'm using the bash terminal and since you installed git you should also have

that option available for your vs code

so you'll be using the same terminal as i do throughout

this series now let's also check what versions we installed

and we can do that say with node js that we installed by typing node dash V

and you can see it gives me the version

that i just installed now

if you're watching this video months after i've created it you may have a newer version

and that's okay as well now let's do the same with git i'll just type git for git dash v

and we'll see what version of git i have installed

so those are the versions that i currently have and

if you have newer versions than that installed that's okay too

and since we've installed node we also have npm

so we can check the version of that as we will also use it in this series.

And there is my version of NPM.

Now before we're finished talking about tools, I want to mention a couple of optional VS Code extensions you can add.

Now I'm not going to focus on those, but since you're learning

React Native, you can go ahead and add them if you want to.

So let's search for React Native.

And then of course it'll take just a little bit of time and we should get what extensions are available.

Here is the React Native tools.

If you want to install that, that would be a good one to use.

Another one that we're going to have is called Expo Tools.

And Expo is a framework that we're going to introduce here in just a moment.

So you could add the Expo Tools as well.

You might want both of these extensions.

Again, I'm not going to focus on them, but as you're learning

100

React Native and continue on your journey, they will probably be helpful for you.

101

And now continuing with requirements, let's just talk about what knowledge you should already have.

102

I'm not going to say knowing

103

React is a prerequisite, although it will help you if you're learning React Native.

104

If you already know

105

React, it will be easier to understand some things.

106

But the things that I do require are what are called the pillars of the web, HTML, CSS, and JavaScript.

107

Now, I have free courses for all three of those topics on my youtube channel

108

so you can find those

109

and watch those videos as the prerequisites for this class just as

110

when you take a college course

111

or some other course sometimes there is a class

112

you should have taken before these three items will help you as you now learn react native

113

and we're back on the react native home page let's click the get started button

114

and here we have get started with react native

115

but one thing they say here that i want to really highlight is we believe that the best way to experience

116

React Native is through a framework, a toolbox with all the necessary APIs to let you build production -ready apps.

117

And so with that said, we're going to use a React Native framework called Expo, as they mention here.

118

And Expo is a framework

119

that will give us a lot of extra tools to help build our React Native apps that will work on all platforms.

120

And now we're on the Expo homepage, and this is at expo .dev.

121

From here, we want to go to the Docs link.

122

So let's go to the Docs, and from there, we want to click

123

Create a Project.

124

Now you can see on the Create a Project page, they give us some code that we can copy,

125

and we'll paste it into our terminal in VS Code to help create our Expo application with React Native.

126

Back in VS Code, I'm going to open a terminal window by pressing control and the back tick.

127

And now that I've copied that code from the Expo website, I'm going to paste it here by right clicking.

128

And of course, I'm on Windows.

129

So if you're on Mac or Linux, that could be just a little different.

130

Now that I've pasted that command in here, it says npx create

131

Expo app at latest.

132

So it's going to install the latest version for Expo.

133

Let's go ahead and press enter it will start to ask us some questions

134

and it says what do we want to name the app well i'm going to suggest

135

that you name this welcome as it's just an example here in the welcome get started video

136

you could name it get started or go with my app

137

if you want to i'll just say welcome what i'm going to call it is lesson one

138

because i'm creating a series of tutorials here so lesson 01

139

and press enter and now it starts creating everything that we need for this project.

140

Now one thing I'm commonly asked about a tutorial series

141

and especially a few months after it's been created or a year

142

or even two years later is is this tutorial still valid

143

because tech does change and I'll say yes this tutorial is still valid

144

if you install the same dependencies that I have in my package .json file

145

and you'll soon see a package .json file in this lesson 01 folder when this finishes installing.

146

Now what I'm going to suggest

147

if you're watching this video a year after I've created it

148

or two years after I've created it is you're probably going to want to get my code from GitHub

149

and there you're going to copy that package .json

150

and then you'll type npm install to get the exact same versions that I use in this tutorial,

151

and that will let you have the same experience that I've had.

152

So for now, you can see we have a message.

153

Everything is installed, and it says we want to CD, that is change directory, and go into lesson 01.

154

So let's do that down here, CD, lesson 01.

155

If you named yours welcome, it would be CD welcome.

156

And that is going to take us into that lesson 01 folder that I have.

157

So now you can see I'm in documents, tutorials, React Native series.

158

And as far as the terminal is concerned, I am in the lesson 01 folder.

159

Now up here, we'll have to open it to see what's inside.

160

I was talking about a package JSON file, and now you see this.

161

So we typed install latest.

162

If I scroll back up here, we might still be able to see that.

163

No, there's a lot of messages.

164

But we had that pasted command at our terminal, and it said npx create expo app at latest.

165

Well, behind latest are a lot of different packages this create expo app installed.

166

So I'm going to close this and we can see everything that was installed under dependencies in my package JSON file.

167

So now that I scroll down, you can see all of these dependencies it added for our application.

168

Here's React.

169

Here's a lot of things to do with Expo.

170

We also have some

171

React Navigation for native up here, React Native things down here.

172

So a lot of things were installed.

173

Now these are the versions that I currently have as I create this tutorial.

174

If you're watching the video a year or two years from now, there's probably newer versions of these things available,

175

which you will get if you install at latest like we just did here in this video.

176

But if you want to have these exact same versions

177

that I do for the tutorial and have the exact same experience that I show,

178

what you'll want to do after you go ahead and copy my package JSON from GitHub,

179

You could just highlight all the code and paste it in here if you want to, but you want to have this package .json file.

180

And after that, I will just open up the terminal window again, and I can type npm install,

181

and it will install all the versions that are in my package .json file.

182

And that's what it's doing now, but it quickly just looked over everything and said I was already up to date,

183

and so it left it alone.

184

If you haven't installed anything yet, it would take just as long as that first installation.

185

Back on the Expo website, we were on the Create a Project page.

186

Now let's go to the Set Up Your Environment page.

187

And it asks you a few questions.

188

It says, where would you like to develop?

189

And you can choose Android device.

190

You can choose iOS device.

191

You could also choose

192

Android emulator or iOS simulator.

193

And we'll look at each one of these.

194

So the Android device itself, once we choose that, it says, hey, use Expo Go.

195

That is the Expo application that we'll use to test out an application with.

196

But it doesn't mean we're only going to build for Android.

197

And then it gives us a QR code that you can scan that will take you to the Expo app.

198

The Google Play Store or the Apple Store would have that to download, for example.

199

So if I scroll back up here and I choose iOS device,

200

then it still says Expo Go and it says set up an iOS device with Expo Go.

201

Before I believe it said set up an Android device.

202

Yep, set up an Android device.

203

So either one of those.

204

Now if we said we had an Android emulator that means you probably want to install Android Studio.

205

Now that may still be what you want to do.

206

You may want to check it out in several different environments and running

207

Android Studio where you would traditionally write an Android application lets you use the Android Studio emulator.

208

So that can be set up on macOS and Windows.

209

If we chose iOS simulator and we came down, well then you need Xcode where you would traditionally create an iOS application,

210

but that is only available on macOS.

211

So you would need a Mac to do that.

212

It says open up the Mac App Store.

213

It doesn't give us a Windows this option at all.

214

But what we can do is choose either one of these depending on what type of mobile device you have.

215

I have an Android so I'm going to choose this.

216

We'll come down here and scan this QR code and install the Expo Go app.

217

Okay you should see a screen something like I'm showing here that shows

218

Expo in the Google Play Store right now for Android.

219

Go ahead and install that and then we'll come back to the tutorial

220

and I also want to quickly mention while I won't go over those

221

that I will go ahead and provide links to Android Studio

222

and Xcode in the video description if you want to install either one of those.

223

Okay with the Expo app

224

now installed let's click on start developing over here on the left as we're still on the expo .dev website

225

and you can see it gives us another command to run in the terminal for our application.

226

We're going to actually start the app with NPX.

227

expo start you can copy that

228

and let's go back to vs code back in vs code now i'm going to paste

229

that command in npx expo start and press enter

230

and notice once again i'm in that lesson 01 folder

231

or you want to be in the folder that whatever the name is

232

that you gave your folder you want to be in

233

that folder when you run that command and

234

so now it has started the project let me scroll back up

235

because it gave us a lot of information here it gives us a qr code

236

and you'll scan this qr code with that expo app

237

that you just installed on your mobile device it also says here is the ip address

238

that we have set up for the application that is now running

239

and we'll also check it out as

240

if we were browsing a website at localhost on port 8081 so it's available in both of those locations

241

If I scroll down, there's some other commands available here as well.

242

So right now, get out your mobile device, open the Expo app, and scan this QR code.

243

I'll show you some screens to show you what it's like.

244

Here's what it looks like when I first open the Expo app, and I'm going to tap

245

Scan QR Code.

246

Here's what the screen looks like when I'm getting ready to scan a QR code, but the camera hasn't activated yet.

247

It takes just a second.

248

You'll be able to tell when it does and then just aim your device at this QR code.

249

And here's the welcome screen for the application as I see it on my phone.

250

And that's what you should also see after

251

Expo opened up the application.

252

But what if you're not seeing it?

253

What if there's a problem and maybe you're seeing a screen like this?

254

This screen, for example, indicates that I cannot load the application.

255

So let's look at some troubleshooting.

256

Back on the Expo website, if we scroll down, there is a having problems section.

257

So go ahead and click that.

258

And when you open this up, it gives you a few tips.

259

Make sure you're on the same

260

Wi -Fi network with your device and your computer.

261

They need to be on the same Wi -Fi.

262

If it still doesn't work, it could be due to something in the router configuration, and that could be a bigger issue.

263

So maybe if you're on a public network, like in the school library

264

or somewhere else you might need to use npx expo start dash dash tunnel

265

but that will slow things down and they recommend that

266

if you have to use tunnel you may actually want to use the android studio

267

or the xcode emulator something like that

268

because this will be a little bit slower

269

if you have to use the dash dash tunnel route

270

i will say i have tried it with dash dash tunnel

271

and it wasn't that slow for me

272

so you might might as well go ahead and give

273

that a shot too again only

274

if you're having trouble getting the app to show in your mobile device

275

when you're running this if not if you weren't having any trouble

276

that original just npx expo start should be all you need

277

now back in vs code we have got the application running in expo

278

and you can see it on your device that's great let's scroll down here

279

and look at these commands you can also press W to open it on the web

280

because remember on the web it's at this local host 8081 instead of this address up here

281

so for this I'm just going to come down here

282

and press W

283

and now it's going to open it as a website in the browser

284

it will take it just a moment to load but

285

when it does we should see the application as expected here in our browser

286

and we do now of course

287

this looks very different from being in the mobile phone view this is a widescreen on a browser

288

but we still see the application

289

we can still click in the status bar to go to the other page everything works as expected

290

now i'm going to show you one other thing

291

that we can do to make chrome look more like a mobile device

292

so i'm going to control shift and the letter i to open dev tools here I'll clear all of that out.

293

But now I'm going to scroll this or pull this over here

294

so we see more of the window here on the left.

295

Now notice a couple of things.

296

You may not have this bar at the top yet.

297

So I'm going to click that and take it away

298

because this is the view you may have when you open up DevTools, which is what I did with Control -Shift and the letter I.

299

I'll close them real quick to show you one other way.

300

You can also right click and choose inspect

301

and then it takes you to a different tab in DevTools but it still opens DevTools.

302

Either way what you want to do now

303

that you have DevTools open is click the little icon up here

304

that looks like a laptop and a mobile device

305

and it gives you this along the top

306

and now what we can do with

307

that I'm going to pull this over further and i like to have

308

that on my console along this top bar you can choose the drop down menu

309

and you can choose different mobile devices some of them will show the frames and some won't so for example

310

I'm going to choose an iPhone 6, 7, or 8.

311

Now it actually shows the display frame around it.

312

If I choose a different one, it may not.

313

So let me choose like an iPhone X.

314

It doesn't show the phone around it, so it doesn't quite look the same, but you are seeing the mobile view.

315

Also notice I'm viewing at a smaller view here, this 75 % instead of 100, because 100 % takes it off the screen.

316

So back to 75.

317

This also says mobile over here.

318

See what this does.

319

Looks like everything is fine.

320

There might, oh, hide device frames.

321

So if you didn't have the frame before, when you went to iPhone 6, 7, and 8, now I don't have a frame.

322

You want to click over here on the right and click show device frame, and then it will show the phone around it.

323

So even for the web view

324

you can kind of check to see what it looks like on a mobile device

325

but it's not as good as running it on a mobile device

326

and since we have the Expo Go app

327

it's better for us to just look at the web view like this

328

and use our own mobile device to check the application as well.

329

Back in VS Code I'm going to close the terminal window close the package .json file

330

and let's go ahead and look at this application, I should open up the app directory and then the tabs directory.

331

Now let's go to the index page.

332

And here we should see our welcome.

333

Let's go ahead and change welcome on line 19 to hello world and save our changes.

334

Now check your mobile device to see if the app reflects this change.

335

Here's mine.

336

And you should also be able to see the change on the website.

337

Well, congratulations, you have your first development environment for React Native set up.

338

You have your first application running, although this sample project was already built for us.

339

So in the next video, we'll start building an application from scratch.

340

A quick shout out to my patrons.

341

Holy Coder is a progress provider and my junior patrons.

342

Programming Polyglot, Isaac, Will, Ernie, Georgie, Mitch, Stacy, Scott, Abe, Javier, Michael thank you very much.

343

You're helping me reach my goals.

344

Remember to keep striving for progress over perfection, and a little progress every day will go a very long way.

345

Please give this video a like if it's helped you, and thank you for watching and subscribing.

346

You're helping my channel grow.

347

Have a great day, and let's write more code together very soon.

Descargar app

Todo lo que necesitas para hablar con fluidez

Pronunciación con IAEvalúa cada oración

Práctica de IPADomina cada sonido

VocabularioConstruye tu banco de palabras

Juego de vocabularioAprende mientras juegas

Escanea el QR

Download on theApp Store Get it onGoogle Play

Mismo canal

Head Tag in HTML | An HTML5 Head Element Tutorial

Daily ConversationUniversity Students

Introduction to HTML | An HTML5 Tutorial for Beginners

Daily ConversationWorking Adults

FOR YOU

Recomendar Video

35 oraciones

Vocabulario y notas de pronunciación para esta lección

Esta lección de conversación se basa en el vídeo “React Native for Beginners tutorial”. Las palabras que más se repiten: expo, react, native, device, code. Este vídeo tiene 347 frases y 4112 palabras para practicar shadowing. La parte hablada dura 22:38. El hablante habla rápido, unas 182 palabras por minuto, así que espera sonidos enlazados y reducidos. El 83 % de las palabras está entre las 3.000 más comunes del inglés; conviene repasar el resto antes de empezar.

Vocabulario clave de este vídeo

15 palabras del vídeo que vale la pena aprender, con su pronunciación y significado:

Palabra	Pronunciación	Significado
react verbo	/ɹiːˈækt/	reaccionar
android sustantivo	/ˈænˌdɹɔɪd/	androide
terminal sustantivo	/ˈtɚmɪnəl/	terminal
install verbo	/ɪnˈstɔl/	instalar
folder sustantivo	/ˈfoʊldɚ/	carpeta, fólder
package sustantivo	/ˈpæk.ɪd͡ʒ/	paquete, kete
tutorial sustantivo	/ˌtjuːˈtɔːɹɪəl/	tutoría, tutorial
scroll sustantivo	/skɹoʊl/	rollo, pergamino
lesson sustantivo	/ˈlɛs.ən/	lección
dash sustantivo	/ˈdæʃ/	raya
node sustantivo	/noʊd/	nudo, ñudo
scan verbo	/skæn/	escrutar
menu sustantivo	/ˈmɛn.juː/	menú, carta
framework sustantivo	/ˈfɹeɪm.wɜːk/	entramado, armazón
tunnel sustantivo	/ˈtʌn(ə)l/	túnel

Phrasal verbs que vas a escuchar

Palabra	Pronunciación	Significado
go ahead verbo	/ˌɡoʊ əˈhɛd/	venga, adelante
back up verbo		retroceder, ciar
check out verbo		investigar, chequear
get out verbo		salir
go over verbo		sentar, pasar
look over verbo		revisar

Frases que vale la pena repetir

Frases cortas y completas del vídeo que puedes reutilizar en la conversación diaria:

You'll find that at reactnative .dev.
Let's begin with the tools.
We're going to open a terminal.
It says, where would you like to develop?
But what if you're not seeing it?

Gramática en este vídeo

Las estructuras que más usa el hablante, con las palabras exactas del vídeo:

Estructura	En el vídeo
Oraciones condicionales if + oración, will/would + verbo — una condición y su resultado	if you want to i'll just · If you named yours welcome, it would be
Present perfect have/has + participio pasado — una acción pasada que sigue importando ahora	I've linked · have closed · have called
Voz pasiva be + participio pasado — importa lo que ocurre, no quién lo hace	is made · are also supported · is named
Consejo con “should” should + verbo — decir qué es buena idea	should you already have · should also have · should get

Pronunciación a tener en cuenta

El hablante usa 123 contracciones y formas reducidas, como I'm, you're, you'll. Dilas en su forma corta, tal como las oyes.

Los sonidos de “sh” y “zh”: dash /ˈdæʃ/, extension /ɪkˈstɛnʃən/, bash /bæʃ/, traditionally /tɹəˈdɪʃ.ə.nə.li/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/
Palabras largas — cuida el acento: directory /dɪˈɹɛktəɹi/, dependency /dɪˈpɛndənsi/, traditionally /tɹəˈdɪʃ.ə.nə.li/, simulator /ˈsɪmjəˌleɪtɚ/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/

Sonidos difíciles para hispanohablantes:

s + consonante al inicio — sin añadir una “e” delante: scroll /skɹoʊl/, scan /skæn/, scratch /skɹæt͡ʃ/, strive /ˈstɹaɪv/
/v/ — no es /b/: los dientes tocan el labio inferior: valid /ˈvælɪd/, server /ˈsɝvɚ/, provider /pɹəˈvaɪ.də(ɹ)/, viewer /ˈvju.ɚ/, activate /ˈæktɪˌveɪt/
/z/ — sonora, no /s/: browser /ˈbɹaʊ.zəɹ/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/, zoom /zuːm/, browse /bɹaʊz/, prerequisite /pɹiˈɹɛkwəzət/

Cómo practicar con este vídeo

Escucha el vídeo entero una vez sin hablar y anota las palabras que no conoces.
Empieza a velocidad 0,75×, haz shadowing frase por frase y vuelve a la velocidad normal cuando te resulte fácil.
Grábate y compara con el original, prestando atención a palabras como react, android, terminal.

¿Qué es la Técnica de Shadowing?

Shadowing es una técnica de aprendizaje de idiomas respaldada por la ciencia, desarrollada originalmente para la formación de intérpretes profesionales y popularizada por el políglota Dr. Alexander Arguelles. El método es simple pero poderoso: escuchas audio en inglés nativo y lo repites en voz alta de inmediato, como una sombra que sigue al hablante con solo 1-2 segundos de retraso. A diferencia de la escucha pasiva o los ejercicios de gramática, el shadowing obliga a tu cerebro y músculos de la boca a procesar y reproducir simultáneamente patrones de habla reales. Las investigaciones muestran que mejora significativamente la precisión de la pronunciación, la entonación, el ritmo, el habla conectada, la comprensión auditiva y la fluidez al hablar, convirtiéndola en una de las metodologías más efectivas para la preparación del IELTS Speaking y la comunicación en inglés en el mundo real.

Técnica de shadowing: lee la guía completa paso a paso →

Shadowing Practice: React Native for Beginners tutorial - Learn English Speaking with Video

Elige un modo de práctica

Descargar app

Head Tag in HTML | An HTML5 Head Element Tutorial

Introduction to HTML | An HTML5 Tutorial for Beginners

React Native in 100 Seconds

Blender Donut Tutorial Part 1 (2026)

00. Welcome Guide - Effortless Real English

Every Cybersecurity Beginner Should Watch This First (Networking Fundamentals)

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Learn 97% of Harvard's CS50 in 25 minutes

How To Land Your First Junior Dev Role

Video

Impact Of Technology On Education

Complete Roadmap for Backend Software Engineers (START HERE!)

Design Patterns in Java Theory