React Native
React main building blocks
React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, state, and props.
Here are a few basic concepts to React Native and you can find more learning materials for Web User Interface Programming course materials.
JSX
React Native apps uses ES6 JavaScript syntax for coding and JSX syntax for embedding XML within JavaScript. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components.
In below case, <Text> is a built-in component that displays some text and <View> is like the <div>. You can use <Image> component to show an image.
Note
JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces { }. The example above first declares a name and then embeds it with curly braces inside the <Text>.
Tip
React Native provides a number of built-in Core Components ready for you to use in your app.
Components
Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns valid React Native elements via a return function. React Native apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
props
React Native components can be customized using different parameters. These parameters is called props in React Native. For example, one basic React Native component is Image. When you create an image, you can use a prop named source to control what image it shows (look above code).
Your own components can also use props.
In below case, <Movie> component will be used multiple time in same application. Movie title and year will be passed to Movie components via props. These components props are read-only, so they can't be changed.
Tip
Own made components let you slip the UI into independent reusable pieces. Components can refer to other components in their output. Components makes a React Native App.
state
There are two types of data that control a component: props and state. props are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use state.
Below will render a Text and Button components. A state variable count will be increased by one when a button is clicked (setCount function will be called inside a buttonClicked function). A component will be rendered automatically, when a state count will be changed. So the new value will be visible.
Note
You can also use a state container like Redux or Mobx to control your data flow in a bigger application. In that case you would use Redux or Mobx to modify your state rather than changing state directly.
This was just a fast introduction to React and React Native basics. You can find more information here: Learn the Basics and of course - you will learn more by doing a course exercises.
Also rememeber that we have separated course for React : TTC8420 Web User Interface Programming, which covers React programming more deeply.