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;