rsb.kriasoft.com
This project was bootstraped with React Static Boilerplate by Kriasoft (support).
Tech Stack
- Create React App for development and test infrastructure (see user guide)
- React + Relay Modern for UI and declarative data fetching
- Universal Router + history for declarative routing and client-side navigation
- CSS Modules + PostCSS for component friendly CSS styles (similar to BEM)
Directory Layout
├── node_modules/ # 3rd-party libraries and utilities
├── public/ # Static files such as favicon.ico etc.
│ ├── favicon.ico # Application icon to be displayed in bookmarks
│ ├── index.html # HTML template
│ ├── robots.txt # Instructions for search engine crawlers
│ ├── manifest.json # Application meta data
│ └── ... # etc.
├── src/ # Application source code
│ ├── About/ # About page
│ ├── App/ # Application shell (layout) component
│ ├── Button/ # Button component
│ ├── ErrorPage/ # Error page
│ ├── Home/ # Home page
│ ├── Link/ # Link component to be used instead of <a>
│ ├── history.js # Client-side navigation manager
│ ├── index.js # <== Application entry point (main) <===
│ ├── registerServiceWokrer.json # This list of application routes
│ ├── relay.js # Relay Modern client
│ ├── router.js # Application routes
│ ├── graphql.schema # GraphQL schema obtained from a GraphQL API
│ └── store.js # Application state manager (Redux)
├── test/ # Unit and integration tests
├── package.json # The list of project dependencies + NPM scripts
└── setup.js # Customizations for create-react-appPrerequisites
- Node.js v8.2.1 or higher + Yarn v0.27.5 or higher (HINT: On Mac install them via Brew)
- Watchman v4.7.0 or higher, required by the Relay Compiler
- VS Code editor (preferred) + Project Snippets, EditorConfig, ESLint, Flow, Prettier, and stylelint plug-ins
Getting Started
Just clone the repo and start hacking:
$ git clone https://github.com/kriasoft/rsb.kriasoft.com.git
$ cd rsb.kriasoft.com
$ yarn install # Install project dependencies listed in package.json
$ yarn relay # Pre-compile GraphQL queries with Relay Compiler
$ yarn start # Compiles the app and opens it in a browser with "live reload"The app should become available at http://localhost:3000/.
How to Test
$ yarn lint # Check JavaScript and CSS code for potential issues
$ yarn lint-fix # Fix potential issues in JavaScript and CSS code
$ yarn test # Run unit tests. Or, `yarn test -- --watch`How to Update
If you keep the original Git history after cloning this repo, you can always fetch and merge the recent updates back into your project by running:
git remote add react-static-boilerplate https://github.com/kriasoft/react-static-boilerplate.git
git checkout master
git fetch react-static-boilerplate
git merge react-static-boilerplate/master
yarn install
yarn relayNOTE: Try to merge as soon as the new changes land on the master branch in React Static Boilerplate repository, otherwise your project may diverse too much from the base/upstream repo.
How to Contribute
Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issues or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.
Learn React.js and ES6
🎓 React for Beginners and ES6 Training Course by Wes Bos
📗 React: Up & Running: Building Web Applications by Stoyan Stefanov (Aug, 2016)
📗 Getting Started with React by Doel Sengupta and Manu Singhal (Apr, 2016)
📗 You Don't Know JS: ES6 & Beyond by Kyle Simpson (Dec, 2015)
Related Projects
- React Starter Kit — Boilerplate and tooling for building isomorphic web apps with React and Relay
- Node.js API Starter Kit — Boilerplate and tooling for building data APIs with Docker, Node.js and GraphQL
License
Copyright © 2015-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE.txt file.
Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent