If you are writing React apps, you will undoubtedly be using JSX as it probably is the easiest way to add styled elements to your app. Without JSX, it will be a pain to write and style using HTML. Tools like Semantic UI React gives you all kinds of styled components and they can be coded like HTML but much less code is needed for styling.

However, one issue you may run into is conditionals. Once you are rendering your components in your return() statement, you can’t really use an if-else statement if you somehow need to make your elements conditional based on some condition (e.g. a state change). One option is to take your conditions outside JSX before the return() statement. That, however, may be too cumbersome to keep track of.

Here’s a simple example. If you want to display a different header message based on some condition.

#react #react-jsx #ternary-operator #react native