NotePad
My final project at Flatiron School.
Creating an app in React-Redux has been so satisfying. I now understand why React seems to be the industry standard for frameworks. For the backend I used Ruby on Rails to build the API.
This final project is a Reddit Clone. There are Users, Posts, and Comments. Users can edit and delete their comments. Here are some other items on my wishlist:
- Adding Communities
- User profiles
- More styling
One thing I struggled with was my navbar links. Apparently React isn’t a fan of Bootstrap’s Nav.Link. React-router has a Link component it prefers. With the example below I was render a new page every time AND I was going to localhost:3001/posts/posts which displayed a NaN error.
Good news: there’s a work-around: you can render a component inside of Bootstrap’s Nav.Link. Just import Link from ‘react-router-dom’, then render Nav.Link as={Link}; see below. I also needed to add in a “/” before each link (i.e. “/posts” instead of “posts”). The following works with my code and hopefully it can help you too!
Let’s talk about mapStateToProps. First of all, as a beginner I thought I’d have to map the posts to the state, i.e. posts: state.posts. I soon learned that if you combine your reducers it creates a new object with new keys. In my case, the keys were postReducer and userReducer. Therefore, I needed to return posts: state.postReducer.posts within mapStateToProps.
Writing it this way allowed me to access state (an array of posts) that were being updated through the postReducer. Voila! Magic.
Here is my “/posts” page. Of course a little styling will go a long way, so I’ll be updating that. It’s been satisfying completing yet another project at Flatiron School, especially in React!!
UPDATE:
I am no longer using Bootstrap and have enjoyed incorporating many new CSS features. See below.