"некрасивый код" это когда нету договоренности какими где должны быть те же кавычки и т. д., а тут все консистентно, в jsx кавычки двойные, а в остальном коде одинарные
а двойные они потому что jsx был предуман для удобства, чтобы использовать уже понятный синтаксис html в JavaScript, а в html хорошим тоном считается использование двойных кавычек