This project template is a skeleton for an isomorphic web application (SPA) based on Facebook's React library and Flux architecture. You can use it to quickly bootstrap your web application projects. It contains only client-side components and development tools and is recommended to be paired with a server-side project similar to ASP.NET Web Application Starter Kit.
Demo: http://reactjs.kriasoft.com
This project uses the original Flux architecture utilizing a unidirectional data flow.
- Flux for Stupid People by Andrew Ray
- What is Flux? by Brandon Tilley
- Rethinking Web App Development at Facebook by Pete Hunt
- The State of Flux by David Chang
.
├── /build/ # The folder for compiled output
├── /config/ # Configuration files for Webpack, Jest etc.
├── /docs/ # Documentation files for the project
├── /node_modules/ # 3rd-party libraries and utilities
├── /src/ # The source code of the application
│ ├── /actions/ # Action creators that allow to trigger a dispatch to stores
│ ├── /assets/ # Static files which are copied to ./build on compile
│ ├── /components/ # React components
│ │ ├── /common/ # - Shared components. E.g. Link, Mixins
│ │ ├── /forms/ # - Form components. E.g. TextBox, DatePicker
│ │ ├── /layout/ # - Layout components. E.g. Header, Navbar
│ │ └── /pages/ # - Web-page components. E.g. About, Profile
│ ├── /constants/ # Enumerations used in action creators and stores
│ ├── /core/ # Core components (Flux dispatcher, base classes, utilities)
│ ├── /stores/ # Stores contain the application state and logic
│ ├── /app.js # The application's main file (entry point)
├── /test/ # Unit, integration and load tests
│ ├── /e2e/ # End-to-end tests
│ ├── /benchmark/ # Load and stress testing
│ └── /unit/ # Unit tests
│── gulpfile.js # Configuration file for automated builds
└── package.json # The list of 3rd party libraries and utilities
Just clone or fork the repo and start hacking:
$ git clone -o upstream https://github.com/kriasoft/react-starter-kit.git MyApp
$ cd MyApp
$ npm install -g gulp # Install Gulp task runner globally
$ npm install # Install Node.js components listed in ./package.json$ gulp build # or, `gulp build --release`By default, it builds in debug mode. If you need to build in release mode, add
--release flag.
$ gulp # or, `gulp --release`This will start a lightweight development server with LiveReload and synchronized browsing across multiple devices and browsers.
$ gulp deploy # or, `gulp deploy --production`You can deploy to different destinations by adding a corresponding flag.
For example --production or --staging etc. See the 'deploy' task in
gulpfile.js.
You can always fetch and merge the recent changes from this repo back into your own project:
$ git checkout master
$ git fetch upstream
$ git merge upstream/master
$ npm installRun unit tests powered by Jest with the following npm command:
$ npm test- Getting Started with React.js
- React.js Wiki on GitHub
- React.js Questions on StackOverflow
- React.js Discussion Board
- Flux Architecture for Building User Interfaces
- Jest - Painless Unit Testing
- Flow - A static type checker for JavaScript
- The Future of React
Have feedback, feature request or need help? Contact me on codementor.io/koistya.
Source code is licensed under the MIT License (MIT). See LICENSE.txt file in the project root. Documentation to the project is licensed under the CC BY 4.0 license. React logo image is a trademark of Facebook, Inc.