zhoule / material-ui-prepack Goto Github PK

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.