React.js & React Native Fundamental
Assalamualaikum & Hi all. Today i would like to share about react in the fundamental aspect of it. there are some key differences between the two, and understanding the fundamentals of each is important for any developer looking to work with these technologies.
In this blog post, we’ll provide an overview of React.js and React Native and discuss their respective features and use cases. We’ll cover the basics of component-based development, explore the similarities and differences between React.js and React Native, and provide some tips and resources for getting started with each.
Whether you’re a seasoned web developer looking to build complex user interfaces or a mobile developer looking to build high-performance and responsive mobile apps, understanding the fundamentals of React.js and React Native is essential. So, let’s dive in and explore the world of React development!
React ?
For those doesn’t know what react is, react have two:
- React.JS
Front-end libraries created by the Facebook team (META) for developing web application user interfaces. They can be written using JavaScript or TypeScript.
- React Native
Front-End framework for developing native mobile application. They can be written using Javascript or TypeScript.
Why React Exists?
This question crossed my mind as a software engineer because sometimes I get tired of keeping up with the rapidly evolving technology trends, especially with the emergence of new tools, programming languages, and frameworks that appear like mushrooms. But that is the reality we must accept, whether we adapt to the latest tools/frameworks/languages or we will become obsolete programmers in the future. so, stay up to date.
There are several reasons, which are :
Mark Zuckerberg’s intervention in deciding Facebook’s direction.
Mark had too much hope for HTML5 and he said “it was the biggest mistake he ever made for Facebook.” React emerged in 2012 when Mark was frustrated and had placed his bets entirely on HTML5. Mark made that decision because at that time, the number of users who accessed Facebook via web browsers was much higher than the combined number of users on iOS and Android. However, decisions based solely on user demand are not necessarily the right ones if we prioritize app performance. after several years, facebook team release its own libraries/framework to develop web app/mobile application.
Facebook views Google and Apple as competitors and tries to reduce its dependence on these giant companies. (Java/Android Studio (Own by Google) & Swift/Xcode (Own by Apple)).
the first version of android smartphone release to public was September 23, 2008. according to statista, Number of smartphones sold to end users worldwide from 2007–2010 only around 122 million-296 million which is at that time, There is still no mass adoption worldwide. meaning :
less smartphone adoption = less mobile apps on the market store = less mobile app developer on the job demand .
there are also multiple factor attempt from facebook to enter difficult market, such as its failed attempt to create its own “App Marketplace” like Google PlayStore and iOS Appstore.
Okay, enough of the history let’s start with basics.
the key fundemental before start using react
- JavaScript
React.js and React Native are both based on JavaScript, so it’s important to have a strong foundation in the language. You should be familiar with basic concepts like variables, data types, functions, loops, and conditionals. You should also know how to work with arrays and objects and understand the concepts of scope and closures.
2. HTML and CSS
React.js and React Native are used to create user interfaces, which means you’ll need to have a good understanding of HTML and CSS. You should know how to create and style HTML elements, and have a good understanding of CSS selectors, properties, and values.
3. ES6
ES6 (ECMAScript 6) is a major update to the JavaScript language that introduced new syntax and features, such as arrow functions, classes, and template literals. Many React.js and React Native projects use ES6 syntax, so it’s important to be familiar with these concepts.
4. Node.js and npm
Node.js is a JavaScript runtime built on Chrome’s V8 engine that allows you to run JavaScript on the server side. It’s also used to install and manage packages using npm (Node Package Manager). React.js and React Native projects often use npm to manage dependencies, so it’s important to understand how it works.
5. Git and Version Control
Git is a popular version control system that allows you to track changes to your code over time. It’s important to learn how to use Git and GitHub (or other similar services) to manage your code and collaborate with others.
6. Command Line Interface (CLI)
Most React.js and React Native projects are created and managed using a CLI. You should be comfortable using the command line and know how to navigate directories, create and delete files and directories, and run commands.
By learning these key concepts and tools, you’ll be better prepared to dive into React.js and React Native and start building your own web and mobile applications. Good luck!
Personal opinion on using React technologies:
- React Native and React.js have similar syntax.
For those who are already familiar with using React.js, there is no problem for you to jump to React Native for developing mobile applications for iOS and Android because the syntax is the same and there is no difference.
- React Native has an advantage in multi-platform deployment.
React Native has a big advantage in terms of deployment compared to React.js. React.js only focuses on web apps, but the React Native framework only requires one codebase and can be deployed on different platforms (Web, Mobile, TV, etc.) but its focus is mobile apps.
- React.js render performance is faster than React Native.
This is because React.js uses virtual DOM, while React Native uses real DOM. If you don’t know what DOM is, you can read about it here.
- Very highly dependent on external libraries
Both are highly dependent on external libraries that are not from the ecosystem or built-in libraries of React.”
Conclusion
In summary, while React Native is focused on building mobile applications, React.js is focused on building user interfaces for web applications. Both React Native and React.js use a component-based approach and rely on JavaScript for development, making them popular choices for front-end development. I can say the learning curve is abit difficult & confusing at early phase when you exploring the react-native but it is worth to try.
