diff --git a/frontend/README.createreactapp.md b/frontend/README.createreactapp.md index 479d632..6d81fb2 100644 --- a/frontend/README.createreactapp.md +++ b/frontend/README.createreactapp.md @@ -138,7 +138,7 @@ my-app/ favicon.ico src/ App.css - App.js + index.js App.test.js index.css index.js @@ -442,7 +442,7 @@ const moduleA = 'Hello'; export { moduleA }; ``` -### `App.js` +### `index.js` ```js import React, { Component } from 'react'; @@ -576,7 +576,7 @@ Then in `package.json`, add the following lines to `scripts`: >Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation. -Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. +Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/index.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated. To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions. @@ -783,13 +783,13 @@ import 'bootstrap/dist/css/bootstrap-theme.css'; // components takes precedence over default styles. ``` -Import required React Bootstrap components within ```src/App.js``` file or your custom component files: +Import required React Bootstrap components within ```src/index.js``` file or your custom component files: ```js import { Navbar, Jumbotron, Button } from 'react-bootstrap'; ``` -Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`App.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap. +Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method. Here is an example [`index.js`](https://gist.githubusercontent.com/gaearon/85d8c067f6af1e56277c82d19fd4da7b/raw/6158dd991b67284e9fc8d70b9d973efe87659d72/App.js) redone using React Bootstrap. ### Using a Custom Theme @@ -813,7 +813,7 @@ To add Flow to a Create React App project, follow these steps: 1. Run `npm install --save flow-bin` (or `yarn add flow-bin`). 2. Add `"flow": "flow"` to the `scripts` section of your `package.json`. 3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory. -4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`). +4. Add `// @flow` to any files you want to type check (for example, to `src/index.js`). Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. You can optionally use an IDE like [Nuclide](https://nuclide.io/docs/languages/flow/) for a better integrated experience. @@ -837,7 +837,7 @@ Alternatively you may use `yarn`: yarn add react-router-dom ``` -To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. +To try it, delete all the code in `src/index.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started. Note that [you may need to configure your production server to support client-side routing](#serving-apps-with-client-side-routing) before deploying your app. @@ -1287,7 +1287,7 @@ Jest will look for test files with any of the following popular naming conventio The `.test.js` / `.spec.js` files (or the `__tests__` folders) can be located at any depth under the `src` top level folder. -We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `App.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. +We recommend to put the test files (or `__tests__` folders) next to the code they are testing so that relative imports appear shorter. For example, if `App.test.js` and `index.js` are in the same folder, the test just needs to `import App from './App'` instead of a long relative path. Colocation also helps find tests more quickly in larger projects. ### Command Line Interface diff --git a/frontend/src/App.test.js b/frontend/src/components/App/App.test.js similarity index 89% rename from frontend/src/App.test.js rename to frontend/src/components/App/App.test.js index a754b20..68c9e34 100644 --- a/frontend/src/App.test.js +++ b/frontend/src/components/App/App.test.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App'; +import App from './index'; it('renders without crashing', () => { const div = document.createElement('div'); diff --git a/frontend/src/components/Dummy/__snapshots__/dummy.test.js.snap b/frontend/src/components/App/Dummy/__snapshots__/dummy.test.js.snap similarity index 100% rename from frontend/src/components/Dummy/__snapshots__/dummy.test.js.snap rename to frontend/src/components/App/Dummy/__snapshots__/dummy.test.js.snap diff --git a/frontend/src/components/Dummy/dummy.test.js b/frontend/src/components/App/Dummy/dummy.test.js similarity index 89% rename from frontend/src/components/Dummy/dummy.test.js rename to frontend/src/components/App/Dummy/dummy.test.js index 8b8f856..6c762e2 100644 --- a/frontend/src/components/Dummy/dummy.test.js +++ b/frontend/src/components/App/Dummy/dummy.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import Dummy from '../Dummy'; +import Dummy from './index'; import renderer from 'react-test-renderer'; test('Dummy renders correctly', () => { diff --git a/frontend/src/components/Dummy/index.js b/frontend/src/components/App/Dummy/index.js similarity index 100% rename from frontend/src/components/Dummy/index.js rename to frontend/src/components/App/Dummy/index.js diff --git a/frontend/src/components/Dummy/styles.scss b/frontend/src/components/App/Dummy/styles.scss similarity index 100% rename from frontend/src/components/Dummy/styles.scss rename to frontend/src/components/App/Dummy/styles.scss diff --git a/frontend/src/App.js b/frontend/src/components/App/index.js similarity index 83% rename from frontend/src/App.js rename to frontend/src/components/App/index.js index 36080b5..3de31f9 100644 --- a/frontend/src/App.js +++ b/frontend/src/components/App/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; -import styles from './App.css'; -import Dummy from './components/Dummy'; +import logo from '../../logo.svg'; +import styles from './styles.scss'; +import Dummy from './Dummy'; class App extends Component { render() { diff --git a/frontend/src/App.css b/frontend/src/components/App/styles.scss similarity index 100% rename from frontend/src/App.css rename to frontend/src/components/App/styles.scss diff --git a/frontend/src/index.js b/frontend/src/index.js index fae3e35..4da5f31 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import App from './components/App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(, document.getElementById('root')); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 37cc8b6..85760ff 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -372,8 +372,8 @@ aws-sign2@~0.7.0: resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8" aws4@^1.2.1, aws4@^1.6.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" + version "1.7.0" + resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289" axobject-query@^0.1.0: version "0.1.0" @@ -1167,16 +1167,14 @@ braces@^1.8.2: repeat-element "^1.1.2" braces@^2.3.0, braces@^2.3.1: - version "2.3.1" - resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.1.tgz#7086c913b4e5a08dbe37ac0ee6a2500c4ba691bb" + version "2.3.2" + resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729" dependencies: arr-flatten "^1.1.0" array-unique "^0.3.2" - define-property "^1.0.0" extend-shallow "^2.0.1" fill-range "^4.0.0" isobject "^3.0.1" - kind-of "^6.0.2" repeat-element "^1.1.2" snapdragon "^0.8.1" snapdragon-node "^2.0.1" @@ -1369,12 +1367,12 @@ caniuse-api@^1.5.2: lodash.uniq "^4.5.0" caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000824" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000824.tgz#bba3ff425296e04caa37fe426259206a7056551b" + version "1.0.30000827" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000827.tgz#bd2839dd196093b44c28c17f93513140c9d92588" caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792: - version "1.0.30000824" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000824.tgz#de3bc1ba0bff4937302f8cb2a8632a8cc1c07f9a" + version "1.0.30000827" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000827.tgz#2dad2354e4810c3c9bb1cfc57f655c270c25fa52" capture-stack-trace@^1.0.0: version "1.0.0" @@ -1728,8 +1726,8 @@ core-js@^1.0.0: resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" core-js@^2.4.0, core-js@^2.5.0: - version "2.5.4" - resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.4.tgz#f2c8bf181f2a80b92f360121429ce63a2f0aeae0" + version "2.5.5" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.5.tgz#b14dde936c640c0579a6b50cabcc132dd6127e3b" core-util-is@1.0.2, core-util-is@~1.0.0: version "1.0.2" @@ -3456,8 +3454,8 @@ html-entities@^1.2.0: resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f" html-minifier@^3.2.3: - version "3.5.13" - resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.13.tgz#6bca6d533a7f18a476dc6aeb3d113071ab5c165e" + version "3.5.14" + resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.14.tgz#88653b24b344274e3e3d7052f1541ebea054ac60" dependencies: camel-case "3.0.x" clean-css "4.1.x" @@ -6538,8 +6536,8 @@ safe-regex@^1.1.0: ret "~0.1.10" safer-buffer@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.0.tgz#d9f653a55538c8d7829cb1a92e90bbcbc5ff5d3b" + version "2.1.2" + resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" sane@^2.0.0: version "2.5.0" @@ -7309,8 +7307,8 @@ ua-parser-js@^0.7.9: resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" uglify-js@3.3.x, uglify-js@^3.0.13: - version "3.3.18" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.18.tgz#e16df66d71638df3c9bc61cce827e46f24bdac02" + version "3.3.20" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.20.tgz#dc8bdee7d454c7d31dddc36f922d170bfcee3a0a" dependencies: commander "~2.15.0" source-map "~0.6.1"