/React_RNative_Express_PostgreSQL

Simple GET & POST app using React, React Native, Express & PostgreSQL

Primary LanguageJavaScript

simplinnovation

React ❤️ React Native 💛 Express 💚 PostgreSQL

Video

1. Setup PostgreSQL Database

  • Activate PostgreSQL server, then create a dojo database with a ninja table:

    $ create database dojo;
    
    $ \c dojo
    
    $ create table ninja(
        no integer,
        nama varchar(30), 
        usia integer
        );
  • Insert some data, as initial data, into ninja table:

    $ insert into ninja values
        (1, 'Andi', 22),
        (2, 'Budi', 23);
    
    $ select * from ninja;
  • Done! 👍

2. Setup Node.js Backend Project

  • Clone this repo, go to Express_Backend folder then install all dependencies:

    $ git clone https://github.com/LintangWisesa/React_RNative_Express_PostgreSQL.git
    
    $ cd React_RNative_Express_PostgreSQL/Express_Backend
    
    $ npm i
  • Open app.js & edit these lines to configure your database:

    const sequelize = new Sequelize('postgres://user:password@localhost:5432/dojo');
  • Save it, then run your backend project. It will run at localhost:3210:

    $ node app
  • Done! 👍

3. Setup React Frontend Project

  • Go to React_Frontend folder, install all dependencies then run this project:

    $ cd React_RNative_Express_PostgreSQL/React_Frontend
    
    $ npm i
    
    $ npm start
  • It will run at localhost:3000 & open in browser automatically! Done! 👍

4. Setup React Native Android Project

  • Activate your AVD (Android Virtual Device). In this project, I'm using Genymotion. It's much lighter than Android Studio's AVD.

  • Go to RNative_Mobile folder, install all dependencies then run this project:

    $ cd React_RNative_Express_PostgreSQL/RNative_Mobile
    
    $ npm i
    
    $ react-native run-android
  • Done! 👍

See also:

Lintang Wisesa 💌 lintangwisesa@ymail.com

Facebook | Twitter | Google+ | Youtube | :octocat: GitHub | Hackster