"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using Create React Native App!
You have completed Using Create React Native App!
Preview
Create React Native App has built-in scripts available for running tests and ejecting out of the default configuration.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Earlier you learned that
create-react-native-app has built-in
0:00
scripts available for running tests and
ejecting out of the default configuration.
0:03
So in this video, we'll dive deeper into
the optional commands, test and eject.
0:07
The Jest testing framework works right out
of the box in create-react-native-app.
0:12
Jest is used for writing unit
test on the individual units or
0:17
components of your app to make
sure that they work as intended.
0:20
So if you name your file using
a filename convention like .spec.js,
0:24
or in this case .test.js, or
if you place your test file inside
0:29
a special test folder, Jest will
find those files and run your tests.
0:34
So, for example, app.test.js is a simple
unit test create-react-native sets up for
0:40
us to test if the app component
renders without clashing.
0:44
So back in my terminal,
I'll open a new tab and
0:47
navigate to my myNativeApp folder.
0:53
And running the command npm test,
0:57
runs the Jest test runner
on the tests in my project.
1:00
Looking at the console,
we see a green check mark
1:05
next to renders without crashing and
it let's me know that the test passed.
1:08
Now if I delete a line of code
from app.js, for example,
1:13
an input statement and
run the test runner again.
1:18
It let's me know that the test failed.
1:24
Create-react-native-app does
have a few limitations.
1:28
The main limitation being that you
can't build with custom native code.
1:31
Or have any dependencies
that rely on native code.
1:35
create-react-native-app does not support
loading native modules in your iOS or
1:38
Android apps.
1:42
Your entire app must be
written in JavaScript
1:43
using only React Native components and any
APIs that are available via the Expo app.
1:47
Also when you create a project with
create-react-native-app, you can't change
1:52
anything about your build set up because
all the build settings are pre-configured.
1:56
Everything is managed for you by a single
dependency, React Native scripts.
2:00
So if you need to write
your own native code,
2:06
customize the pre-configured setup to your
liking, or if you have other needs that
2:07
aren't covered by create-react-native-app,
you can use the eject feature.
2:11
Ejecting is the process of setting up
your own custom builds for your app.
2:16
It gives you full control
over your project.
2:21
But be careful with the step because
running eject is a permanent action.
2:24
Once you eject, you can't go back.
2:28
So back in my terminal, I'll stop running
2:30
the server, then type npm run eject.
2:35
Since this is a one way operation,
2:40
the console suggests that you read their
document on ejection before you proceed.
2:42
And this starts the process of ejecting
2:47
from create-react-native-app's
build scripts.
2:50
So in the console, you'll be
asked a couple of questions about
2:52
how you'd like to build your project.
2:55
So first, it asks how you'd like to
eject from create-react-native-app,
2:57
and you have two options,
React Native and ExpoKit.
3:02
So the React Native option will create
a regular React Native project for you.
3:07
If you've ever started a React Native
project in the past using react native
3:12
init in the react native CLI tool,
it's very similar to that.
3:16
But keep in mind that with this option,
if your app uses any Expo APIs,
3:20
you'll need to remove or
replace them before ejecting.
3:24
Now, if you wanna continue using
the Expo APIs, you can eject to ExpoKit,
3:28
which will allow you to build with native
code, and continue using the Expo APIs.
3:35
But if you do eject to ExpoKit, you will
need to create and log in to an Expo
3:40
account and use Expo's developer
tools to run your React Native app.
3:44
Now, for either option, you will need
to make sure that you have an Xcode or
3:49
Android Studio environment configured on
your machine to open and run your app.
3:53
So, I'll go ahead and
eject to a regular React Native project.
3:58
And then it asks, what should your
app appear on a user's home screen?
4:03
I'll type myNativeApp.
4:08
And for what should your Android Studio
and Xcode projects be called?
4:10
I'll leave it as myNativeApp.
4:16
Ejecting moves all the native code and
templates into your project.
4:18
So if you have a look at
your project files now,
4:22
you'll see that it generated and
Android and and iOS folder.
4:24
And if you have a look at
your package.json file,
4:28
you'll see that
the React Native scripts and
4:31
Expo dependencies have been
completely removed from the project.
4:34
So now you can set up your own
custom builds for your app.
4:37
You shouldn't need to use eject
in your projects unless you know
4:41
exactly what you're getting into.
4:45
Create React Native App
included the eject feature for
4:47
customizing a project only
when you're ready for it.
4:51
So remember,
the common reasons you would want to eject
4:53
from create-react-native-app are,
to write custom native code.
4:57
So if you need functionality that you
can only get directly from an Android or
5:01
an iOS API, via Java,
Objective-C or Swift, for example.
5:05
Or to publish your app to
the Google Play Store and iOS App Store.
5:10
When you're done building your app,
5:14
if you need to build the necessary
application packaging formats for
5:16
Android and iOS to publish it to
the Play Store and/or App Store.
5:20
All right, so congrats,
you just learned a new tool
5:25
that will give you a massive head
start when building React Native apps.
5:28
Now, as with most popular
development tools, React Native and
5:32
Create React Native App will
likely be updated frequently, so
5:36
be sure to check the teachers notes for
up to date information about React Native.
5:40
Thanks everyone and happy coding.
5:44
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up