├── .gitignore ├── LICENSE ├── README.md ├── package.json ├── public └── index.html ├── rollup.config.js ├── src ├── App.tsx ├── CreatePost.tsx ├── index.tsx └── style.less └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | yarn.lock 4 | .DS_Store 5 | 6 | # output 7 | public/index.js 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/emrekeskinmac/react-rollup-basic/785cd8c568d1199d8ae7e822d62c3c25368dbb4b/README.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-workshop-basic", 3 | "version": "1.0.0", 4 | "author": "Emre Keskin ", 5 | "license": "MIT", 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development rollup -c -w", 8 | "start": "cross-env NODE_ENV=production rollup -c && serve public" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^4.4.1", 12 | "react": "^16.11.0", 13 | "react-bootstrap": "^1.0.0-beta.16", 14 | "react-dom": "^16.11.0", 15 | "react-hook-form": "^3.29.1", 16 | "react-router-dom": "^5.1.2" 17 | }, 18 | "devDependencies": { 19 | "@babel/core": "^7.7.2", 20 | "@babel/plugin-proposal-class-properties": "^7.7.0", 21 | "@babel/plugin-proposal-object-rest-spread": "^7.6.2", 22 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 23 | "@babel/plugin-transform-runtime": "^7.6.2", 24 | "@babel/preset-env": "^7.7.1", 25 | "@babel/preset-react": "^7.7.0", 26 | "@babel/preset-typescript": "^7.7.2", 27 | "@babel/runtime-corejs2": "^7.7.2", 28 | "@rollup/plugin-json": "^4.0.0", 29 | "@rollup/plugin-node-resolve": "^6.0.0", 30 | "@rollup/plugin-replace": "^2.2.1", 31 | "@types/node": "^12.12.5", 32 | "@types/react": "^16.9.11", 33 | "@types/react-dom": "^16.9.3", 34 | "@types/react-router-dom": "^5.1.3", 35 | "babel-plugin-react-require": "^3.1.1", 36 | "cross-env": "^6.0.3", 37 | "less": "^3.10.3", 38 | "rollup": "^1.26.3", 39 | "rollup-plugin-auto-named-exports": "^1.0.0-beta.3", 40 | "rollup-plugin-babel": "^4.3.3", 41 | "rollup-plugin-commonjs": "^10.1.0", 42 | "rollup-plugin-livereload": "^1.0.4", 43 | "rollup-plugin-node-resolve": "^5.2.0", 44 | "rollup-plugin-postcss": "^2.0.3", 45 | "rollup-plugin-serve": "^1.0.1", 46 | "rollup-plugin-terser": "^5.1.2", 47 | "typescript": "^3.7.2" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rollup + TypeScript + React = ❤️ 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import replace from '@rollup/plugin-replace'; 2 | import resolve from 'rollup-plugin-node-resolve'; 3 | import commonjs from 'rollup-plugin-commonjs'; 4 | import babel from 'rollup-plugin-babel'; 5 | import { terser } from 'rollup-plugin-terser'; 6 | import postcss from 'rollup-plugin-postcss' 7 | import serve from 'rollup-plugin-serve'; 8 | import livereload from 'rollup-plugin-livereload'; 9 | import autoNamedExports from 'rollup-plugin-auto-named-exports'; 10 | 11 | const isProd = process.env.NODE_ENV === 'production'; 12 | const extensions = ['.js', '.ts', '.tsx']; 13 | 14 | 15 | 16 | export default { 17 | input: 'src/index.tsx', 18 | output: { 19 | file: 'public/index.js', 20 | format: 'iife', 21 | }, 22 | plugins: [ 23 | replace({ 24 | 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development'), 25 | }), 26 | babel({ 27 | extensions, 28 | exclude: /node_modules/, 29 | babelrc: false, 30 | runtimeHelpers: true, 31 | presets: [ 32 | '@babel/preset-env', 33 | '@babel/preset-react', 34 | '@babel/preset-typescript', 35 | ], 36 | plugins: [ 37 | 'react-require', 38 | '@babel/plugin-syntax-dynamic-import', 39 | '@babel/plugin-proposal-class-properties', 40 | ['@babel/plugin-proposal-object-rest-spread', { 41 | useBuiltIns: true, 42 | }], 43 | ['@babel/plugin-transform-runtime', { 44 | corejs: 2, 45 | helpers: true, 46 | regenerator: true, 47 | useESModules: false, 48 | }], 49 | ], 50 | }), 51 | resolve({ 52 | extensions, 53 | jsnext: true, 54 | main: true, 55 | browser: true 56 | }), 57 | commonjs({ 58 | include: [ 59 | "node_modules", 60 | "node_modules/**", 61 | "node_modules/**/*",], 62 | 63 | namedExports: { 64 | 'node_modules/react/index.js': [ 65 | 'Children', 66 | 'Component', 67 | 'PureComponent', 68 | 'PropTypes', 69 | 'createElement', 70 | 'Fragment', 71 | 'createPortal', 72 | 'isFragment', 73 | 'cloneElement', 74 | 'useCallback', 75 | 'StrictMode', 76 | 'useMemo', 77 | 'useState', 78 | 'useReducer', 79 | 'useContext', 80 | 'createFactory', 81 | 'useRef', 82 | 'createRef', 83 | 'useEffect', 84 | 'createContext', 85 | 'isValidElement', 86 | 'isValidElementType', 87 | ], 88 | 'node_modules/react-dom/index.js': [ 89 | 'render', 90 | 'hydrate', 91 | 'findDOMNode', 92 | 'unmountComponentAtNode', 93 | 'createPortal', 94 | ], 95 | 'node_modules/react-is/index.js': [ 96 | 'isValidElementType' 97 | ], 98 | }, 99 | }), 100 | autoNamedExports(), 101 | postcss({ 102 | plugins: [], 103 | minimize: true, 104 | sourceMap: 'inline', 105 | }), 106 | 107 | serve({ 108 | open: true, 109 | historyApiFallback: true, 110 | contentBase: ['public'] 111 | }), 112 | livereload(), 113 | (isProd && terser()), 114 | ], 115 | }; 116 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button, Card, Col, Container, ListGroup, Row } from "react-bootstrap"; 3 | 4 | export default class App extends React.Component<{}, {}> { 5 | render() { 6 | return ( 7 | <> 8 | 9 | 10 | 11 | 12 | 16 | 17 | Title 18 | Notes 19 | 20 | 21 | 22 | 23 | 27 | 28 | Title 29 | Notes 30 | 31 | 32 | 33 | 34 | 35 | 36 | Cras justo odio 37 | Dapibus ac facilisis in 38 | Morbi leo risus 39 | Porta ac consectetur ac 40 | Vestibulum at eros 41 | 42 | 43 | 44 | 45 | 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/CreatePost.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default class CreatePost extends React.Component<{}, {}> { 3 | render() { 4 | return ( 5 | <> 6 | CreatePost Page 7 | 8 | ); 9 | } 10 | }; -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import "./style.less"; 2 | import "bootstrap/dist/css/bootstrap.min.css"; 3 | 4 | import React from "react"; 5 | import { Nav, Navbar } from "react-bootstrap"; 6 | import ReactDOM from "react-dom"; 7 | import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom"; 8 | 9 | import App from "./App"; 10 | import CreatePost from "./CreatePost"; 11 | 12 | ReactDOM.render( 13 | 14 |
15 | 16 | Instagram 17 | 18 | 19 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |
39 | , 40 | 41 | document.getElementById("app") 42 | ); 43 | -------------------------------------------------------------------------------- /src/style.less: -------------------------------------------------------------------------------- 1 | body { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "moduleResolution": "node", 6 | "jsx": "preserve", 7 | "lib": [ 8 | "dom", 9 | "dom.iterable", 10 | "esnext" 11 | ], 12 | "strict": true, 13 | "noEmit": true, 14 | "allowJs": true, 15 | "skipLibCheck": true, 16 | "esModuleInterop": true, 17 | "isolatedModules": true, 18 | "resolveJsonModule": true 19 | }, 20 | "exclude": [ 21 | "node_modules" 22 | ] 23 | } 24 | --------------------------------------------------------------------------------