DEV Community

Neha Sharma
Neha Sharma

Posted on

How to start with React Native as ReactJS developer?

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 concepts of ReactJS, 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.

In the below code, you can see React Native component syntax is similarly like the ReactJS

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.

In the below code of react native, we are using props name similarly like ReactJS.

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.

In the below code of React Native, we are using useState() similarly like ReactJS

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.

In the below code of React Native, View, and Text are the React Native components. These components are used to create the view of the app.

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!!

Top comments (11)

Collapse
 
deadreyo profile image
Ahmed Atwa

I liked the part where you mentioned what the ReactJS developer will need to learn on top of his react knowledge.

Collapse
 
hellonehha profile image
Neha Sharma

apparently, the blog is opposite of what you said :)

Collapse
 
jerin_jacob profile image
Jerin Jacob

😂

Collapse
 
alirezatalebizadeh profile image
علیرضا طالبی زاده

This is best article for understand of how to start react native.

Collapse
 
hellonehha profile image
Neha Sharma

thank you

Collapse
 
raddevus profile image
raddevus

Where do I type the code?

Do I save it as js files?
How do I run it to see it working?

Collapse
 
hellonehha profile image
Neha Sharma

Hello,

Where do I type the code? - You can use VScode or any your fav editor.
Do I save it as js files? - Just like ReactJS, the extension would be Test.jsx, or Test.tsx

How do I run it to see it working? -
You can follow this: reactnative.dev/docs/getting-started-without-a-framework or use expo

Thanks

Collapse
 
gunymedian_e1df1644219d8c profile image
Gunymedian

How about Tailwind? Can I use tailwind over there too?

Collapse
 
hellonehha profile image
Neha Sharma

ReactNative is for native mobile app development. Tailwind is for the HTML elements, and in native mobile apps there is no HTML elements. But for people like us who love tailwind , there is Native wind for React Native.

Collapse
 
vivekraj_kr profile image
Vivekraj K R

How do we add styles though?

Collapse
 
hellonehha profile image
Neha Sharma

There is inbuilt StyleSheet. All we need to do is import from react native and start writing styling. React Native works on css flex box. reactnative.dev/docs/stylesheet