3 |
2 |
3 |
6 | 
7 | 
8 | 
9 | 
10 |
15 | Tool for generating React components by replicating your own.
16 | It's intended to work no matter how your file structure is.
17 |
22 | 
23 |
24 |
27 | Are you looking for a VS Code extension? Try vscode-generact. 28 |
29 | 30 |
43 | 
44 | 
45 |
src\/MyComponent.js<\/code>/)
49 | expect(contents).toMatch(/export default MyComponent/)
50 | })
51 | })
52 |
53 | describe('src/components/Button', () => {
54 | beforeAll(() => exec(root('create-react-app'), { component: moveDown(), name: 'AnotherButton' }))
55 |
56 | it('created component files properly', () => {
57 | expect(pathExistsSync(tmp('AnotherButton/AnotherButton.js'))).toBe(true)
58 | expect(pathExistsSync(tmp('AnotherButton/AnotherButton.test.js'))).toBe(true)
59 | expect(pathExistsSync(tmp('AnotherButton/AnotherButton.css'))).toBe(true)
60 | })
61 | })
62 | })
63 |
64 | describe('react-static-boilerplate', () => {
65 | describe('components/Button', () => {
66 | beforeAll(() => exec(root('react-static-boilerplate'), { component: '', name: 'MyComponent' }))
67 |
68 | it('created component file properly', () => {
69 | expect(pathExistsSync(tmp('MyComponent/MyComponent.js'))).toBe(true)
70 | expect(pathExistsSync(tmp('MyComponent/package.json'))).toBe(true)
71 | })
72 |
73 | it('modified package contents properly', () => {
74 | const contents = readFileSync(tmp('MyComponent/package.json')).toString()
75 | const json = JSON.parse(contents)
76 | expect(json.name).toBe('MyComponent')
77 | expect(json.main).toBe('./MyComponent.js')
78 | })
79 | })
80 | })
81 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "create-react-app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^15.5.4",
7 | "react-dom": "^15.5.4"
8 | },
9 | "devDependencies": {
10 | "react-scripts": "1.0.7"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "react-scripts build",
15 | "test": "react-scripts test --env=jsdom",
16 | "eject": "react-scripts eject"
17 | }
18 | }
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/diegohaz/generact/0ad333c9a6f328f024e00bf53c1197ac5586f260/test/fixtures/create-react-app/public/favicon.ico
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 |
9 |
10 | 
11 | Welcome to React
12 |
13 |
14 | To get started, edit src/App.js and save to reload.
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/test/fixtures/create-react-app/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(` - a link to the reduced test case
66 | >
67 | > Any other information you want to share that is relevant to the issue being reported. This might
68 | > include the lines of code that you have identified as causing the bug, and potential solutions
69 | > (and your opinions on their merits).
70 |
71 |
72 |
73 | ## Feature requests
74 |
75 | Feature requests are welcome. But take a moment to find out whether your idea fits with the scope
76 | and aims of the project. It's up to *you* to make a strong case to convince the project's developers
77 | of the merits of this feature. Please provide as much detail and context as possible.
78 |
79 |
80 |
81 | ## Pull requests
82 |
83 | Good pull requests - patches, improvements, new features - are a fantastic help. They should remain
84 | focused in scope and avoid containing unrelated commits.
85 |
86 | **Please ask first** before embarking on any significant pull request (e.g. implementing features,
87 | refactoring code, porting to a different language), otherwise you risk spending a lot of time
88 | working on something that the project's developers might not want to merge into the project.
89 |
90 | Please adhere to the coding conventions used throughout a project (indentation, accurate comments,
91 | etc.) and any other requirements (such as test coverage).
92 |
93 | Adhering to the following process is the best way to get your work included in the project:
94 |
95 | 1. [Fork](https://help.github.com/articles/fork-a-repo/) the project, clone your fork, and configure
96 | the remotes:
97 |
98 | ```bash
99 | # Clone your fork of the repo into the current directory
100 | git clone https://github.com//react-static-boilerplate.git
101 | # Navigate to the newly cloned directory
102 | cd react-static-boilerplate
103 | # Assign the original repo to a remote called "upstream"
104 | git remote add upstream https://github.com/kriasoft/react-static-boilerplate.git
105 | ```
106 |
107 | 2. If you cloned a while ago, get the latest changes from upstream:
108 |
109 | ```bash
110 | git checkout master
111 | git pull upstream master
112 | ```
113 |
114 | 3. Create a new topic branch (off the main project development branch) to contain your feature,
115 | change, or fix:
116 |
117 | ```bash
118 | git checkout -b
119 | ```
120 |
121 | 4. Commit your changes in logical chunks. Please adhere to these [git commit message
122 | guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) or your code is
123 | unlikely be merged into the main project. Use Git's [interactive
124 | rebase](https://help.github.com/articles/about-git-rebase/) feature to tidy up your commits
125 | before making them public.
126 |
127 | 5. Locally merge (or rebase) the upstream development branch into your topic branch:
128 |
129 | ```bash
130 | git pull [--rebase] upstream master
131 | ```
132 |
133 | 6. Push your topic branch up to your fork:
134 |
135 | ```bash
136 | git push origin
137 | ```
138 |
139 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title
140 | and description.
141 |
142 | **IMPORTANT**: By submitting a patch, you agree to allow the project owners to license your work
143 | under the terms of the [MIT License](LICENSE.txt).
144 |
--------------------------------------------------------------------------------
/test/fixtures/react-static-boilerplate/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License
2 |
3 | Copyright (c) 2015-present Kriasoft, LLC. All rights reserved.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/test/fixtures/react-static-boilerplate/README.md:
--------------------------------------------------------------------------------
1 | # React Static Boilerplate 
2 |
3 | [**React Static Boilerplate**](https://github.com/kriasoft/react-static-boilerplate) (RSB) is a
4 | boilerplate and tooling for creating modern stand-alone web applications (aka
5 | [SPA](https://en.wikipedia.org/wiki/Single-page_application)s) for a serverless architecture. RSB
6 | significantly reduces cost by eliminating the need for servers such as EC2 instances because the
7 | entire site can be hosted directly from CDN ([Firebase](https://www.firebase.com/), [GitHub
8 | Pages](https://pages.github.com/), [Amazon S3](http://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html),
9 | or other similar cloud storage). Sites built with RSB can be fully functional with REST API or
10 | GraphQL calls to micro-services such as [Amazon Lambda](https://aws.amazon.com/lambda/),
11 | [Azure Functions](https://azure.microsoft.com/services/functions/), or dynamic Docker endpoints
12 | hosted on [DigitalOcean](https://www.digitalocean.com/?refcode=eef302dbae9f&utm_source=github&utm_medium=oss_sponsorships&utm_campaign=opencollective).
13 | RSB demonstrates how to use component-based UI development approach with best of breed
14 | technologies including [React](http://facebook.github.io/react/), [Redux](http://redux.js.org/),
15 | [Babel](http://babeljs.io/), [Webpack](https://webpack.github.io/), [Browsersync](https://browsersync.io/),
16 | [React Hot Loader](http://gaearon.github.io/react-hot-loader/) and more. **This work is being
17 | [sponsored](https://opencollective.com/react-static-boilerplate#support) by**:
18 |
19 |
20 |
21 | 
22 |
23 |
24 | 
25 |
26 |
27 | 
28 |
29 |
30 |
31 |
32 | ### Features
33 |
34 | ✓ Modern JavaScript syntax ([ES2015](http://babeljs.io/docs/learn-es2015/)+) via [Babel](http://babeljs.io/), modern CSS syntax via [PostCSS](https://github.com/postcss/postcss)
35 | ✓ Component-based UI architecture via [React](http://facebook.github.io/react/), [Webpack](https://webpack.github.io/) and [CSS Modules](https://github.com/css-modules/css-modules)
36 | ✓ Application state management /w time-travel debugging via [Redux](http://redux.js.org/) (see [`main.js`](src/main.js), [`store.js`](src/store.js))
37 | ✓ Routing and navigation via [`path-to-regexp`](https://github.com/pillarjs/path-to-regexp) and [`history`](https://github.com/mjackson/history) ([`main.js`](src/main.js), [`router.js`](src/router.js), [`tools/routes-loader.js`](tools/routes-loader.js))
38 | ✓ [Code-splitting](https://github.com/webpack/docs/wiki/code-splitting) and async chunk loading via [Webpack](https://webpack.github.io/) v2
39 | ✓ Hot Module Replacement ([HMR](https://webpack.github.io/docs/hot-module-replacement.html)) /w [React Hot Loader](http://gaearon.github.io/react-hot-loader/), cross-device testing with [Browsersync](https://browsersync.io/) (see [`run.js`](tools/run.js))
40 | ✓ **24/7** community support on [Gitter](https://gitter.im/kriasoft/react-static-boilerplate) + *premium support* on [Skype](https://hatscripts.com/addskype?koistya) ([book a session](https://calendly.com/koistya))
41 |
42 | **View** [docs](./docs), [online demo](https://rsb.kriasoft.com) | **Follow us** on
43 | [Gitter](https://gitter.im/kriasoft/react-static-boilerplate), [Twitter](https://twitter.com/ReactStatic)
44 | or [ProductHunt](https://www.producthunt.com/tech/react-static-boilerplate) |
45 | **Learn** [React.js and ES6](#learn-reactjs-and-es6)
46 |
47 |
48 | ### Directory Layout
49 |
50 | ```shell
51 | ├── components/ # Shared or generic UI components
52 | │ ├── Button/ # Button component
53 | │ ├── Layout/ # Website layout component
54 | │ ├── Link/ # Link component to be used instead of
55 | │ └── ... # etc.
56 | ├── docs/ # Documentation to the project
57 | ├── node_modules/ # 3rd-party libraries and utilities
58 | ├── src/ # Application source code
59 | │ ├── about/ # About page
60 | │ ├── error/ # Error page
61 | │ ├── home/ # Home page
62 | │ ├── history.js # Handles client-side navigation
63 | │ ├── main.js # <== Application entry point <===
64 | │ ├── router.js # Handles routing and data fetching
65 | │ ├── routes.json # This list of application routes
66 | │ └── store.js # Application state manager (Redux)
67 | ├── public/ # Static files such as favicon.ico etc.
68 | │ ├── dist/ # The folder for compiled output
69 | │ ├── favicon.ico # Application icon to be displayed in bookmarks
70 | │ ├── robots.txt # Instructions for search engine crawlers
71 | │ └── ... # etc.
72 | ├── test/ # Unit and integration tests
73 | ├── tools/ # Utility and helper classes
74 | └── package.json # The list of project dependencies and NPM scripts
75 | ```
76 |
77 |
78 | ### Getting Started
79 |
80 | **Step 1**. Make sure that you have [Node.js](https://nodejs.org/) v6 or newer and
81 | [Yarn](https://yarnpkg.com/) installed on your development machine.
82 |
83 | **Step 2**. Clone this repository (alternatively, use [Yeoman
84 | generator](https://github.com/kriasoft/react-static-boilerplate/tree/generator-react-static) to
85 | bootstrap your project):
86 |
87 | ```shell
88 | $ git clone -o react-static-boilerplate -b master --single-branch \
89 | https://github.com/kriasoft/react-static-boilerplate.git MyApp
90 | $ cd MyApp
91 | $ yarn install # Install project dependencies listed in package.json
92 | ```
93 |
94 |
95 | **Step 3**. Compile and launch your app by running:
96 |
97 | ```shell
98 | $ yarn start # Compiles the app and opens it in a browser with "live reload"
99 | ```
100 |
101 | You can also test your app in release (production) mode by running `yarn start -- --release` or
102 | with HMR and React Hot Loader disabled by running `yarn start -- --no-hmr`. The app should become
103 | available at [http://localhost:3000/](http://localhost:3000/).
104 |
105 |
106 | ### How to Test
107 |
108 | The unit tests are powered by [chai](http://chaijs.com/) and [mocha](http://mochajs.org/).
109 |
110 | ```shell
111 | $ yarn lint # Check JavaScript and CSS code for potential issues
112 | $ yarn test # Run unit tests. Or, `yarn run test:watch`
113 | ```
114 |
115 |
116 | ### How to Deploy
117 |
118 | Update `publish` script in the [`tools/publish.js`](tools/publish.js) file with your full Firebase
119 | project name as found in your [Firebase console](https://console.firebase.google.com/). Note that
120 | this may have an additional identifier suffix than the shorter name you've provided. Then run:
121 |
122 | ```shell
123 | $ yarn run publish # Builds and deployes the app to Firebase
124 | ```
125 |
126 | The first time you publish, you will be prompted to authenticate with Google and generate an
127 | authentication token in order for the publish script to continue.
128 |
129 | 
130 |
131 | If you need to build the project without publishing it, simply run:
132 |
133 | ```shell
134 | $ yarn build # Compiles the app into the /public/dist folder
135 | ```
136 |
137 |
138 | ### How to Update
139 |
140 | You can always fetch and merge the recent changes from this repo back into your own project:
141 |
142 | ```shell
143 | $ git checkout master
144 | $ git fetch react-static-boilerplate
145 | $ git merge react-static-boilerplate/master
146 | $ yarn install
147 | ```
148 |
149 |
150 | ### Learn React.js and ES6
151 |
152 | :mortar_board: **[React.js Training Program](http://www.reactjsprogram.com/?asdf=36750_q0pu0tfa)** by Tyler McGinnis
153 | :mortar_board: **[React for Beginners](https://reactforbeginners.com/friend/konstantin)** and **[ES6 Training Course](https://es6.io/friend/konstantin)** by Wes Bos
154 | :green_book: **[React: Up & Running: Building Web Applications](http://amzn.to/2bBgqhl)** by Stoyan Stefanov (Aug, 2016)
155 | :green_book: **[Getting Started with React](http://amzn.to/2bmwP5V)** by Doel Sengupta and Manu Singhal (Apr, 2016)
156 | :green_book: **[You Don't Know JS: ES6 & Beyond](http://amzn.to/2bBfVnp)** by Kyle Simpson (Dec, 2015)
157 |
158 |
159 | ### Related Projects
160 |
161 | * [React Starter Kit](https://github.com/kriasoft/react-starter-kit) — Isomorphic web app boilerplate (Node.js, React, GraphQL, Webpack, CSS Modules)
162 | * [Node.js API Starter Kit](https://github.com/kriasoft/nodejs-api-starter) — Boilerplate and tooling for building data APIs with Node.js, GraphQL and Relay
163 | * [ASP.NET Core Starter Kit](https://github.com/kriasoft/aspnet-starter-kit) — Cross-platform single-page application boilerplate (ASP.NET Core, React, Redux)
164 | * [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — JavaScript library boilerplate (ES2015, Babel, Rollup, Mocha, Chai, Sinon, Rewire)
165 | * [React App SDK](https://github.com/kriasoft/react-app) — Create React apps with just a single dev dependency and zero configuration
166 | * [Universal Router](https://github.com/kriasoft/universal-router) — Isomorphic router for web and single-page applications (SPA)
167 | * [History](https://github.com/mjackson/history) — HTML5 History API wrapper library that handle navigation in single-page apps
168 |
169 |
170 | ### How to Contribute
171 |
172 | Anyone and everyone is welcome to [contribute](CONTRIBUTING.md) to this project. The best way to
173 | start is by checking our [open issues](https://github.com/kriasoft/react-static-boilerplate/issues),
174 | [submit a new issues](https://github.com/kriasoft/react-static-boilerplate/issues/new?labels=bug) or
175 | [feature request](https://github.com/kriasoft/react-static-boilerplate/issues/new?labels=enhancement),
176 | participate in discussions, upvote or downvote the issues you like or dislike, send [pull
177 | requests](CONTRIBUTING.md#pull-requests).
178 |
179 |
180 | ### License
181 |
182 | Copyright © 2015-present Kriasoft, LLC. This source code is licensed under the MIT license found in
183 | the [LICENSE.txt](https://github.com/kriasoft/react-static-boilerplate/blob/master/LICENSE.txt) file.
184 |
185 | ---
186 | Made with ♥ by Konstantin Tarkus ([@koistya](https://twitter.com/koistya)) and [contributors](https://github.com/kriasoft/react-static-boilerplate/graphs/contributors)
187 |
--------------------------------------------------------------------------------
/test/fixtures/react-static-boilerplate/components/Button/Button.js:
--------------------------------------------------------------------------------
1 | /**
2 | * React Static Boilerplate
3 | * https://github.com/kriasoft/react-static-boilerplate
4 | *
5 | * Copyright © 2015-present Kriasoft, LLC. All rights reserved.
6 | *
7 | * This source code is licensed under the MIT license found in the
8 | * LICENSE.txt file in the root directory of this source tree.
9 | */
10 |
11 | import React, { PropTypes } from 'react';
12 | import cx from 'classnames';
13 | import Link from '../Link';
14 |
15 | class Button extends React.Component {
16 |
17 | static propTypes = {
18 | component: PropTypes.oneOf([
19 | PropTypes.string,
20 | PropTypes.element,
21 | PropTypes.func,
22 | ]),
23 | type: PropTypes.oneOf(['raised', 'fab', 'mini-fab', 'icon']),
24 | to: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
25 | href: PropTypes.string,
26 | className: PropTypes.string,
27 | colored: PropTypes.bool,
28 | primary: PropTypes.bool,
29 | accent: PropTypes.bool,
30 | ripple: PropTypes.bool,
31 | children: PropTypes.node,
32 | };
33 |
34 | componentDidMount() {
35 | window.componentHandler.upgradeElement(this.root);
36 | }
37 |
38 | componentWillUnmount() {
39 | window.componentHandler.downgradeElements(this.root);
40 | }
41 |
42 | render() {
43 | const { component, type, className, colored, to, href,
44 | primary, accent, ripple, children, ...other } = this.props;
45 | return React.createElement(
46 | component || (to ? Link : (href ? 'a' : 'button')), // eslint-disable-line no-nested-ternary
47 | {
48 | ref: node => (this.root = node),
49 | className: cx(
50 | 'mdl-button mdl-js-button',
51 | type && `mdl-button--${type}`,
52 | {
53 | 'mdl-button--colored': colored,
54 | 'mdl-button--primary': primary,
55 | 'mdl-button--accent': accent,
56 | 'mdl-js-ripple-effect': ripple,
57 | },
58 | className,
59 | ),
60 | to,
61 | href,
62 | ...other,
63 | },
64 | children,
65 | );
66 | }
67 |
68 | }
69 |
70 | export default Button;
71 |
--------------------------------------------------------------------------------
/test/fixtures/react-static-boilerplate/components/Button/README.md:
--------------------------------------------------------------------------------
1 | ## Button Component
2 |
3 | An enhanced version of the standard HTML `