Header Image - Underground Code

How to Structure a React Project

If you are wondering how to structure a React project, this is a question that you aren’t the only one trying to answer that question. From my experience with React, you have to answer 3 questions first:

  1. Is your project small, medium, or large?
  2. Is this a personal project or a company project?
  3. Are you going to have multiple apps built using React?

Project Size

Why does project size matter? This matters because if it’s a small personal project, do whatever makes sense to you.

Small to Medium Personal Projects

 - Components/ (for reuable components)
 - Utils/ (Such as Ajax, URI manipulation, etc)
 - Views/ (Such as header, footer, feed item)

Large Company Projects

 - Components/ (for git submodules so these could be maintained differently)
   - News Feed/ (example git submodule)
   - Advertisements/ (example git submodule) 
 - Utils/ (Have this be a submodule)
 - Views/
   - Page1/
     - _page1OnlyItems/
       - page1.css
       - page1.test.js


If you have any questions, I can adjust this post to accommodate for other types of structures that you have found successful.


React Broadcast

The other day I was creating a react app using Facebook’s create-react-app, when I noticed that there wasn’t a built in Broadcast functionality like there is in angular. So I looked and found a few too complicated ones, so I just decided to create my own called React Broadcast. React Broadcast is a simple library designed to make broadcasting to other parts of the code dead simple.

React Broadcast Usage

So how do we use React Broadcast? This is quite simple:

Broadcast an Event

To broadcast an event to all components watching for the event:

var ReactBroadcast = require('reactbroadcast');
ReactBroadcast.broadcast('event1', 'value1');

Listen for a Broadcast

To receive the event within any component:

var ReactBroadcast = require('reactbroadcast');
ReactBroadcast.on('event1', value => {
   console.log("received the value");

Listen for a Broadcast containing

If you want to receive all values containing a certain string:

var ReactBroadcast = require('reactbroadcast');
ReactBroadcast.onContains('event', value => {
   console.log("received the value");

Get all listening names

var ReactBroadcast = require('reactbroadcast');
var names = ReactBroadcast.getAllNames();