Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Basics of React Native3:26 with Brandy Bergh
Let’s get into what we will be using to build this application. First we will be covering the basics: components, JSX, event handling, Component Lifecycle, Props and State. We will also cover the React Native Create App. The reason we will be covering this is because it allows us to jump right into development without being OS specific.
- Components: Components are the composable building blocks to your react native application.
- JSX: JSX is a syntax for embedding XML within JS.
- Component Lifecycle: The lifecycle helps manage the complexity of different platform APIs
- Props: Props are way of passing data from parent to child
- State: State is how a component's data looks at a given point in time
Requirements for Course
After installing homebrew:
Install Node.js and NPM. Type in terminal:
brew install node
Install Watchman. Type in terminal:
brew install watchman
Install React Native CLI. Type in terminal:
npm install -g react-native-cli
Students may have to use sudo to install global npm package. If command above fails try typing in terminal:
sudo npm install -g react-native-cli
Let's get into what we will be using to build this application.
First, we will be covering the basics.
Components, JSX, event handling, component lifecycle, props, and state.
Everything in React and React Native is made up of components.
Components are the composable building blocks to your React Native application.
They accept arbitrary inputs called props and
return React elements describing what should appear on the screen.
Components let you split the UI into independent,
reusable pieces, so that you can think about each piece in isolation.
The different component types.
Component classes, like in the first example, can be pretty simple.
The only thing that is required is a render method.
Component classes can have internal state and lifecycle methods.
like the second example, are even simpler than component classes.
These are primarily used to presentation components.
They don't have internal state or lifecycle hooks.
They receive their data via props.
React Native has many of the of most critical platform components
already wrapped like ScrollView and text input.
Here's an example of what a ScrollView looks like.
You will notice that it is wrapped in a view, which creates that parent container.
A scroll view is part of the React native platform and is a scrollable list view.
And component that you will be familiar with is a text input.
A way for the user to input data.
A text input is a component that is built into React native and
can be implemented quite easily like below.
You will notice that we are subscribing to the onChangeText event,
to read what the user is inputting.
There are other events that you can subscribe to,
but this is the only one that we'll be looking at.
I would recommend taking a look at the teacher's notes for
this section to inquire about the other events that can be subscribed to.
You can find any component that you may need already created by the community.
JSX is an XML/HTML-like syntax.
In other words, JSX helps structure all of your components that make up a view.
In React Native, we don't have access to HTML tags.
Like the div, span, image, and so on.
So we at first need to understand the two basic React native elements,
view and text input.
The view component is basically a wrapper that contains React native components,
or custom components, and supports the layout.
Text is used for displaying text, along with support for
nesting, styles, and touch handling.
Many frameworks use a special templating language,
which lets you embed code inside markup language.
In React and React Native, this is reversed.
JSX lets you write your markup language inside code.
And this is arguably one of the most controversial things about React.
You can use JSX expression anywhere you use any other expression.
You need to sign up for Treehouse in order to download course files.Sign up