This repo is a Structor prepack for a Material Design/Flexbox Grid/React/Redux/Webpack webapp. Structor is a GUI for starting React/Redux projects. It is flexible enough to generate some quick boilerplate, or the majority of the app.
Please go to Structor's main repo for a more detailed explanation.
We recommend starting at the main Structor repository. However, to jump right in, you must first install Structor globally ( npm install structor -g
).
The prefered method of using this boilerplate is:
mkdir project-name && cd project-name
structor
Then use the GUI at localhost:2222/structor to pick this template.
- Download the package from StructorMarket, unzip, and then run
npm install
in the project's directory. - Fork and clone this repo, and
npm install
.
No matter how you get this prepack, getting started is just one more step! Just run the command structor
from the root directory (or structor -d path/to/root/directory
from somewhere else), then navigate to http://localhost:2222/structor. If you need to use a different port, it can be set with the -p PORT_NUM
flag.
This project has three sample pages: /set1
, /set2
, and /progress
. You can make changes to them and export the project code with the "Export project" option from the main menu. You then have a ready-to-go React/Redux app, just:
- Run command:
npm run build
- Run command:
node ./server.js
- Go to
http://localhost:3000
- Fetch data from GitHub | Part 1
- Fetch data from GitHub | Part 2
- Speed designing of ToDo list
- How to create login menu to Facebook and GooglePlus
- Structor's component model representation
- Generators metadata overview
- Structor shortcuts
- Generator for React component
- Generator for smart Redux component (container)
- Migration guide
The following libraries and technlogies are used:
react
react-router
redux
,react-redux
material-ui
Flexbox Grid
express
webpack
react-router
is used as a routing mechanizm between pages in Structor.
Equal router is used in the final application after exporting.
If you don't know it, redux
is a great implementation of the Flux architechture and helps dramatically to build advanced Web apps. A good place to start with Redux is Dan Abramov's talk introducing it.
express
used as back-end HTTP server for the constructed Web application.