Succint React Starter
15 |16 | This is a sample of the Reach Router in use. Below is a sample of the 17 | handlers in this component. 18 |
19 | 20 | 23 | 26 |├── .babelrc ├── .eslintrc.json ├── .gitignore ├── .prettierrc ├── README.md ├── docs ├── index.html ├── src.2688a3bb.js ├── src.2688a3bb.map ├── src.53903f68.js ├── src.53903f68.map └── src.efa4e38b.css ├── package.json └── src ├── common_styles ├── colors.scss └── global.scss ├── components ├── App │ ├── App.js │ └── index.js ├── Demo │ ├── Demo.js │ ├── Demo.scss │ ├── __tests__ │ │ ├── Demo.test.js │ │ └── __snapshots__ │ │ │ └── Sample.test.js.snap │ └── index.js ├── Footer │ ├── Footer.js │ ├── Footer.scss │ ├── __tests__ │ │ ├── Footer.test.js │ │ └── __snapshots__ │ │ │ └── Footer.test.js.snap │ └── index.js ├── NavBar │ ├── NavBar.js │ ├── NavBar.scss │ ├── __tests__ │ │ ├── NavBar.test.js │ │ └── __snapshots__ │ │ │ └── NavBar.test.js.snap │ └── index.js └── Sample │ ├── Sample.js │ ├── Sample.scss │ ├── __tests__ │ ├── Sample.test.js │ └── __snapshots__ │ │ └── Sample.test.js.snap │ └── index.js ├── index.html └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | [ 5 | "env", 6 | { 7 | "targets": { 8 | "browsers": ["last 2 versions"] 9 | } 10 | } 11 | ] 12 | ], 13 | "plugins": ["transform-class-properties"] 14 | } 15 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "eslint:recommended", 4 | "plugin:import/errors", 5 | "plugin:react/recommended", 6 | "plugin:jsx-a11y/recommended", 7 | "prettier", 8 | "prettier/react" 9 | ], 10 | "rules": { 11 | "react/prop-types": 0, 12 | "jsx-a11y/label-has-for": 0, 13 | "jsx-a11y/accessible-emoji": 0, 14 | "no-console": 1 15 | }, 16 | "plugins": ["react", "import", "jsx-a11y"], 17 | "parser": "babel-eslint", 18 | "parserOptions": { 19 | "ecmaVersion": 2018, 20 | "sourceType": "module", 21 | "ecmaFeatures": { 22 | "jsx": true 23 | } 24 | }, 25 | "settings": { 26 | "react": { 27 | "version": "16.5.2" 28 | } 29 | }, 30 | "env": { 31 | "es6": true, 32 | "browser": true, 33 | "node": true, 34 | "jest": true 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | node_modules 3 | dist/ 4 | remote-repo/ 5 | coverage/ 6 | *.log* 7 | chrome-user-data 8 | *.sublime-project 9 | *.sublime-workspace 10 | .idea 11 | *.iml 12 | .vscode 13 | *.swp 14 | *.swo 15 | .cache 16 | .env 17 | package-lock.json 18 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Succint React Starter 2 | 3 | Thanks to [Brian Holt](https://github.com/btholt) for the inspiration! 4 | 5 | ## Why did I build this? 6 | Create React App is a great starting point, but I wanted something a bit more custom. Parcel instead of Webpack, for example. I also wanted to see if I could build something I would use myself and make getting little experiments up and running quickly easier. 7 | 8 | ## What's included? 9 | I've kept things as simple, streamlined, and modular as I could. Hopefully this allows me and anyone else using this setup to swap things out easily. 10 | 11 | ### CSS/Sass 12 | 13 | I've used the very basic [Marx classless framework/reset](https://mblode.github.io/marx/) to provide a starting point for basic prototyping with a tolerable UI while maintaining symantic and accessibility standards. Removing it is as simple as deleting the cdn link from `index.html`. 14 | 15 | I've also provided a few basic overrides for the nav bar and button styling, which also serve as examples of how the styling files can be structured within the project. 16 | 17 | On a more formal project, I would probably use [Bulma](https://bulma.io/) via [Trunx](https://github.com/fibo/trunx). 18 | 19 | ### Sample files 20 | 21 | I've included a navbar, a sample page, and a footer, which also act as the demo app and landing page for the project. The purpose was two-fold. First, to have the documentation presented nicely and second to provide a working reference of my preferred React setup. 22 | 23 | ### The package.json 24 | 25 | It's fairly self-explanatory, but here's what's included, with links to each package so you can read the documentation. 26 | 27 | #### devDependencies 28 | - [babel-core](https://www.npmjs.com/package/babel-core) 29 | - [babel-eslint](https://www.npmjs.com/package/babel-eslint) 30 | - [babel-plugin-transform-class-properties](https://www.npmjs.com/package/babel-plugin-transform-class-properties) 31 | - [babel-preset-env](https://www.npmjs.com/package/babel-preset-env) 32 | - [babel-preset-react](https://www.npmjs.com/package/babel-preset-react) 33 | - [eslint](https://www.npmjs.com/package/eslint) 34 | - [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier) 35 | - [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import) 36 | - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y) 37 | - [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier) 38 | - [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) 39 | - [jest](https://www.npmjs.com/package/jest) 40 | - [parcel-bundler](https://www.npmjs.com/package/parcel-bundler) 41 | - [prettier](https://www.npmjs.com/package/prettier) 42 | - [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) 43 | - [sass](https://www.npmjs.com/package/sass) 44 | 45 | #### dependencies 46 | - [@reach/router](https://www.npmjs.com/package/@reach/router) 47 | - [emotion](https://www.npmjs.com/package/emotion) 48 | - [identity-obj-proxy](https://www.npmjs.com/package/identity-obj-proxy) 49 | - [react](https://www.npmjs.com/package/react) 50 | - [react-dom](https://www.npmjs.com/package/react-dom) 51 | - [react-emotion](https://www.npmjs.com/package/react-emotion) 52 | - [react-loadable](https://www.npmjs.com/package/react-loadable) 53 | 54 | 55 | ### The config files 56 | 57 | I've set up a basic `.babelrc`, `.eslintrc.json`, and `.prettierrc` so that you can start using this right away. They contain what I consider to be a good balance between customization and letting the defaults handle things. 58 | 59 | ## Getting set up 60 | 61 | ### VS Code 62 | 63 | This is my preferred editor. I recommend using the following extensions: 64 | - [npm Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) 65 | - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 66 | - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 67 | - [vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=mf.vscode-styled-components) (if you'll be using Emotion) 68 | 69 | I can also recommend a couple extensions I find helpful in general front end development: 70 | - [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) 71 | - [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) 72 | - [Intellisense for CSS class names](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion) 73 | 74 | ### Dev Tools 75 | 76 | I recommend you also install the [React](https://github.com/facebook/react-devtools) and [Redux](https://github.com/zalmoxisus/redux-devtools-extension) (if you're using it) developer tools in your browser. It will make debugging easier. 77 | 78 | ### Up and running 79 | 80 | You'll need to get into your project folder and install the packages first. 81 | 82 | ``` 83 | cd /path/to/your/project/folder 84 | npm install 85 | ``` 86 | 87 | If you open up your project in your text editor, in the package.json file you'll find some scripts you can run in your terminal that can be run as follows: 88 | 89 | - `npm run format` - runs Prettier 90 | - `npm run test` - runs your Jest tests 91 | - `npm run testu` - runs the snapshot updates on Jest tests 92 | - `npm run testw` - runs Jest with the watch argument, making repeatedly running tests more useful 93 | - `npm run testc` - runs Jest with a coverage report, which is generated in a coverage folder in the root 94 | - `npm run lint` - runs ESLint on all `.js` and `.jsx` files in the `src` directory 95 | - `npm run dev` - runs Parcel and tells it which file to user to start the app. In this case, `index.html`. 96 | - `npm run build` - runs Parcel to compile a production build based of the `index.html` file. 97 | - `npm run buildgh` - runs Parcel to complile to the `/docs` folder for deployment on Github Pages. 98 | 99 | Once you've got it installed, to start the project server, run `npm run dev` and it will be running at `http://localhost:1234`. 100 | 101 | ## ToDo list 102 | - Finish the demo page. 103 | - Currently the local server only runs on http. Getting something going with https is ideal. 104 | - Configure a localstorage example. 105 | - Set up a code-splitting example. 106 | - Set up an emotion example. -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 |
r||0!==i&&i>r||0!==o&&o>r)return ul(e,r),void Ui(e,t,r,e.expirationTime,-1);if(!e.didError&&!n)return e.didError=!0,r=e.nextExpirationTimeToWorkOn=r,n=e.expirationTime=1,void Ui(e,t,r,n,-1)}n||-1===Ya?(e.pendingCommitExpirationTime=r,e.finishedWork=t):(ul(e,r),(n=10*(cl(e,r)-2))
16 | This is a sample of the Reach Router in use. Below is a sample of the
17 | handlers in this component.
18 |
17 |
21 |
22 |
23 |
25 | Thanks to Brian Holt for the
26 | inspiration!
27 |
30 | Create React App is a great starting point, but I wanted something a
31 | bit more custom. Parcel instead of Webpack, for example. I also wanted
32 | to see if I could build something I would use myself and make getting
33 | little experiments up and running quickly easier.
34 |
38 | I've kept things as simple, streamlined, and modular as I could.
39 | Hopefully this allows me and anyone else using this setup to swap
40 | things out easily.
41 |
46 | I've used the very basic{" "}
47 |
48 | Marx classless framework/reset
49 | {" "}
50 | to provide a starting point for basic prototyping with a tolerable UI
51 | while maintaining symantic and accessibility standards. Removing it is
52 | as simple as deleting the cdn link from index.html.
53 |
56 | I've also provided a few basic overrides for the nav bar and
57 | button styling, which also serve as examples of how the styling files
58 | can be structured within the project.
59 |
62 | On a more formal project, I would probably use{" "}
63 | Bulma via{" "}
64 | Trunx.
65 |
70 | I've included a navbar, a sample page, and a footer, which also
71 | act as the demo app and landing page for the project. The purpose was
72 | two-fold. First, to have the documentation presented nicely and second
73 | to provide a working reference of my preferred React setup.
74 |
79 | It's fairly self-explanatory and includes the npm modules needed
80 | to get up and running. There are also a couple of scripts configured
81 | for testing as well as linting and formatting, if you prefer to do
82 | those through the command line.
83 |
86 | I've set up a basic .babelrc, .eslintrc.json, and .prettierrc so
87 | that you can start using this right away. They contain what I consider
88 | to be a good balance between customization and letting the defaults
89 | handle things.
90 | te){var ne=te;te=ee,ee=ne}var re=Hn($,ee),le=Hn($,te);if(re&&le&&(1!==Z.rangeCount||Z.anchorNode!==re.node||Z.anchorOffset!==re.offset||Z.focusNode!==le.node||Z.focusOffset!==le.offset)){var ae=G.createRange();ae.setStart(re.node,re.offset),Z.removeAllRanges(),ee>te?(Z.addRange(ae),Z.extend(le.node,le.offset)):(ae.setEnd(le.node,le.offset),Z.addRange(ae))}}}for(var ie=[],oe=$;oe=oe.parentNode;)1===oe.nodeType&&ie.push({element:oe,left:oe.scrollLeft,top:oe.scrollTop});"function"==typeof $.focus&&$.focus();for(var ue=0;ueSuccint React Starter
15 |
6 | This is a sample page
7 |
8 |
14 |
20 | Succint React Starter
15 | A baseline starter kit for React apps
16 | Why did I build this?
29 | What's included?
37 | CSS/Sass
44 |
45 | Sample files
68 |
69 | The package.json
77 |
78 | The config files
85 |
6 | This is a sample page
7 |
8 |
14 |
20 |