跟讀練習: React Native for Beginners tutorial - 通過影片學習英語口語

選擇練習模式

每種模式都會開啟全屏練習室。

347 句

如果句子過短或過長，請點選 Edit 進行調整。

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.

下載應用

流利口語所需的一切

AI 發音評分逐句打分

音標練習掌握每個音

詞彙學習建立你的詞庫

詞彙遊戲邊玩邊學

掃碼

Download on theApp Store Get it onGoogle Play

同頻道

Head Tag in HTML | An HTML5 Head Element Tutorial

Daily ConversationUniversity Students

Introduction to HTML | An HTML5 Tutorial for Beginners

Daily ConversationWorking Adults

本課的詞彙與口語要點

這節口語課以影片“React Native for Beginners tutorial”為素材。影片中反覆出現的詞有：expo, react, native, device, code。這段影片共有 347 個句子、4112 個單詞可供跟讀。講話部分時長為 22:38。說話人語速較快，每分鐘約 182 個詞，會出現較多連讀和弱讀。 83% 的單詞屬於英語最常用的 3,000 詞，其餘的詞建議在練習前先學一下。

影片中的重點詞彙

影片中 15 個值得學習的單詞，附發音和釋義：

單詞	發音	釋義
android 名詞	/ˈænˌdɹɔɪd/	人形機器人 /人形機器人, 仿生人
terminal 名詞	/ˈtɚmɪnəl/	航站, 航廈 /航廈
install 動詞	/ɪnˈstɔl/	安裝 /安裝
folder 名詞	/ˈfoʊldɚ/	卷宗, 資料夾 /資料夾
package 名詞	/ˈpæk.ɪd͡ʒ/	包裹, 包
tutorial 名詞	/ˌtjuːˈtɔːɹɪəl/	輔導 /輔導, 教程
scroll 名詞	/skɹoʊl/	條幅 /條幅, 卷軸 /卷軸
lesson 名詞	/ˈlɛs.ən/	課業 /課業, -課 /-課
dash 名詞	/ˈdæʃ/	破折號 /破折號
node 名詞	/noʊd/	結節 /結節
menu 名詞	/ˈmɛn.juː/	選單 /選單
framework 名詞	/ˈfɹeɪm.wɜːk/	骨架, 框架
tunnel 名詞	/ˈtʌn(ə)l/	隧道, 地下道
pasta 名詞	/ˈpɑ.stə/	мянфан, 義大利麵 /義大利麵
requirement 名詞	/ɹɪˈkwaɪɹmənt/	要求, 需求

影片中出現的短語動詞

單詞	發音	釋義
go ahead 動詞	/ˌɡoʊ əˈhɛd/	請便 /請便
come down 動詞		下來 /下來, 降
check out 動詞		退房

值得反覆跟讀的句子

影片中簡短而完整的句子，可以直接用在日常對話裡：

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?

影片中的語法

說話人最常用的結構，並附上影片中的原話：

結構	影片中的用法
條件句 if + 從句，will/would + 動詞 — 條件及其結果	if you want to i'll just · If you named yours welcome, it would be
現在完成時 have/has + 過去分詞 — 過去發生但與現在仍有關聯的事	I've linked · have closed · have called
被動語態 be + 過去分詞 — 強調發生了什麼，而不是誰做的	is made · are also supported · is named
用 “should” 提建議 should + 動詞 — 表示應該做的事	should you already have · should also have · should get

需要注意的發音

說話人用了 123 次縮略和弱讀形式，例如 I'm, you're, you'll。請按聽到的簡短形式來說。

“sh” 和 “zh” 音: dash /ˈdæʃ/, extension /ɪkˈstɛnʃən/, bash /bæʃ/, traditionally /tɹəˈdɪʃ.ə.nə.li/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/
長單詞——注意重音位置: 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/

中文母語者容易讀錯的音：

/v/ — 不要讀成 /w/，上齒輕觸下唇: valid /ˈvælɪd/, server /ˈsɝvɚ/, provider /pɹəˈvaɪ.də(ɹ)/, viewer /ˈvju.ɚ/, activate /ˈæktɪˌveɪt/
詞尾子音 — 要讀清楚，後面不要加母音: react /ɹiːˈækt/, android /ˈænˌdɹɔɪd/, installed /ɪnˈstɔːld/, package /ˈpæk.ɪd͡ʒ/, dash /ˈdæʃ/
/r/ 和 /l/ 的區別: tutorial /ˌtjuːˈtɔːɹɪəl/, scroll /skɹoʊl/, traditionally /tɹəˈdɪʃ.ə.nə.li/, congratulations /kənˌɡɹæt͡ʃəˈleɪʃ(ə)nz/, reflect /ɹɪˈflɛkt/

如何用這段影片練習

先完整聽一遍影片，不要開口，記下不認識的單詞。
先用 0.75 倍速逐句跟讀，熟練之後再回到正常速度。
錄下自己的聲音並與原聲對比，特別注意 android, terminal, install 這類單詞。

什麼是跟讀法？

跟讀法 (Shadowing) 是一種有科學依據的語言學習技巧，最初開發用於專業口譯員的培訓，並由多語言者Alexander Arguelles博士普及。這個方法簡單而強大：您在聽英語母語原聲的同時立即大聲重複——就像是一個延遲1-2秒緊跟說話者的影子。與被動聽力或語法練習不同，跟讀法強迫您的大腦和口腔肌肉同時處理並模模擬實的講話模式。研究表明它能顯著提高發音準確性，語調，節奏，連讀，聽力理解和口語流利度——使其成為雅思口語備考和真實英語交流最有效的方法之一。

影子跟讀法: 閱讀完整分步指南 →