This example demonstrates how to:
- connect your React frontend to Express backend and MongoDB
- authenticate your app using cookies
- use statezero to maintain a global state that can be accessed from anywhere in your app
- organize your app so that your code is maintainable
- make your app prettier using Material UI ✨
# Set up for the first time
cd client
npm install
cd ..
npm install
cd client
npm run build
# in the root directory
mkdir mongo-data
mongod --dbpath mongo-data
node server.js
react-express-auth
├── db
│ └── mongoose.js
├── models
│ ├── user.js
│ └── student.js
├── package.json
├── server.js
└── client
├── public
│ ├── index.html
│ └── ...
├── tests
│ └── ...
└── src
├── actions
│ ├── student-list.js
│ ├── student-form.js
│ └── helpers.js
├── react-components
│ ├── BaseReactComponent
│ │ └── index.js
│ ├── Dashboard
│ │ └── index.js
│ ├── StudentForm
│ │ ├── index.js
│ │ └── styles.css
│ ├── Student
│ │ ├── index.js
│ │ └── styles.css
│ └── ...
├── index.js
├── index.css
├── App.js
├── App.css
├── MainView.js
├── package.json
└── serviceWorker.js
Each React component lives in a separate directory with its own index.js
and styles.css
. Import them from parent components as needed.
Unique styles associated with each React component are kept separate. If the same styles are shared between multiple React components, keep them in a top-level, shared CSS file (i.e. App.css) to avoid repeated styles.
The following Material UI components are used in this app:
- Button
- TextField
- Grid
- Table
- Table Body
- Table Row
- Table Cell
You can find more components here.
Note that you can override the default styles of these components by increasing CSS selector specificity.
To keep your index.js
files clean and simple, import required methods from an associated action file. Following this structure can help organize your code and keep it manageable.
Application state is maintained as a single, immutable, global state graph. See statezero documentation for more information.
Whenever the global state changes via actions, each component's filterState()
method is invoked with a
frozen copy of the new state and then its render()
method is invoked.
Steps on using statezero in your app:
- Add statezero as a dependency in
package.json
. - In the main index.js, call:
setEmptyState()
: This initializes all state paths in the global state as empty. You need to create this method. Think about the state paths that are required by your app (for example, this app requires a studentList state path to render all students in the database when a user presses the Get Students button). These are the states your components will directly read from to render correctly. Any actions that a user performs in your components will also write to these states.startLogging()
: When an action is called, a table is printed to the console which describes the changes. This method is provided by statezero.
- Create a BaseReactComponent class that extends
React.Component
and does the necessary setup for statezero. You can directly copy this component. BaseReactComponent
provides a filterState method to components that extend from it. Any component class that needs to read from state paths in the global state needs to extend this class (see StudentForm as an example).- Your extended
BaseReactComponent
component class should define afilterState()
method that chooses the state paths your component needs.filterState()
puts the filtered state paths on your component'sthis.state
. You can then read these states in yourrender()
method. - When a user performs an action (i.e. clicks the Get Students button to make a GET request to the '/students' endpoint), your action method should update the appropriate state path using
setStateByPath()
(see student-list as an example). Once the state path is updated, theStudentList
component will use it to rerender. Notice how an updated state table is logged in your console everytime you mutate the global state paths.
Statezero makes it simple to read and update the global state in your app without having to pass around component states.