Welcome to the third lesson of our course on Mobile App Development with React Native. In this lesson, we will delve into the basics of React Native, including JavaScript ES6 fundamentals and an introduction to JSX.

JavaScript ES6 Fundamentals #

ES6, also known as ECMAScript 2015, introduced several changes to JavaScript that make it easier to work with and more powerful. Here are a few key features:

Let and Const: These are new ways to declare variables. let is block-scoped, and const is block-scoped and read-only.
Arrow Functions: Arrow functions provide a new syntax for writing functions in JavaScript.
Template Literals: Template literals allow you to embed expressions within string literals using ${} syntax.
Classes: ES6 introduced classes to JavaScript, providing a much-needed structure for object-oriented programming.
Promises: Promises provide a way to handle asynchronous operations, allowing you to write clean, non-blocking code.

Introduction to JSX #

JSX stands for JavaScript XML. It is a syntax extension for JavaScript, recommended by React for describing the UI of the app. It might remind you of a template language, but it comes with the full power of JavaScript.

Here's an example of what JSX looks like:

const element = <h1>Hello, world!</h1>;

In the example above, the <h1> tags are not HTML, but JSX. JSX produces React "elements", which are JavaScript objects that can be rendered to the DOM.

React Components and Their Lifecycle #

Components are the building blocks of any React application, and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI should appear.

Here's an example of a functional component in React Native:

import React from 'react';
import { Text } from 'react-native';

const HelloWorld = () => { 
      return ( <Text>Hello, world!</Text> );
}
      
export default HelloWorld;

In the next lesson, we will dive deeper into React Native, exploring State and Props, Styling in React Native, and handling user input. Stay tuned!

Note: Familiarity with JavaScript and React will be beneficial in understanding this lesson.