How to set up a React project

Project idea and requirements

I was thinking of getting a cat lately so I once thought about writing a small website that could collect all kinds of cat breeds information and display cute pictures. However after I speak with my career coach, he suggested I create an app more business relative than personal interest. So I decided to develop a Yelp-like website.

The requirements are as listed

• Your app should have one HTML page to render your react-redux application
• There should be 5 stateless components
• There should be 3 routes
• The Application must make use of react-router and proper RESTful routing
• Use Redux middleware to respond to and modify state change
• Make use of async actions and redux-thunk middleware to send data to and receive data from a server
• Your Rails API should handle the data persistence with a database. You should be using fetch() within your actions to GET and POST data from your API - do not use jQuery methods.
• Your client-side application should handle the display of data with minimal data manipulation
• Your application should have some minimal styling

So to combine all these requirements and my Yelp-like app idea together, I need a Ruby on Rails backend to provide an external database for fetching. 3 routes could be the home page, shop page, shop detail page which is dynamic and I‘d like to create a city page. With these routes, there will be more than 5 stateless components without a doubt. Perfect let’s dig in!

App structure

Standard Ruby on Rails backend. I created this in my root folder and run

rails new backend --api

Rails generate all the subfolders for me. All I have to do is to create models, controllers, serializers and set up the association that shop has many reviews and review belongs to a shop. Then seed some dummy data and run rails db:migrate and rails db:seed

Shop data contains name, address, city, state, postal code, stars, categories, and reviews.

I created this in my root folder and run

create-react-app frontend After deleting unnecessary files and adding some folders, the structure becomes what you see on the left.

actions: where to put action creators

homepage: includes home page js file and specific CSS file

img: a folder that stores shop’s image and city banner

reducers: only one file — manageShop.js

reviews: where I store reviews container and child components

shops: where I store shops containers and child components

City, CityContainer, and NavBar are just separate files because they don’t have that strong connection to other files.

In the .env file, there is only one line of code CHOKIDAR_USEPOLLING=true, this is because my app couldn’t refresh itself while developing. In order to not shut down and reboot the server every time I make some changes in my app and waste countless time, I googled and learned that this would help. Thank goodness!

Router setting

I set up the NavBar at the top of app.js within the header so users can see this navigation bar on every page. Below are all the routes in this app, I didn't create a city model to nest all of the cities under city because it’s just a small module of my app. On the contrary, I nested all shop detail pages under ShopContainer.

In ShopContainer, if the URL is exact /shops there will be a search bar component and a shops components taking up the full page. In the search bar component, I also passed a callback function as props for it could change its parent component to change state so that shops component would know which shops to render. While navigating to a specific ShopDetail page users wouldn't see this search bar and they will see the detailed info of that shop and the reviews of it.

In the ReviewsContainer there are two components

The first part is responsible for displaying all the reviews by passing them as props to the Review component.

The other one is handling adding comments. This action creator addReview has been passed to props through the alternative way of mapDispatchToProps which is a plain object.

At Last

React can be really confusing when you first get your hands on it. However, once you started to understand different small parts of it, you will find it super powerful, efficient, and fun to develop. Props and state, events and forms, lifecycle method, client-side routing, and redux. Little by little put these pieces together, write the code yourself a few more times, you definitely can nail this!

I will write more details about my app after finishing revised work for my assessment!

For all the source code and actual website experience welcome you guys come to my GitHub https://github.com/figo5530/React-Project and play around.

Thank you for reading!