CODEWITHSUNDEEP
androidnode.jsreact-nativemobile
Chilly
Chilly

Reputation: 233

Connect React Native front end with Node back end

Sorry in advance if this is a silly question but I'm going in circles here. I'm pretty new to react and node, and looking to connect my react native front end with my node back end. Pretty much every tutorial I read is telling me to "paste the fetch api code after the class declaration and before the render method", but I don't have a class declaration or render method in any of my code, so I'm a little confused about where to put the fetch api code? I don't know if this makes a huge difference but each screen of my app is in it's own file as it's own function and I am using a stack navigator to get between the screens with it's functionality contained in another file for the stack navigator.

If anyone could offer me some help I would really appreciate it, I am beyond confused about what to do.

Included below is my Login Screen function so you can see what I mean when I say the screens are set up as functions. All other screens are laid out the same way. Please let me know if you need to see anything else and I will edit and add it in!

import React from 'react';

function LoginScreen() {
  return(
  <View style={{ alignItems: "center", marginTop: 24 }}>
  <Text style={styles.text}>
    Login Screen
  </Text>
  </View>
 );
}

export default LoginScreen

Again, I would appreciate any help anyone could give me as this is driving me demented and I would really like to get this working!

Upvotes: 0

Views: 3319

Answers (3)

edilsonlm217
edilsonlm217

Reputation: 76

A most pro and less verbose way to do it is using axios library. Check this code out:

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

import axios from 'axios';

export default function LoginScreen() {
  const [user, setUser] = useState({});

  const termToSearchFor = 'edilsonlm217';

  useEffect(() => {
    async function loadAPI() {
      const response = await axios.get(`https://api.github.com/users/${termToSearchFor}`);

      setUser(response.data);
    }

    loadAPI();
  }, []);

  return (
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text>
        {user.bio}
      </Text>
  </View>
  );
}

This piece of code searchs for my user "edilsonlm217" in the public github's API right away after the component load. It gets the response from response.data and set it to user state then print my bio on screen.

Don't forget to install axios as dependecy to your project before use it.

Upvotes: 0

Saiem Saeed
Saiem Saeed

Reputation: 57

So, You are trying to use Functional Components instead of Class Based Component.

In Functional Components to send FetchAPI Request we use React Hooks, useEffect to send api request, and save the return data of API Request in another hook useState.

Please read more about React Hooks here, https://reactjs.org/docs/hooks-intro.html

In your above scenario fetch api request with functional components will be something like this,

import React, {useEffect, useState} from 'react';

function LoginScreen() {

  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('yourapi.com/user')
    .then(res => res.json())
    .then(data => setData(data));
  }, []);

  return(
    <View style={{ alignItems: "center", marginTop: 24 }}>
      <Text style={styles.text}>
        // You Can Use Your Data Here {data}
        Login Screen
      </Text>
    </View>
 );
}

export default LoginScreen

Upvotes: 1

bmovement
bmovement

Reputation: 867

With functional components, you declare your "methods" inside your function:

function LoginScreen() {
  const submit = () => {
    //do something 
  }

  return <View>
    <Button title="Submit" onPress={submit} />
  </View>
}

Upvotes: 1

Related Questions