How to start with React Native as ReactJS developer?

By coursity / July 19, 2024

Recently, I spoke at React Nexus on “Accessibility and TV Apps.” One question I kept getting was: “As a ReactJS developer, how easy is it to start with React Native?”

In short, for a ReactJS developer, starting with React Native would be easy.

In this blog, I am going to share the five things ReactJS developers can use in React Native.

1. Components

In React Native, you will create components similarly to how you do in ReactJS. The concepts and best practices remain the same.

import React from 'react';
import { View, Text } from 'react-native'; const GreetingComponent = () => { return ( <View> <Text>Hello, Neha!</Text>
 </View>
 );
};
export default GreetingComponent;

Enter fullscreen mode
Exit fullscreen mode

2. Props and state

In React Native, props and state work the same way as in ReactJS. To communicate between components, you will use props. To update values, you will use state.

import React from 'react';
import { View, Text } from 'react-native'; const GreetingComponent = ({ name }) => { return ( <View> <Text>Hello, {name}!</Text>
 </View>
 );
};
export default GreetingComponent;

Enter fullscreen mode
Exit fullscreen mode

3. Hooks

Just like in ReactJS, you can use all the hooks in React Native, such as useState(), useMemo(), useEffect(), etc. Additionally, you can create your own custom hooks.

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native'; const GreetingComponent = () => { const [name, setName] = useState('John'); const changeName = () => { setName('Jane'); }; return ( <View style={styles.container}> <Text>Hello, {name}!</Text>
 <Button title="Change Name" onPress={changeName} />
 </View>
 );
}; export default GreetingComponent;

Enter fullscreen mode
Exit fullscreen mode

4. Testing

If you are a fan of the React Testing Library, the good news is you can use the same library for testing in React Native.

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import GreetingComponent from './GreetingComponent'; test('it renders correctly and changes name on button press', () => { // Render the component const { getByText } = render(<GreetingComponent />); // Assert initial state expect(getByText('Hello, John!')).toBeTruthy(); // Find the button and simulate a press const button = getByText('Change Name'); fireEvent.press(button); // Assert that the name has changed expect(getByText('Hello, Jane!')).toBeTruthy();
});

Enter fullscreen mode
Exit fullscreen mode

5. JSX

In React Native, there are a handful of components that can be used to create views in JSX. However, in ReactJS, you can use any valid HTML DOM elements.

import React from 'react';
import { View, Text } from 'react-native'; const GreetingComponent = () => { return ( <View> <Text>Hello, Neha!</Text>
 </View>
 );
};
export default GreetingComponent;

Enter fullscreen mode
Exit fullscreen mode

Happy Learning!!

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply