Hands-On Design Patterns with React Native

JSX standard tricks

Before we proceed further, I want to show you the best practices when it comes to writing your JSX markup. This will make your journey through my further examples much easier.

Let's start with the simple rules:

• If there are no children within your component, use a self-closing tag:

// good<Button onPress={handlePress} />// bad<Button onPress={handlePress}></Button>

• If you need to display a component based on some condition, then use the && operator:

// badfunction HelloComponent(props) {    if (isSomeCondition) {return <p>Hello!</p>;    }return null;}// badconst HelloComponent = () => {
  return isSomeCondition ? <p>Hello!</p> : null
};// ok (probably it will require some logic before return)const HelloComponent = () =>