├── .babelrc
├── README.md
├── .travis.yml
├── src
├── css
│ ├── BlockExample.css
│ └── TextBlockExample.css
├── containers
│ ├── App.js
│ ├── Test.js
│ └── Root.js
├── components
│ ├── BlockExample.js
│ └── TextBlockExample.js
└── index.js
├── webpack.config.prod.js
├── index.html
├── .editorconfig
├── .gitignore
├── server.js
├── .eslintrc
├── webpack.config.js
├── package.json
└── .stylelintrc
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["react-hot-loader/babel", "transform-decorators-legacy", "transform-runtime"],
3 | "presets": ["es2015", "react", "stage-0"]
4 | }
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-starter
2 |
3 |
4 | For information about this starter application, see https://medium.com/@olegafx/frontend-welcome-to-the-future-91ff064884b6
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | cache:
4 | directories:
5 | - ~/.npm
6 | - ~/.cache
7 | notifications:
8 | email: false
9 | node_js: '8'
10 |
--------------------------------------------------------------------------------
/src/css/BlockExample.css:
--------------------------------------------------------------------------------
1 | .blockFlex {
2 | display: flex;
3 | background-color: #444;
4 | margin-left: 45px;
5 | }
6 |
7 | .text {
8 | color: white;
9 | font-size: 3rem;
10 | }
11 |
--------------------------------------------------------------------------------
/src/css/TextBlockExample.css:
--------------------------------------------------------------------------------
1 | .blockFlex {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | }
6 |
7 | .text {
8 | font-size: 2rem;
9 | line-height: 1.5;
10 | color: #000000cc;
11 | }
--------------------------------------------------------------------------------
/src/containers/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import Test from './Test';
4 |
5 | export default class Root extends Component {
6 | constructor (props) {
7 | super(props);
8 | }
9 |
10 | render () {
11 | return (
12 |
13 | );
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var config = require('./webpack.config');
3 |
4 | config.plugins.push(
5 | new webpack.DefinePlugin({
6 | 'process.env': {
7 | 'NODE_ENV': JSON.stringify('production')
8 | }
9 | })
10 | );
11 |
12 | module.exports = config;
13 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React starter project
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # http://editorconfig.org
2 | root = true
3 |
4 | [*]
5 | charset = utf-8
6 | end_of_line = lf
7 | indent_size = 2
8 | indent_style = space
9 | insert_final_newline = true
10 | max_line_length = 80
11 | trim_trailing_whitespace = true
12 |
13 | [*.md]
14 | max_line_length = 0
15 | trim_trailing_whitespace = false
16 |
17 | [COMMIT_EDITMSG]
18 | max_line_length = 0
19 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | ########## App ##########
2 | /dist/
3 | /log/
4 |
5 | ########## Jetbrains ##########
6 | .idea
7 |
8 | ########## Node ##########
9 | node_modules
10 | npm-debug.log
11 |
12 | ########## Temp files ##########
13 | # Windows
14 | Thumbs.db
15 | ehthumbs.db
16 | Desktop.ini
17 |
18 | # OSX
19 | .DS_Store
20 | .AppleDouble
21 | .LSOverride
22 | .Spotlight-V100
23 | .Trashes
24 |
--------------------------------------------------------------------------------
/src/components/BlockExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import styles from '../css/BlockExample.css';
4 |
5 | export default class TextBlockExample extends Component {
6 | constructor (props) {
7 | super(props);
8 | }
9 |
10 | render () {
11 | return (
12 |
13 | It works!
14 |
15 | );
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/containers/Test.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import BlockExample from '../components/BlockExample';
4 | import TextBlockExample from '../components/TextBlockExample';
5 |
6 | export default class TestPage extends Component {
7 | constructor (props) {
8 | super(props);
9 | }
10 |
11 | render () {
12 | return (
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 |
5 | new WebpackDevServer(webpack(config), {
6 | publicPath: config.output.publicPath,
7 | hot: true,
8 | historyApiFallback: true,
9 | stats: {
10 | assets: false,
11 | children: false,
12 | colors: true,
13 | version: false,
14 | hash: false,
15 | timings: false,
16 | chunks: false,
17 | chunkModules: false
18 | }
19 | })
20 | .listen(3000, 'localhost', function (err) {
21 | if (err) {
22 | console.log(err);
23 | }
24 |
25 | console.log('Listening at localhost:3000');
26 | });
27 |
--------------------------------------------------------------------------------
/src/components/TextBlockExample.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import styles from '../css/TextBlockExample.css';
4 |
5 | export default class TextBlockExample extends Component {
6 | constructor (props) {
7 | super(props);
8 | }
9 |
10 | componentDidMount () {
11 | this.getData();
12 | }
13 |
14 | async getData () {
15 | const rawData = await fetch('http://headers.jsontest.com/');
16 | const data = await rawData.json();
17 |
18 | console.log('data', data);
19 | }
20 |
21 | render () {
22 | return (
23 |
24 | text block example
25 |
26 | );
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import { AppContainer } from 'react-hot-loader';
4 |
5 | import 'babel-polyfill';
6 | import 'whatwg-fetch';
7 |
8 | import Root from './containers/Root';
9 |
10 | const renderApp = () => {
11 | render(
12 |
13 |
14 | ,
15 | document.getElementById('root')
16 | );
17 | };
18 |
19 | renderApp();
20 |
21 | if (module.hot) {
22 | module.hot.accept('./containers/Root', () => {
23 | const NextApp = require('./containers/Root').default;
24 |
25 | render(
26 |
27 |
28 | ,
29 | document.getElementById('root')
30 | );
31 | });
32 | }
33 |
--------------------------------------------------------------------------------
/src/containers/Root.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | import Match from 'react-router/Match';
4 | import Miss from 'react-router/Miss';
5 | import Link from 'react-router/Link';
6 | import Router from 'react-router/BrowserRouter';
7 |
8 | import App from './App';
9 |
10 | import BlockExample from '../components/BlockExample';
11 | import TextExample from '../components/TextBlockExample';
12 |
13 | const NoMatch = ({ location }) => (
14 |
15 |
Whoops
16 |
Sorry but {location.pathname} didn’t match any pages
17 |
23 |
24 | - Home
25 | - Block
26 | - Text
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |