NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • These two are equivalent
  • These two are equivalent
  • These two are equivalent
  • These three are equivalent
Edit on GitHub
Export as PDF
  1. Orbital
  2. React Native

Basic Syntax

These two are equivalent

Using const syntax for javascript

const logHelloWorld = () => {
    console.log("Hello World");
}

Using function syntax for javascript

function logHelloWorld() {
    console.log("Hello World");
}

These two are equivalent

Using const syntax for JSX

const App = () => {
    return (
        <View>
            <Text>This is an app</Text>
        </View>
    );
}

Using function syntax for JSX

function App() {
    return (
        <View>
            <Text>This is an app</Text>
        </View>
    );
}

These two are equivalent

Closing tag for components that do not encapsulate anything

function App() {
    return (
        <Button title="Press Me"></Button>
    );
}

Self-closing tag for components that do not encapsulate anything

function App() {
    return (
        <Button title="Press Me" />
    );
}

These three are equivalent

Nesting components together

const MainComponent = () => {
    return (
        <View>
            <View>
                <Text>Subcomponent one</Text>
            </View>
            <View>
                <Text>Subcomponent two</Text>
            </View>
        </View>
    );
}

Extracting the components into their own components within the same page

const MainComponent = () => {
    return (
        <View>
            <SubComponentOne />
            <SubComponentTwo />
        </View>
    );
}

const SubComponentOne = () => {
    return (
        <View>
            <Text>Subcomponent one</Text>
        </View>
    );
}

const SubComponentTwo = () => {
    return (
        <View>
            <Text>Subcomponent two</Text>
        </View>
    );
}

Extracting the components into their own components into other files, export them and importing them for use

// index.jsx
import SubComponentOne from "./component-one.jsx"
import SubComponentTwo from "./component-two.jsx"

const MainComponent = () => {
    return (
        <View>
            <SubComponentOne />
            <SubComponentTwo />
        </View>
    );
}

// component-one.jsx
const SubComponentOne = () => {
    return (
        <View>
            <Text>Subcomponent one</Text>
        </View>
    );
}
export default SubComponentOne;

// component-two.jsx
const SubComponentTwo = () => {
    return (
        <View>
            <Text>Subcomponent two</Text>
        </View>
    );
}
export default SubComponentTwo;
PreviousIntro to JSXNextHandling UI

Last updated 1 year ago