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

Bir pratik modu seçin

Her mod tam ekran bir pratik odası açar.

347 cümleler

Cümleler çok kısa veya çok uzun ise, ayarlamak için Düzenle'ye tıklayın.

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.

Uygulamayı İndir

Akıcı konuşmak için ihtiyacınız olan her şey

AI TelaffuzHer cümleyi puanla

IPA AlıştırmasıHer sesi ustalaştır

Kelime BilgisiKelime bankanızı oluşturun

Kelime OyunuOynarken öğrenin

QR Tara

Download on theApp Store Get it onGoogle Play

Aynı Kanal

Head Tag in HTML | An HTML5 Head Element Tutorial

Daily ConversationUniversity Students

Introduction to HTML | An HTML5 Tutorial for Beginners

Daily ConversationWorking Adults

Bu dersin kelimeleri ve konuşma notları

Bu konuşma dersi “React Native for Beginners tutorial” videosuna dayanıyor. En çok tekrarlanan kelimeler: expo, react, native, device, code. Bu videoda gölgeleme çalışması için 347 cümle ve 4112 kelime var. Konuşma bölümü 22:38 sürüyor. Konuşmacı hızlı konuşuyor, dakikada yaklaşık 182 kelime; bu yüzden birbirine bağlanan ve zayıflayan sesler duyacaksınız. Kelimelerin %83’i İngilizcede en sık kullanılan 3.000 kelime arasında; geri kalanına başlamadan önce bakmakta fayda var.

Bu videodaki önemli kelimeler

Videodan öğrenmeye değer 15 kelime, telaffuzu ve anlamıyla:

Kelime	Telaffuz	Anlam
react fiil	/ɹiːˈækt/	reaksiyon göstermek
android isim	/ˈænˌdɹɔɪd/	android
terminal isim	/ˈtɚmɪnəl/	terminal
install fiil	/ɪnˈstɔl/	indirmek
folder isim	/ˈfoʊldɚ/	klasör
package isim	/ˈpæk.ɪd͡ʒ/	paket
scroll isim	/skɹoʊl/	tomar
lesson isim	/ˈlɛs.ən/	ders, çimke
dash isim	/ˈdæʃ/	çizgi
menu isim	/ˈmɛn.juː/	menü, mönü
framework isim	/ˈfɹeɪm.wɜːk/	çatkı, çatık
tunnel isim	/ˈtʌn(ə)l/	tünel
pasta isim	/ˈpɑ.stə/	makarna
extension isim	/ɪkˈstɛnʃən/	uzatma, teşmil
requirement isim	/ɹɪˈkwaɪɹmənt/	gereklilik, zaruret

Duyacağınız deyimsel fiiller

Kelime	Anlam
come down fiil	düşmek
check out fiil	gözden geçirmek

Tekrar etmeye değer cümleler

Videodan, günlük konuşmada yeniden kullanabileceğiniz kısa ve tam cümleler:

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?

Bu videodaki dil bilgisi

Konuşmacının en çok kullandığı yapılar, videodaki sözcüklerin aynısıyla:

Yapı	Videoda
Koşul cümleleri if + cümle, will/would + fiil — bir koşul ve sonucu	if you want to i'll just · If you named yours welcome, it would be
Present perfect have/has + fiilin üçüncü hâli — geçmişte olan ama şimdi de önemli olan bir eylem	I've linked · have closed · have called
Edilgen yapı be + fiilin üçüncü hâli — kimin yaptığı değil, ne olduğu önemli	is made · are also supported · is named
“should” ile tavsiye should + fiil — yapılması iyi olanı söylemek	should you already have · should also have · should get

Dikkat edilecek telaffuzlar

Konuşmacı I'm, you're, you'll gibi kısaltılmış biçimleri 123 kez kullanıyor. Bunları duyduğunuz gibi kısa söyleyin.

“sh” ve “zh” sesleri: dash /ˈdæʃ/, extension /ɪkˈstɛnʃən/, bash /bæʃ/, traditionally /tɹəˈdɪʃ.ə.nə.li/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/
Uzun kelimeler — vurguyu doğru yere koyun: 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/

Türkçe konuşanların zorlandığı sesler:

/w/ — dudaklar yuvarlak, /v/ değil: framework /ˈfɹeɪm.wɜːk/, requirement /ɹɪˈkwaɪɹmənt/, prerequisite /pɹiˈɹɛkwəzət/, widescreen /ˈwaɪdˌskɹin/
Kelime başındaki ünsüz kümesi — araya ünlü eklemeyin: tutorial /ˌtjuːˈtɔːɹɪəl/, scroll /skɹoʊl/, scan /skæn/, framework /ˈfɹeɪm.wɜːk/, browser /ˈbɹaʊ.zəɹ/
/æ/ — “e”den daha açık: react /ɹiːˈækt/, android /ˈænˌdɹɔɪd/, package /ˈpæk.ɪd͡ʒ/, dash /ˈdæʃ/, scan /skæn/

Bu videoyla nasıl çalışılır

Videonun tamamını konuşmadan bir kez dinleyin ve bilmediğiniz kelimeleri not edin.
0,75× hızla başlayın, cümle cümle tekrar edin ve kolaylaşınca normal hıza dönün.
Kendinizi kaydedin ve orijinaliyle karşılaştırın; react, android, terminal gibi kelimelere özellikle dikkat edin.

Gölgeleme Tekniği Nedir?

Gölgeleme, başlangıçta profesyonel tercüman eğitimi için geliştirilen ve çok dilli Dr. Alexander Arguelles tarafından popüler hale getirilen, bilim destekli bir dil öğrenme tekniğidir. Yöntem basit ama güçlüdür: ana dili İngilizce olan bir sesi dinler ve hemen yüksek sesle tekrar edersiniz — konuşmacıyı 1-2 saniye gecikmeyle takip eden bir gölge gibi. Pasif dinleme veya dilbilgisi alıştırmalarının aksine, gölgeleme beyninizi ve ağız kaslarınızı gerçek konuşma kalıplarını eşzamanlı olarak işlemeye ve yeniden üretmeye zorlar. Araştırmalar, telaffuz doğruluğu, tonlama, ritim, bağlı konuşma, dinleme anlama ve konuşma akıcılığını önemli ölçüde geliştirdiğini göstermektedir — bu da onu IELTS Konuşma hazırlığı ve gerçek dünya İngilizce iletişimi için en etkili yöntemlerden biri yapar.

Shadowing tekniği: adım adım eksiksiz rehberi okuyun →