Define a Component by declaring a function that returns a React Element.

function ArticleTitle() {
  return <Text>React Native Design Patterns</Text>;
}

const ArticleTitle = () => {
  return <Text>React Native Design Patterns</Text>;
}

To call the component on your React Native application, use the following code (Note that we need to wrap our component in a View):

import { View } from "react-native";

function App() {
  return (
    <View>
      <ArticleTitle />
    </View>
  )
};

export default App;

Use curly braces to embed expressions in JSX.

function AppVersion() {
  const version = "SDK40";

  return <Text>Your version id {version}</Text>;
}

Add props as an argument to pass the information on your Component. You can use string, number, function...

function ArticleTitle(props) {
  return <Text>{props.title} for React Native</Text>;
}

You can use destructuring and assignment to specify default values on props

interface LayoutProps {
  withBackButton: boolean
}

function Layout({withBackButton = false, children}: LayoutProps) {
  return (
    <View>
      {withBackButton && <BackButton />}
      {children}
    </View>
  );
}

Destructuring is used a lot in components.

function ArticleTitle(props) {
  return <Text>{props.title} for React Native</Text>;
}

function ArticleTitle({title}) {
  return <Text>{title} for React Native</Text>;
}

// Usage
<ArticleTitle title="Bootcamp" /> 
// expected output: Bootcamp for React Native

// Usage
<ArticleTitle title="Advanced Bootcamp" /> 
// expected output: Advanced Bootcamp for React Native

There's a syntax for collecting remaining props into an object.

function ArticleTitle({title, ...rest}) {
  return <Text>{title} for React Native</Text>;
}

We can spread rest props over our <Text>.

function ArticleTitle({title, ...rest}) {
  return <Text {...rest}>{title} for React Native</Text>;
}

This allow us to modify the parent component.
We can pass attributes to <ArticleTitle /> and trust that they'll be passed through to div.

You can't use if/else statements inside a component, but conditional (ternary) operator and short-circuit evaluation works!

{
  condition && <Text>Rendered when `true`</Text>;
}

{
  condition ? (
    <Text>Rendered when `true`</Text>
  ) : (
    <Text>Rendered when `false`</Text>
  );
} 

You can pass multiple styling objects on a component like you will do in the HTML world with multiple CSS classes. On the style props pass an array of objects.

<View style={[style.container, styles.banner]}>
  <Text>StarPort</Text> 
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  banner: {
    backgroundColor: 'purple',
    padding: 20,
  },
});

useState: Persist value between renders, trigger re-render

useRef: Persist value between renders, no re-render

useEffect: Side effects that run after render

useCallback: Persist ref equality between renders

Usually, you would render lists inside a component. You can use a map to render a list of items.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

useEffect(() => {
  console.log("component mounted or updated");
});

Executing the callback only when the component mounts

useEffect(() => {
  console.log("component mounted");
}, []);

Executing the callback when the component mounts and when the component updates

useEffect(() => {
  console.log("component mounted or updated, counter:", counter);
}, [counter]);

We use template literals to concat string variables.

// ✅ function with template liberal
const greeting = 'Hello'
const subject = 'React Native'
const fullTitle = `${greeting} ${subject} !` 

Later we add the content in a Text like this

<Text>{fullTitle}<Text>
// Hello React Native !

// ❌ we don't want this
const fullTitle = greeting + ' ' + subject + '!'

In React, there are a few different ways that you can create a component. One way is to use a named function, which is simply a function that has a name and is declared using the `function` keyword. For example:

function MyComponent() {
  return (
    <Text>Hello React Native</Text>
  );
}

Another way to create a component is to use an arrow function, which is a short, concise way of defining a function. Arrow functions are similar to named functions, but they are declared using the => syntax. For example:

const MyComponent = () => {
  return (
    <Text>Hello React Native</Text>
  );
}

If your component only contains a single, simple expression, you can use an arrow function with an implicit return. This means that you don't need to use the return keyword, and the value of the expression will be automatically returned by the function.

// ⚠️ there is no `return` because we have an implicit return

const MyComponent = () => (
  <Text>Hello, world!</Text>
);

Sometimes, there are variables in your code that you would like to put into an object.

// Creating an object of variables 
const person = { name: 'John', age: 25, gender: 'Male' };

const Person = () => {
  return (
    <View>
      <Text>Name: {person.name}</Text>
      <Text>Age: {person.age}</Text>
      <Text>Gender: {person.gender}</Text>
    </View>
  )
};

There is a shorter notation available to achieve the same: