Tech Networking App — React Project

Setting up the backend

Setting up the backend was a breeze — using scaffold when generating models is truly painless. The three models I have are: User, Post, and Friendship. In order the friendship functionality working properly, I had to set up a self-referential relationship in the User class, so that a user can friend another user. A user has many posts, friendships, and many friends through friendships. A post belongs to a user. Friendship is the join table between two users and is set up like so:

tech_networking_api/friendship.rb

Understanding the flow of data in React/Redux

Understanding how data is passed through the application is absolutely crucial to building a fully functioning app. Without this knowledge, it’s almost impossible to debug your code. One of the first steps in setting up the application (after running create-react-app) is to connect to Redux. This is done by the provider, which acts as the “glue” between react and redux. It takes in a prop of “store”, which holds the state-tree of the app. Provider is then wrapped around the entire app in the index.js file, where the store is also created using { createStore } from redux. Having a store is beneficial because now any component can easily access state, without having to worry about “prop drilling”. Prop drilling is passing data as props from one part of a tree to another through components that do not need the data.

tech_networking_client/components/Profile.js
tech_networking_client/actions/postsActions.js
tech_networking_client/reducers/postsReducer.js

--

--

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