Topic 4

What is react native?

React Native is a popular open-source framework developed by Facebook in 2011 for
building mobile applications using JavaScript and React. It allows developers to create
apps for both iOS and Android platforms using a single codebase, making it more
efficient than writing separate code for each platform. React Native uses native
components rather than web components, giving apps a more native look and feel,
while still leveraging JavaScript and React's declarative programming style.
Why choose React Native?
1. Cross-Platform Development
React Native allows you to create apps for both iOS and Android using a single
codebase, which reduces the need for maintaining separate development teams and
cuts down the overall development time and effort.
2. Faster Development with Hot Reloading
React Native’s hot reloading feature enables you to see real-time changes in your app
as you modify the code, speeding up the development cycle by reducing the need for
full app recompilation every time you make a small change.
3. Native Performance
React Native apps interact with native modules and components, offering a level of
performance close to fully native apps. This provides a smooth user experience, with
faster load times and more responsive interfaces.
4. JavaScript and React Expertise
If your team is already familiar with JavaScript and React, React Native allows them to
build mobile apps without having to learn new programming languages like Swift or
Kotlin, making it easier for web developers to transition into mobile development.
5. Modular and Reusable Components
React Native uses a component-based architecture, where you can build modular
components that can be reused across different parts of the app. This ensures
consistency, reduces redundancy, and makes it easier to maintain and scale apps.
6. Strong Community and Ecosystem
The large and active community around React Native provides extensive resources,
including libraries, tutorials, plugins, and tools that simplify the development process
and offer solutions to common challenges.
7. Third-Party Plugin Support
React Native supports integration with a wide variety of third-party plugins, allowing
you to easily incorporate additional functionality, such as maps, analytics, and payment
systems, without building these features from scratch.
8. Live and Over-the-Air (OTA) Updates
With React Native, you can use services like CodePush to deploy OTA updates, enabling
you to push updates directly to users without needing them to go through app store
approval. This simplifies bug fixes and feature rollouts.
9. Cost-Effective
By enabling code reuse across multiple platforms and reducing the need for separate
development teams for iOS and Android, React Native lowers the overall development
and maintenance costs.
10. Growing Adoption by Major Companies
React Native is trusted by large companies like Facebook, Instagram, Uber Eats, and
Airbnb, proving that it is scalable, reliable, and capable of building high-performance
mobile applications at scale.
Why ReactNative was built?
React Native was built by Facebook to solve key challenges in mobile app development,
such as the need to build cross-platform apps with a single codebase for both iOS
and Android, reducing the time and cost associated with developing two separate native
apps. It was also created to leverage JavaScript and React, technologies already
familiar to many web developers, while maintaining native-like performance by
allowing apps to interact with native components directly, offering a faster and more
efficient development process.
Functional Javascript
Props
Props (short for "properties") are a way to pass data and event handlers from one
component to another in React. They help make your components dynamic and
reusable by allowing them to receive information from their parent components.
import React from 'react';
import ReactDOM from 'react-dom/client';

function Car(props) {
 return <h2>I am a { props.brand }!</h2>;
}

const myElement = <Car brand="Ford" />;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(myElement);
1. Pure Functions
React components often act like pure functions, which means they take props as input
and return a JSX output without side effects.
const Greeting = (props) => <h1>Hello, {props.name}!</h1>;
2. Immutability
In React, state is treated as immutable. Rather than directly modifying the state, you
create a new state object to ensure predictable updates.
const [count, setCount] = useState(0);
setCount(count + 1);
3. Composition
React promotes composition over inheritance, which is a core functional programming
concept. In React, you compose components together to build complex UIs.
Components are treated as small, reusable, and independent pieces that can be
combined or nested.
const Page = () => {
return (
<Header />
<Content />
<Footer />
);
};
4. Declarative Programming
React is a declarative framework, meaning developers describe what the UI should
look like rather than specifying how to change it. The component's output is a direct
function of its props and state, without the need to manage manual DOM
manipulations.
const App = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);

return (
<div>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);
};
5. First-Class Functions
React treats functions as first-class citizens, commonly used in event handlers and
passing functions as props.
const Button = ({ onClick }) => <button onClick={onClick}>Click me</button>;