Repository files navigation

한글 공식문서

Your One-Stop solution for a full-stack app with ES6/ES2015 React.js featuring universal Redux, Redux Thunk, React Router, Hot reloading, Emotion, Express 4.x, and multiple ORMs. 🚀

Formerly known as choonkending/react-webpack-node

• isomorphicuniversal Rendering

• Redux Predictive state containers.

• Redux Thunk for asynchronous action dispatch.

• Server-side rendering withReact Router 5.x. Having server-side rendering allows you to pre-render the initial state of your components when a user (or search engine crawler) requests a page.

• Integrating Redux with React Router withConnected React Router

• Asynchronous Data Fetching on server-side rendering(SSR)

• Server side authentication + Redirecting for components

• Hot reloading usinghot-loader/react-dom

• Time travel usingRedux-Devtools Chrome Extension

• Webpack 5 for both development and production bundles. It's (in my opinion) the best bundler for JS, CSS, LESS, images, and lots more!

• emotion allows for CSS-in-JS. Say goodbye to conflicts (most of them) and global scope

• Unit Testing with jsdom, mocha, sinon & enzyme

  • Reducers
  • Components (Enzyme)
  • Synchronous and Asynchronous Actions

• Express 4.x server with a ton of middleware

• Mongoose for MongoDB

• Sequelize for Postgres or MySQL

• Procfile to enable deployment to Heroku & Docs on Salt configurations + Deployment for Digital Ocean

The motivation is simple: best practices and a wonderful development experience. Our ultimate goal is to provide a boilerplate for building non-trivial applications that are secure, performant and free of bugs. Believing a mixture of React.js, Webpack and Node was the best way to accomplish this, we created react-webpack-node.

reactGo also works great as a learning tool for anyone interested in learning how to implement a large React application, or those who want a modern setup ASAP.

We've had extensive community additions to this boilerplate over time as practices have evolved, and are always interested in hearing new ideas or contributions.

We're really big fans of this implementation of flux for state management. The main principles of having:

• a single store
• state being read-only (you have to express an intent to mutate being creating actions)
• mutations written as pure functions

make it very fun and easy to writepredictable code! There's a ton of reasons why, but you should head to theRedux docs to dive in!

Or if you are more of avisual learner watch the free egghead video series narrated by the creator of redux:

1. Getting Started
2. Building Idiomatically

A simplistic representation of data flow from server to client is:

Express app.use() receives a request-> Calls a pre-built webpack file for the server-> Runs matching of routes in react-router for server(with react-router-config)-> Makes async data fetching request-> Renders Route component to string-> Construct HTML file (with Meta, Link tags using helmet)-> Browser receives html file with initial state-> Client side React.JS kicks in and initializes with given state-> Continues where it left off-> Everyone is happy :)

More TBD

We currently support MongoDB, MySQL and Postgres, as well as the ability to not use any database.Learn about how to configure your app.

You have to install ReactGo CLI to set up development environment.

# Install ReactGo CLI first# Your terminal have to be located at reactGo project.npm i -g @reactgo/cli# After installation, move to the directory you wanna clone ReactGocd /somewhere/you/want/to/clone# Run CLI and choose which stack you wanna usereactgo

The next process is outlinedhere.

# Build the application for developmentnpm run build# Build the application for productionnpm run build:dev

# Run in development mode (with hot-reloading)npm run dev# Run in production modenpm start

Testing with:

• mocha as the test framework
  • We find all the files we need that have a-test.js suffix in the/app directory.
• jsdom as my test environment

# Run test oncenpmtest# Run in watch modenpm test:watch

We have unit tests for async (redux) actions, reducers, and stateless components withenzyme.

Currently we supportHeroku andDigital Ocean andAWS

We have alist of projects that have been created with this boilerplate. Checkthem out to see what can be done or to get some inspiration.

Best way to keep up to date is check theissues. I really welcome improvements forall aspects of an app.

1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
2. Coding guidelines:

• Airbnb's Style Guide
• bendc's frontend guidelines

3. If you wanna change codes and make some PR, you have to follow following steps.

# Install ReactGo CLI# Your terminal have to be located at reactGo project.npm i -g# Run CLI and choose which stack you wanna changereactgo -d# Then app and server folders will be symlinked from original ones that you chose.# Change whatever you want, but don't touch app and server folders. Those are just symlinks.# Commit and push after done.

Easter Eggs 🥚

This boilerplate has gone through an evolution

React.js -> Facebook Flux -> Alt -> Redux(thunk -> saga -> toolkit)                                 -> MobX(in mobx branch)

MIT