React typescript or javascript

Difference between React Typescript, React JavaScript, and React Native

React would be a library and UI development framework. React determines what changed and updates the page after you design multiple aspects that specify how you want the website to look. This is usually what someone means when they use the word “respond” without any more explanation. React Native employs the same fundamental capabilities as react. Still, after determining the necessary modifications, it updates native assets for Android or iPhone instead of the DOM (i.e., the website). By utilizing the tools and syntax known to react programmers, React Native enables you to create native mobile apps.

The axis between Javascript and Typescript is entirely different. Websites mostly employ Javascript as their primary programming language, and typescript enables you to add data types to your code. Your IDE and construction process can verify the classes to determine if you’ve made mistakes; you can quickly detect errors.

What is React Typescript?

It would be best if you comprehended how React TS programs, in fact, any TS project, function to understand the differences between React JS and React TS. The digital interactions in which each performs distinct tasks might be essential to running your smartphone app efficiently. Many businesses commonly employ React JS and React Native for our client engagements, and which device is appropriate for you may be sorted out with our assistance. Before you begin writing with React Typescript, React JavaScript, or React Native, let’s examine what makes them distinct and what you want to know.

The web does not support TypeScript as a native language. Therefore, the typings you include in your source are meaningless to the user. Your TypeScript code is converted to JavaScript when you construct your program. Because they both bundle the identical JavaScript code, there is no distinction between React JS and React TS when looking at the bundled code. Since TypeScript is a typed language, defects and problems may be found long before your project is released. Here is additional information about integrating TypeScript with React. To utilize TypeScript, you must:

• Make TypeScript a project dependency.
• Set the TypeScript compiler parameters.
• Choose appropriate file extensions.
• Define the libraries you use.

Now that that was out of the way let’s go about React Native with React. React is a framework for declaratively building apps using components, and React-DOM would be the library that renders to the browser. Therefore, when people talk about React while creating a web app, they should mention React plus React-DOM rather than React.

The React ecosystem may be thought of as having React as its cornerstone. The library React-DOM used to render your apps on the web is based on React. React Native is a framework that displays your program on mobile applications and other platforms, including macOS, Windows, Apple TV, and more.

The language users write it determines whether you use React JS or React TS. You can use JavaScript and TypeScript, but the compilation is JavaScript in the end. The only thing that separates Javascript from Typescript is developer expertise. When you use Typescript, you get fantastic autocompletion and static type-checking.

Conclusion

React’s concept benefits many devices where a user interface (UI) may reside, including web, portable, TV, console, etc. React’s creators separated the logic that manages app data from the mechanism that renders the user interface (UI). React was able to execute in a variety of locations as a result. When writing React Native, you utilize React to assist and manage the state of your app while using UI components similar to any native UI elements present on the phone. Given the proper support for communicating that platform’s native UI components via a JavaScript interface, any system might theoretically be energized by React.

Author Ganesh Tharol

Ganesh Tharol’s expertise in programming allowed him to streamline his workflow significantly. A hunt for new opportunities led him to cloud computing. When it comes to AWS, Ganesh Tharol is a full-stack DevOps with exceptional development skills, as seen by his many certifications and successful developments.

Related Posts

Challenges Faced by Food Delivery App Businesses

Rising Trend of Water Delivery App Development – Complete Guide!

Best Bible Apps & Bible Study Apps For Reading on Smartphones

headquarters

We offer a 60-minute FREE CONSULTATION!

Vishal Mehta
Sales Consultant

• +91-8529003877
• emizentech
• [email protected] m

Источник

Рассказ о том, почему в 2021 году лучше выбирать TypeScript, а не JavaScript

Недавно я, используя React Native, занимался разработкой мобильного приложения для медитации Atomic Meditation. Эта программа помогает тем, кто ей пользуется, выработать привычку медитировать, ежедневно уделяя этому занятию какое-то время. В ходе работы у меня появились серьёзные причины приступить к изучению TypeScript и начать пользоваться им вместо JavaScript в проектах среднего и крупного размера.

Прежде чем я начну свой рассказ, мне хотелось бы отметить, что вы сможете разобраться в этой статье, даже если никогда не пользовались React Native. Я буду всё подробно объяснять. А если вы делали какие-нибудь проекты на React, то, читая эту статью, можете считать, что React и React Native — это одно и то же.

А теперь расскажу о том, как обычный JavaScript втянул меня в неприятности.

День 1: всё идёт как надо

В React Native есть объект AsyncStorage , который представляет собой хранилище данных типа ключ/значение с асинхронным доступом к значениям по ключам. Он даёт разработчику очень простой механизм для организации постоянного хранения данных на мобильном устройстве пользователя.

Например, воспользоваться им можно так:

AsyncStorage.setItem("@key", value) 

AsyncStorage позволяет хранить лишь строковые данные. Поэтому для того чтобы поместить в это хранилище число — это число сначала надо конвертировать в строку.

Ниже показано применение React-хука useState для объявления переменной sessionCount и для установки её начального значения в 0. Тут же имеется и функция setSessionCount , которая позволяет менять состояние sessionCount :

const [sessionCount, setSessionCount] = useState(0) 

Предположим, пользователь завершил сеанс медитации (я, напомню, занимался разработкой приложения для медитации). В sessionCount хранится общее количество сеансов медитации, завершённых пользователем (я буду теперь называть этого пользователя «Anxious Andy» — «беспокойный Энди»). Это значит, что нам надо прибавить 1 к значению, хранящемуся в sessionCount . Для этого вызывается функция setSessionCount , в которой и выполняется прибавление 1 к предыдущему значению sessionCount . А потом количество завершённых медитаций нужно сохранить в AsyncStorage в виде строки.

Всё это надо сделать в некоей функции, которую я предлагаю назвать saveData :

// Пользователь завершил сеанс медитации… const saveData = () => < setSessionCount(prev =>< const newSessionCount = prev + 1 AsyncStorage.setItem("@my_number", newSessionCount.toString()) return newSessionCount >) > 

Всё идёт хорошо, наш Энди, теперь уже не такой беспокойный, тихо закроет приложение, испытывая прилив хорошего самочувствия.

День 2: затишье перед бурей

Беспокойный Энди получает уведомление, которое напоминает ему о том, что через 5 минут начинается его медитация. Но он не только беспокойный, но ещё и нетерпеливый. Поэтому он тут же идёт к себе в комнату, находит своё рабочее кресло, удобно (но при этом — сохраняя ясное сознание) в него садится и открывает программу.

Теперь, когда программа загружается, данные сессии Энди нужно прочитать из хранилища. В React хук useEffect позволяет выполнять функцию-коллбэк при монтировании компонента.

В коллбэке мы асинхронно получаем данные из хранилища, а после этого вызываем функцию setSessionCount() , передавая ей эти данные, то есть — «1» :

useEffect(() => < AsyncStorage.getItem("@my_number").then(data =>setSessionCount(data)) >, []) 

Беспокойный Энди успешно справляется с ещё одной медитацией. Поэтому к sessionCount надо добавить 1, что позволит сохранить общее число завершённых сеансов медитации.

Новое значение, как и прежде, мы записываем в хранилище:

// Пользователь завершил сеанс медитации… const saveData = () => < setSessionCount(prev =>< const newSessionCount = prev + 1 AsyncStorage.setItem("@my_number", newSessionCount.toString()) return newSessionCount >) > 

К настоящему моменту пользователь завершил 2 сеанса медитации.

День 3: буря

Энди, теперь — уже вовсе не беспокойный, достаёт телефон и открывает приложение для того чтобы в третий раз подряд устроить сеанс медитации (и дела у него идут хорошо).

Он хочет узнать о том, как далеко продвинулся в деле выработки полезной привычки. Поэтому он открывает экран статистики. «О, да тут много всего интересного», — приговаривает он. «Отличная программа!».

Но его любовь к этой программе быстро сходит на нет…

Программа сообщает ему о том, что он провёл 11 сеансов медитации. А он-то медитировал всего два раза!

Неправильная статистика по сеансам медитации

Что пошло не так?

В первый день мы записали в sessionCount начальное значение — число 0 .

Пользователь завершил сеанс медитации — поэтому мы добавили к sessionCount 1 . Затем мы преобразовали то, что получилось, в строку — в «1» , после чего записали это в асинхронное хранилище (вспомните — оно может хранить только строковые данные).

Во второй день мы загружаем данные из хранилища и записываем в sessionCount загруженное значение. То есть — «1» (строку, а не число).

Пользователь завершает сеанс медитации и мы прибавляем к sessionCount 1 . А в JavaScript «1» + 1 равняется «11» , а не 2 .

Мы забыли преобразовать строковые данные, считанные из хранилища, в число.

А хуже всего тут то, что наша программа при этом не выдала никаких сообщений об ошибках. Эта ошибка какое-то время оставалась незамеченной, а позже довела нас до неприятностей. Поиск источников подобных проблем может оказаться не таким уж и простым делом.

JavaScript позволил нам свободно, не сознавая того, что мы делаем, поменять в ходе выполнения программы тип данных, хранящихся в переменной.

Решить эту и другие подобные проблемы можно с помощью TypeScript.

Что такое TypeScript?

Если вы не знакомы с TypeScript, то знайте, что это, в сущности, то же самое, что и JavaScript, но оснащённое некоторыми полезными возможностями. В частности, переменные не могут менять типы. А если это случится — TypeScript выдаст сообщение об ошибке.

Браузеры не могут выполнять TypeScript-код. Поэтому TypeScript-файлы проекта надо транспилировать в JavaScript. На выходе получится несколько JavaScript-файлов (или один большой «бандл» с JS-кодом проекта).

Использование TypeScript в React Native-проектах

Добавить поддержку TypeScript в существующий React Native-проект очень просто. А именно, надо будет кое-что установить из npm и сделать пару настроек.

Теперь нужно будет лишь переименовать файлы с кодом, например — App.js в App.tsx , после чего заработает автоматическая система контроля типов.

После того, как изменено расширение файла, TypeScript разразится гневной тирадой о том, что аргумент типа ‘string | null’ нельзя назначить параметру типа ‘SetStateAction’ .

TypeScript предупреждает разработчика о том, что с типами данных что-то не так

Это значит, что мне тут, чтобы избавиться от сообщения об ошибке, надо, во-первых, проверить data на null , а во-вторых — преобразовать из строки в число (воспользовавшись parseInt() ):

Использование TypeScript подталкивает разработчика к написанию более качественного и надёжного кода. Это просто замечательно!

По каким материалам изучать TypeScript?

Я изучал TypeScript по этому видеокурсу канала Net Ninja. И если бы мне надо было бы что-нибудь изучить, то я в первую очередь поинтересовался бы тем, нет ли на этом канале курса по тому, что мне нужно.

Кроме того, официальная документация по TypeScript очень даже хороша.

Итоги

Теперь, благодаря TypeScript, я могу спать немного спокойнее, зная о том, что переменные в моём проекте не могут совершенно неожиданно менять свои типы. Спасибо за это TypeScript.

Да, не могу не отметить, что JavaScript хорошо подходит для маленьких проектов. Но при работе над средними и большими проектами, а так же — над маленькими проектами, которые вполне могут вырасти, лучше, пожалуй, прибегнуть к TypeScript, даже если для этого придётся потратить время на его изучение. А если вы знаете JavaScript, то и TypeScript освоите без особого труда.

Используете ли вы TypeScript в своих React-проектах?

Источник