# Basic Syntax

## These two are equivalent

**Using const syntax for javascript**

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

**Using function syntax for javascript**

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

## These two are equivalent

**Using const syntax for JSX**

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

**Using function syntax for JSX**

```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**

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

**Self-closing tag for components that do not encapsulate anything**

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

## These three are equivalent

**Nesting components together**

```jsx
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**

```jsx
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**

```jsx
// 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;
```