Teach me how to React-Dougie.

~setting up your React App

[with PostgreSQL, geared towards Mac users]

While many months into my coding journey, I have arrived to the point where I am setting up my first React app partnered with a Rails backend and PostgreSQL is the server for my database. [As opposed to using an SQLite local database, this will give me the ability to upload and host my project later on to the internet. An alternative to Postgres, could be MongoDB]

I have encountered many environment issues setting up Postgres on my Macbook’s local environment. I use VS Code for my local environment and it has been an excellent tool thus far.

Let’s talk set up for a React App. Let’s break it down steps 1, 2, 3, a, b, c.

Part One: Backend Setup

— api : this denotes you will be creating a Rails 5 API by adding this to your code

-side note :[what is an api?]

-it stands for application programming interface and it delivers a users response to a system and send the systems response back to the user

-T : tells your terminal, don’t set up tests for this app.

— database=postgresql : sets up a Postgres database[as opposed to another database, like SQLite]

  • pro tip: run rails db:create to ensure you have postgres running.

gem install rack-cors

an alternative: in your Gemfile see that this exists:

Errors with PostgreSQL in setup

If you run into an error with setting up postgresql [as I did], here are some solutions. I discovered I had postgresql downloaded twice in my environment. I had to do a deep dive with a teacher of my coding program to find that out and delete it. If you follow directly from these directions as opposed to the postgresql website, you shouldn’t find yourself with duplicates as I did.

-try running this line of code in the terminal to update your homebrew with PostgreSQL:

- If you’re experiencing permissions issues:

sudo chown -R $(whoami):admin /usr/local/* \

&& sudo chmod -R g+rwx /usr/local/*

Part Two: Frontend Setup

npm install -g create-react-app

then in the folder you want to create the app run: create-react-app my-app

Part Three: Filling out the Backend

Now, let’s get the basics of our rails backend setup.

Once your Models/relationships are all mapped out on paper or Lucidchart.com or wherever you have done this, it’s time to create some models/migrations/controllers!

Here’s a shortcut map in text that helped me a lot:

-g, is a shortcut for generate

-Model name is followed by the attributes of the Model that will create it’s schema

- for strings, you only need to type the attribute: i.e. name, topic

-for other types like integer, you must type the name of the attribute followed by a “:” and the type of data it is: i.e.: age:integer, year:integer

-remember if you need to adjust your migration, be sure to rollback it first

-code for rolling migration back rails db:rollback

-how to rollback a specific migration: rails db:rollback STEP=1

-whatever number follows the “=”sign is the number of migration it will rollback,

If you need more than one rolled back you could change to the number to 4, 5, or however far back in your migration number you wanted to go.

-create your controller, typing this will populate a controller

-if you add “index, show, edit, new, create, etc.” following the controller name, those method’s will be populated for you to use in the controller file

-seed your database with this code!

Now on to create your App and Components as you see fit!

I hope this mini tutorial on setting up a Rails React App, will be a helpful guide and reference for you!

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store