REACT/REDUX & RAILS API

This is a walkthrough of an app I built using a React/Redux front-end that is pulling data from a Rails API. The frontend is deployed on Digital Ocean, Ubuntu 16.4, and the Rails API is on Heroku.

Summary

I created a report card comment engine for teachers. Here at the school I currently work at teachers need to write 300+ report card comments for students every semester. It is an immense workload and I thought, maybe a web app could help them out! I devised a pretty simple idea to navigate a database of pre-written comments and compile them together in a master comment that can then be copy-pasted into the educational software PowerShool. I wanted to make it sensical, user friendly and quick. So, a SPA design seemed best.

Things I Learned

This was built with react, and redux with a Rails api backend. I learned a TON via this project: React lifecycles and state, Redux middleWare, React routes, how to create a rails app of an API backend, wicked new ES6 syntax; it was awesome. Here are some highlights:

React Routing

I used react-router-dom:

npm i --save react-router-dom

Took a bit to get my mind around it, but in react-router, a Route is just way to render components based on the url-location. So, the page never refreshes (reminds me of turbolinks), it just renders different components depending on which link was clicked. It doesn’t actually “route” anywhere, pretty slick.

As you can see, I have guest routes, and user routes. Only the user Routes ( which are just component render-ers) get are available when isAuthenticated is true, via this code:

{isAuthenticated?userRoutes:guestRoutes}

Now, if a Route’s has the attribute exact={true}, it will only render on it’s exact path, but if not will render as long as part of the path matches it’s path. So, used that feature to create a layout:

So, now I can have any route render any component just by changing the Route path and component.

React Component Lifecycles

We learned about component lifecycles in the curriculum, and it really seems to be the heart of learning react. I can already tell mastering these component lifecycles if really the key here. Here is where I found some of them useful:

Using lifecycle methods for Fetch requests

I did a couple fetches from componentDidMount:

componentDidMount(){this.props.dispatch(fetchComments());}

sends an action to dispatch that does the fetch async, using Thunk, like so:

This is super useful, as the component is already rendered, the user gets to see stuff, and the fetch is happening quietly in the background. Great for a smooth UX.

But, sometimes I wanted the fetch to get started earlier than that, so i used componentWillMount:

componentWillMount(){fetch(`http://localhost:3001/users/${this.props.userId}/comments`).then(response=>response.json()).then(response=>{console.log("THIS IS THE RESPONSE:",response)this.setState({comments:response})})}

I wanted this data before the component actually mounted, so I made a synchonous fetch request before it renders.

what this section is about

why it matters

research or examples

takeaways

New Awesome ES6 syntax

Javascript is really getting awesome. I love the new syntax. Here are my favorites:

Arrow functions

These are indespensible in React. You can call a function without loosing your this binding, like so:

It also will not allow re-declaration of the same varible name, which can save alot of headaches if you forgot you already used that variable name before

the difference between const and let is that const won’t allow any re-assigment.

Conclusion

This project was super fun, and really made me realize how far I have come. I can now wire up an entire stack with Rails, or with a React front end. Pretty cool. I can’t wait to get out there and build build build! Thank you for reading!