Recentemente, falei no React Nexus sobre "Acessibilidade e aplicativos de TV". Uma pergunta que sempre recebi foi: "Como desenvolvedor ReactJS, quão fácil é começar com React Native?"

Resumindo, para um desenvolvedor ReactJS, começar com React Native seria fácil.

Neste blog, vou compartilhar as cinco coisas que os desenvolvedores ReactJS podem usar no React Native.

1. Componentes

No React Native, você criará componentes de maneira semelhante a como faz no ReactJS. Os conceitos e práticas recomendadas permanecem os mesmos.

import React from 'react';
import { View, Text } from 'react-native';

const GreetingComponent = () => {
  return (
    
      Hello, Neha!
    
  );
};
export default GreetingComponent;

2. Adereços e estado

No React Native, props e state funcionam da mesma maneira que no ReactJS. Para se comunicar entre componentes, você usará adereços. Para atualizar valores, você usará state.

import React from 'react';
import { View, Text } from 'react-native';

const GreetingComponent = ({ name }) => {
  return (
    
      Hello, {name}!
    
  );
};
export default GreetingComponent;

3. Ganchos

Assim como no ReactJS, você pode usar todos os ganchos no React Native, como useState(), useMemo(), useEffect(), etc.

importar React, { useState } de 'react'; importar {Visualizar, Texto, Botão, Folha de Estilo} de 'react-native'; const GreetingComponent = () => { const [nome, setNome] = useState('John'); const alterarNome = () => { setNome('Jane'); }; retornar ( Olá, {nome}! ); }; exportar GreetingComponent padrão;

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 (
    
      Hello, {name}!
      
    
  );
};

export default GreetingComponent;

4. Teste

Se você é fã da React Testing Library, a boa notícia é que você pode usar a mesma biblioteca para testes no React Native.

importar React de 'react'; importar { render, fireEvent } de '@testing-library/react-native'; importar GreetingComponent de './GreetingComponent'; test('é renderizado corretamente e muda o nome ao pressionar o botão', () => { //Renderiza o componente const { getByText } = render(); // Afirma o estado inicial expect(getByText('Olá, John!')).toBeTruthy(); // Encontre o botão e simule um pressionamento botão const = getByText('Alterar nome'); fireEvent.press(botão); // Afirma que o nome mudou expect(getByText('Olá, Jane!')).toBeTruthy(); });

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 (
    
      Hello, {name}!
      
    
  );
};

export default GreetingComponent;

5.JSX

No React Native, há vários componentes que podem ser usados ​​para criar visualizações em JSX. No entanto, no ReactJS, você pode usar qualquer elemento HTML DOM válido.

importar React de 'react'; importar {Visualizar, Texto} de 'react-native'; const GreetingComponent = () => { retornar ( Olá, Neha! ); }; exportar GreetingComponent padrão;

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 (
    
      Hello, {name}!
      
    
  );
};

export default GreetingComponent;

Bom aprendizado!!