React Skeleton Native: De Zero a ‘Hello World’ sem perder sua sanidade
Então você deseja criar um aplicativo móvel? Bem -vindo ao clube! Hoje estamos montando os ossos nus de um projeto nativo do React – pense nisso como o esqueleto que acabará crescendo em nossa besta rastreadora de compras. Não se preocupe, esse esqueleto é amigável e não assombrará seus sonhos (ao contrário de alguns conflitos de dependência que eu já vi). Por que reagir nativo? Porque a vida é muito curta para duas bases de código 🤷♂️ vamos ser reais: ninguém quer criar o mesmo aplicativo duas vezes. O React Native permite escrever uma vez e implantar em todos os lugares – iOS, Android e até Web, se você estiver se sentindo chique. É como ter um controle remoto universal para o desenvolvimento móvel, exceto que ele realmente funciona. Além disso, se você já sabe reagir, está no meio do caminho. Se você não faz … bem, você está prestes a aprender! 🚀 O que estamos instalando (a lista de compras) 🛒 Aqui está o que precisamos para fazer nossa caminhada de esqueleto: a Trindade Essential # A Trindade Santíssima do Desenvolvimento Móvel NPX Create-EXPO-App Mobile-Template-Typescript CD Mobile Mobile MOTELSTEL INSIT @react-navigigy @react-NaVigation/Bottom-Tabs Entre o modo de tela FullScreen FullScreen FullScreen Mode FullScreen React-native-screens react-native-sif-area-Context # ícones, porque ninguém gosta de botões somente de texto npm install @react-native-vector-icons/ionicons # coisas de câmera (para o modo de perseguição de término, que não quer que seja, o modo que não quer que seja, o modo de término, que não quer que seja, o que não quer que seja, o que quer que seja, o que quer que seja, o time do mundo. Personalidade: // app.tsx – O personagem principal da nossa história de importação reage de ‘React’; importar {exibir, texto, folha de estilo, touchableOpacity} de ‘react-native’; Exportar App de função padrão () {const [greetingCount, setGreetingCount] = React.usestate (0); Saudações const = [
“Hello, World! 👋”,
“Sup, Universe! 🌍”,
“Hey there, Developer! 👨💻”,
“Greetings, Human! 🤖”,
“What’s up, Code Warrior! ⚔️”
]; const Handlepress = () => {setGreetingCount ((contagem) => (contagem + 1) % Greetings.length); }; retornar (
{saudações[greetingCount]} Texto> TouchableOpacity>
Toque na saudação para percorrer as mensagens! Texto> view>); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#f5f5f5’, alignItems: ‘center’, justifyContent: ‘center’, padding: 20, }, title: { fontSize: 28, fontWeight: ‘bold’, color: ‘#2196F3’, marginBottom: 8, }, subtitle: { Fontsize: 16, cor: ‘#666’, marginbottom: 40,}, botão: {BackgroundColor: ‘#2196f3’, PaddingHorizontal: 30, Paddingvertical: 15, shadowactRadius: 25, marginbottom: 20, ShadowColor: ‘#000’, shadowfset {wliMth: 4, elevação: 5,}, saudação: {color: ‘#fff’, fontsize: 18, fontweight: ‘600’,}, dica: {fontsize: 14, cor: ‘#999’, textalign: ‘Center’,},}); Enter fullscreen mode Exit fullscreen mode Project Structure: Organized Chaos 📁 Here’s how to keep your code from becoming a digital dumpster fire: mobile/ ├── src/ # Where the magic happens │ ├── components/ # Reusable UI bits │ ├── screens/ # Full-screen components │ ├── navigation/ # How users get around │ ├── services/ # API calls and data stuff │ ├── Tipos/ # Definições de tipascript │ └─— Funções de auxílio/ # Helper ├─— Imagens, fontes, fontes, etc. ├── App.TSX # O PRINCIPAL PAPELO PACOTO PACOTH.JSON # LISTA DE DEPEDÊNCIA DO MODO COMPROTET APLET APLET APLET APLET APLET REUTS. Confie em mim neste. Crie um arquivo de tipo simples para começar: // src/types/index.ts Export Interface AppProps {title: string; legenda?: string; } Exportar Interface Usuário {id: string; Nome: String; E -mail: string; } // Mais tipos viverão aqui à medida que crescemos, entre no modo de tela cheia, saída de tela cheia executando sua obra -prima 🏃♂️ # Inicie o servidor de desenvolvimento NPM Iniciar # Abrir no Android (se você tiver um emulador) npm execute Android # Abrir no modo IOS (se você estiver no macOS) NPM Run IOS # Open Browser Full (porque não?) NPM (não está no MACM), o Skoren é o skeren full #, o skeren full full full full) npm (se você está no skeen scrun #, o skoren full # full # full full) npm (se você estiver no macOS), execute o screen # aberta no browser full (porque não?) Npm (não está no skeron full # scorn # Simples: comece pequeno, cresça gradualmente use TypeScript: Seu futuro eu agradecerá a você organizar cedo: a boa estrutura impede que as dores de cabeça testem mais tarde: execute -o cedo, execute -o muitas vezes se divertindo: se você não está gostando, está fazendo errado! O que vem a seguir? 🚀 Agora que temos um esqueleto em funcionamento, podemos começar a adicionar carne a esses ossos: navegação entre os componentes reais com a funcionalidade real do gerenciamento de estado (quando as coisas ficam picantes) a integração da API (quando nos conectamos ao mundo real) lembre -se: Todo aplicativo foi iniciado como um simples “mundo do olá” – até o Instagram era provavelmente apenas um botão que dizia “tire a foto” em algum ponto! Status do esqueleto: ✅ montado e caminhando! Em seguida: construiremos os componentes reais que fazem do nosso rastreador de compras tick. Fique atento! 🎬
Fonte
