├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── App.css
├── App.js
├── App.test.js
├── data
│ └── posts.json
├── index.css
├── index.js
├── learn
│ ├── ConstLetVar.js
│ ├── FormsAndInputs.js
│ ├── ImgDropAndCrop.js
│ ├── LifeCycle.js
│ ├── ParentWrapper.js
│ ├── ResuableUtils.js
│ ├── Timer.js
│ └── custom-image-crop.css
├── logo.svg
├── posts
│ ├── PostDetail.js
│ ├── PostList.js
│ └── PostSorting.js
├── registerServiceWorker.js
├── routingComps
│ ├── AppExample.js
│ ├── DynamicRouteComp.js
│ ├── NotFound.js
│ └── StaticRouteComp.js
└── thirdParty
│ ├── ReactMarkdownExample.js
│ └── ReactYouTubeExample.js
├── try-reactjs.sublime-project
└── try-reactjs.sublime-workspace
/.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 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Coding For Entrepreneurs
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:
--------------------------------------------------------------------------------
1 |
2 | # Should I update this course?
3 |
4 | Yes? Show your support by starring this repo! ⭐️
5 |
6 | [](https://github.com/codingforentrepreneurs/Try-Reactjs)
7 |
8 | When I wrote this, there were 94 stars. I'll check back soon to see if we need a revamp. Your star could make the difference!
9 |
10 | [View Stargazers](https://github.com/codingforentrepreneurs/Try-Reactjs/stargazers)
11 |
12 |
13 | ## Try Reactjs
14 | Learn Reactjs bit by bit and subscribe to get everything on [joincfe.com/youtube/](http://joincfe.com/youtube/)
15 |
16 | Do you need a particular topic covered? Be sure to [subscribe](http://joincfe.com/youtube/) and leave a comment on any video on the [playlist](https://kirr.co/e0nybk)
17 |
18 | ### Links
19 | - [All Code](https://kirr.co/cgl4ih)
20 | - [Try React Playlist](https://kirr.co/e0nybk)
21 | - [Setup React](https://kirr.co/1m68l5)
22 | - This repo https://github.com/codingforentrepreneurs/Try-Reactjs
23 | - 2021 version [here](https://github.com/codingforentrepreneurs/Try-React.js) and [here](https://www.codingforentrepreneurs.com/projects/try-reactjs-2021)
24 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "try-reactjs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.4.1",
7 | "react-dom": "^16.4.1",
8 | "react-dropzone": "^4.2.12",
9 | "react-image-crop": "^4.0.1",
10 | "react-markdown": "^3.3.3",
11 | "react-router": "^4.3.1",
12 | "react-router-dom": "^4.3.1",
13 | "react-youtube": "^7.6.0",
14 | "whatwg-fetch": "^2.0.4"
15 | },
16 | "devDependencies": {
17 | "react-scripts": "1.1.4"
18 | },
19 | "scripts": {
20 | "start": "react-scripts start",
21 | "build": "react-scripts build",
22 | "test": "react-scripts test --env=jsdom",
23 | "eject": "react-scripts eject"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codingforentrepreneurs/Try-Reactjs/3fee07a2b4662418256919a2611eeaaad377de63/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | React App
23 |
24 |
25 |
26 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/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-title {
18 | font-size: 1.5em;
19 | }
20 |
21 | .App-intro {
22 | font-size: large;
23 | }
24 |
25 | @keyframes App-logo-spin {
26 | from { transform: rotate(0deg); }
27 | to { transform: rotate(360deg); }
28 | }
29 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | // import PostSorting from './posts/PostSorting'
3 | import './App.css'
4 |
5 | import ImgDropAndCrop from './learn/ImgDropAndCrop'
6 |
7 | class App extends Component {
8 | render () {
9 | return (
10 |
13 | )
14 | }
15 | }
16 |
17 | export default App
18 |
--------------------------------------------------------------------------------
/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(Hello World
20 | )
21 | }
22 | }
23 |
24 | export default ConstLetVar
25 |
--------------------------------------------------------------------------------
/src/learn/FormsAndInputs.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | function MyTextInput(props){
4 | function handleChange(event){
5 | if (props.onChange) props.onChange(event)
6 | }
7 | return (
8 |
9 |
11 | )
12 | }
13 |
14 | class MyInputBlock extends Component {
15 | constructor(props){
16 | super(props)
17 | this.textInput = null
18 | this.setTextInputRef = element => {
19 | this.textInput = element
20 | }
21 | this.focusTextInput = () => {
22 | if (this.textInput) this.textInput.focus()
23 | }
24 |
25 | }
26 |
27 | handleChange = (event) =>{
28 | if (this.props.onChange) this.props.onChange(event)
29 | }
30 | componentDidMount(){
31 | this.focusTextInput()
32 | }
33 |
34 | render() {
35 | return (
36 |
40 | )
41 | }
42 | }
43 |
44 | class FormsAndInputs extends Component {
45 | constructor(props){
46 | super(props)
47 | this.state = {
48 | myFullName: '',
49 | myContent: '',
50 | email: ''
51 | }
52 | this.inputFullNameRef = React.createRef()
53 | this.inputEmailRef = React.createRef()
54 | }
55 |
56 |
57 | handleSubmit = (event) => {
58 | event.preventDefault()
59 | const data = this.state
60 | // console.log(this.inputFullNameRef.current.value)
61 | console.log("Final data is", data)
62 | }
63 |
64 | handleInputChange = (event) => {
65 | event.preventDefault()
66 | // console.log(event)
67 | // console.log(event.target.name)
68 | // console.log(event.target.value)
69 | this.setState({
70 | [event.target.name]: event.target.value
71 | })
72 | }
73 |
74 | handleFocusClick = (event) => {
75 | event.preventDefault()
76 | this.inputEmailRef.current.focus()
77 | }
78 | handleClearClick = (event) => {
79 | event.preventDefault()
80 | this.inputFullNameRef.current.value = ''
81 | this.setState({
82 | myFullName: ''
83 | })
84 | }
85 | // componentDidMount(){
86 | // this.inputFullNameRef.current.focus()
87 | // }
88 | render () {
89 | const {myFullName} = this.state
90 | const {email} = this.state
91 | return (
92 |
93 |
Forms and Inputs
94 |
Full name is: {myFullName}
95 |
102 |
110 | //
111 |
--------------------------------------------------------------------------------
/src/learn/ImgDropAndCrop.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import Dropzone from 'react-dropzone'
4 | import ReactCrop from 'react-image-crop'
5 | import './custom-image-crop.css';
6 |
7 | import {base64StringtoFile,
8 | downloadBase64File,
9 | extractImageFileExtensionFromBase64,
10 | image64toCanvasRef} from './ResuableUtils'
11 |
12 | const imageMaxSize = 1000000000 // bytes
13 | const acceptedFileTypes = 'image/x-png, image/png, image/jpg, image/jpeg, image/gif'
14 | const acceptedFileTypesArray = acceptedFileTypes.split(",").map((item) => {return item.trim()})
15 | class ImgDropAndCrop extends Component {
16 | constructor(props){
17 | super(props)
18 | this.imagePreviewCanvasRef = React.createRef()
19 | this.fileInputRef = React.createRef()
20 | this.state = {
21 | imgSrc: null,
22 | imgSrcExt: null,
23 | crop: {
24 | aspect: 1/1
25 | }
26 | }
27 | }
28 |
29 | verifyFile = (files) => {
30 | if (files && files.length > 0){
31 | const currentFile = files[0]
32 | const currentFileType = currentFile.type
33 | const currentFileSize = currentFile.size
34 | if(currentFileSize > imageMaxSize) {
35 | alert("This file is not allowed. " + currentFileSize + " bytes is too large")
36 | return false
37 | }
38 | if (!acceptedFileTypesArray.includes(currentFileType)){
39 | alert("This file is not allowed. Only images are allowed.")
40 | return false
41 | }
42 | return true
43 | }
44 | }
45 |
46 | handleOnDrop = (files, rejectedFiles) => {
47 | if (rejectedFiles && rejectedFiles.length > 0){
48 | this.verifyFile(rejectedFiles)
49 | }
50 |
51 |
52 | if (files && files.length > 0){
53 | const isVerified = this.verifyFile(files)
54 | if (isVerified){
55 | // imageBase64Data
56 | const currentFile = files[0]
57 | const myFileItemReader = new FileReader()
58 | myFileItemReader.addEventListener("load", ()=>{
59 | // console.log(myFileItemReader.result)
60 | const myResult = myFileItemReader.result
61 | this.setState({
62 | imgSrc: myResult,
63 | imgSrcExt: extractImageFileExtensionFromBase64(myResult)
64 | })
65 | }, false)
66 |
67 | myFileItemReader.readAsDataURL(currentFile)
68 |
69 | }
70 | }
71 | }
72 |
73 |
74 | handleImageLoaded = (image) => {
75 | //console.log(image)
76 | }
77 | handleOnCropChange = (crop) => {
78 | this.setState({crop:crop})
79 | }
80 | handleOnCropComplete = (crop, pixelCrop) =>{
81 | //console.log(crop, pixelCrop)
82 |
83 | const canvasRef = this.imagePreviewCanvasRef.current
84 | const {imgSrc} = this.state
85 | image64toCanvasRef(canvasRef, imgSrc, pixelCrop)
86 | }
87 | handleDownloadClick = (event) => {
88 | event.preventDefault()
89 | const {imgSrc} = this.state
90 | if (imgSrc) {
91 | const canvasRef = this.imagePreviewCanvasRef.current
92 |
93 | const {imgSrcExt} = this.state
94 | const imageData64 = canvasRef.toDataURL('image/' + imgSrcExt)
95 |
96 |
97 | const myFilename = "previewFile." + imgSrcExt
98 |
99 | // file to be uploaded
100 | const myNewCroppedFile = base64StringtoFile(imageData64, myFilename)
101 | console.log(myNewCroppedFile)
102 | // download file
103 | downloadBase64File(imageData64, myFilename)
104 | this.handleClearToDefault()
105 | }
106 |
107 |
108 | }
109 |
110 | handleClearToDefault = event =>{
111 | if (event) event.preventDefault()
112 | const canvas = this.imagePreviewCanvasRef.current
113 | const ctx = canvas.getContext('2d');
114 | ctx.clearRect(0, 0, canvas.width, canvas.height)
115 |
116 | this.setState({
117 | imgSrc: null,
118 | imgSrcExt: null,
119 | crop: {
120 | aspect: 1/1
121 | }
122 |
123 | })
124 | this.fileInputRef.current.value = null
125 | }
126 |
127 | handleFileSelect = event => {
128 | // console.log(event)
129 | const files = event.target.files
130 | if (files && files.length > 0){
131 | const isVerified = this.verifyFile(files)
132 | if (isVerified){
133 | // imageBase64Data
134 | const currentFile = files[0]
135 | const myFileItemReader = new FileReader()
136 | myFileItemReader.addEventListener("load", ()=>{
137 | // console.log(myFileItemReader.result)
138 | const myResult = myFileItemReader.result
139 | this.setState({
140 | imgSrc: myResult,
141 | imgSrcExt: extractImageFileExtensionFromBase64(myResult)
142 | })
143 | }, false)
144 |
145 | myFileItemReader.readAsDataURL(currentFile)
146 |
147 | }
148 | }
149 | }
150 | render () {
151 | const {imgSrc} = this.state
152 | return (
153 |
154 |
Drop and Crop
155 |
156 |
157 | {imgSrc !== null ?
158 |
159 |
160 |
161 |
167 |
168 | Preview Canvas Crop
170 | Download
172 | Clear
173 |
174 |
175 | :
176 |
177 |
Drop image here or click to upload
178 | }
179 |
180 |
{loading === true ? 'Hello World' : 'False'}
15 | }
16 |
17 | componentDidMount () {
18 | // async / api code
19 | this.setState({
20 | loading: false
21 | })
22 | }
23 |
24 | // componentWillUnmount () {
25 | // // unsubscribe from observables
26 | // // clear intervals
27 | // // log events
28 | // }
29 | }
30 |
31 | export default LifeCycle
32 |
--------------------------------------------------------------------------------
/src/learn/ParentWrapper.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 |
3 | // class ParentWrapper extends Component {
4 | // render () {
5 | // const {alertType} = this.props
6 | // return {this.props.children}
7 | // }
8 | // }
9 |
10 | function AlertBox (props) {
11 | return {props.children}
12 | }
13 |
14 | function WelcomeHereDialog () {
15 | return Some new content Some new content
15 |
Current Count: {count}
16 |
17 | )
18 | }
19 | // setInterval
20 | // clearInterval
21 | componentDidMount () {
22 | const {startCount} = this.props
23 | this.setState({
24 | count: startCount
25 | })
26 | this.doIntervalChange()
27 | }
28 |
29 | doIntervalChange = () => {
30 | this.myInterval = setInterval(() => {
31 | this.setState(prevState => ({
32 | count: prevState.count - 1
33 | }))
34 | }, 1000)
35 | }
36 |
37 | componentWillUnmount () {
38 | clearInterval(this.myInterval)
39 | }
40 | }
41 |
42 | export default Timer
43 |
--------------------------------------------------------------------------------
/src/learn/custom-image-crop.css:
--------------------------------------------------------------------------------
1 | .ReactCrop {
2 | position: relative;
3 | display: inline-block;
4 | cursor: crosshair;
5 | overflow: hidden;
6 | max-width: 100%;
7 | background-color: #000; }
8 | .ReactCrop:focus {
9 | outline: none; }
10 | .ReactCrop--disabled {
11 | cursor: inherit; }
12 | .ReactCrop__image {
13 | display: block;
14 | max-width: 100%;
15 | max-height: -webkit-stretch;
16 | max-height: -moz-available;
17 | max-height: stretch; }
18 | .ReactCrop--crop-invisible .ReactCrop__image {
19 | opacity: 0.5; }
20 | .ReactCrop__crop-selection {
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | transform: translate3d(0, 0, 0);
25 | box-sizing: border-box;
26 | cursor: move;
27 | box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
28 | border: 1px solid;
29 | border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
30 | border-image-slice: 1;
31 | border-image-repeat: repeat; }
32 | .ReactCrop--disabled .ReactCrop__crop-selection {
33 | cursor: inherit; }
34 | .ReactCrop__drag-handle {
35 | position: absolute;
36 | width: 9px;
37 | height: 9px;
38 | background-color: rgba(0, 0, 0, 0.2);
39 | border: 1px solid rgba(255, 255, 255, 0.7);
40 | box-sizing: border-box;
41 | outline: 1px solid transparent; }
42 | .ReactCrop .ord-nw {
43 | top: 0;
44 | left: 0;
45 | margin-top: -5px;
46 | margin-left: -5px;
47 | cursor: nw-resize; }
48 | .ReactCrop .ord-n {
49 | top: 0;
50 | left: 50%;
51 | margin-top: -5px;
52 | margin-left: -5px;
53 | cursor: n-resize; }
54 | .ReactCrop .ord-ne {
55 | top: 0;
56 | right: 0;
57 | margin-top: -5px;
58 | margin-right: -5px;
59 | cursor: ne-resize; }
60 | .ReactCrop .ord-e {
61 | top: 50%;
62 | right: 0;
63 | margin-top: -5px;
64 | margin-right: -5px;
65 | cursor: e-resize; }
66 | .ReactCrop .ord-se {
67 | bottom: 0;
68 | right: 0;
69 | margin-bottom: -5px;
70 | margin-right: -5px;
71 | cursor: se-resize; }
72 | .ReactCrop .ord-s {
73 | bottom: 0;
74 | left: 50%;
75 | margin-bottom: -5px;
76 | margin-left: -5px;
77 | cursor: s-resize; }
78 | .ReactCrop .ord-sw {
79 | bottom: 0;
80 | left: 0;
81 | margin-bottom: -5px;
82 | margin-left: -5px;
83 | cursor: sw-resize; }
84 | .ReactCrop .ord-w {
85 | top: 50%;
86 | left: 0;
87 | margin-top: -5px;
88 | margin-left: -5px;
89 | cursor: w-resize; }
90 | .ReactCrop__disabled .ReactCrop__drag-handle {
91 | cursor: inherit; }
92 | .ReactCrop__drag-bar {
93 | position: absolute; }
94 | .ReactCrop__drag-bar.ord-n {
95 | top: 0;
96 | left: 0;
97 | width: 100%;
98 | height: 6px;
99 | margin-top: -3px; }
100 | .ReactCrop__drag-bar.ord-e {
101 | right: 0;
102 | top: 0;
103 | width: 6px;
104 | height: 100%;
105 | margin-right: -3px; }
106 | .ReactCrop__drag-bar.ord-s {
107 | bottom: 0;
108 | left: 0;
109 | width: 100%;
110 | height: 6px;
111 | margin-bottom: -3px; }
112 | .ReactCrop__drag-bar.ord-w {
113 | top: 0;
114 | left: 0;
115 | width: 6px;
116 | height: 100%;
117 | margin-left: -3px; }
118 | .ReactCrop--new-crop .ReactCrop__drag-bar,
119 | .ReactCrop--new-crop .ReactCrop__drag-handle,
120 | .ReactCrop--fixed-aspect .ReactCrop__drag-bar {
121 | display: none; }
122 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
123 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
124 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
125 | .ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
126 | display: none; }
127 | @media (max-width: 768px), (pointer: coarse) {
128 | .ReactCrop__drag-handle {
129 | width: 17px;
130 | height: 17px; }
131 | .ReactCrop .ord-nw {
132 | margin-top: -9px;
133 | margin-left: -9px; }
134 | .ReactCrop .ord-n {
135 | margin-top: -9px;
136 | margin-left: -9px; }
137 | .ReactCrop .ord-ne {
138 | margin-top: -9px;
139 | margin-right: -9px; }
140 | .ReactCrop .ord-e {
141 | margin-top: -9px;
142 | margin-right: -9px; }
143 | .ReactCrop .ord-se {
144 | margin-bottom: -9px;
145 | margin-right: -9px; }
146 | .ReactCrop .ord-s {
147 | margin-bottom: -9px;
148 | margin-left: -9px; }
149 | .ReactCrop .ord-sw {
150 | margin-bottom: -9px;
151 | margin-left: -9px; }
152 | .ReactCrop .ord-w {
153 | margin-top: -9px;
154 | margin-left: -9px; }
155 | .ReactCrop__drag-bar.ord-n {
156 | height: 14px;
157 | margin-top: -7px; }
158 | .ReactCrop__drag-bar.ord-e {
159 | width: 14px;
160 | margin-right: -7px; }
161 | .ReactCrop__drag-bar.ord-s {
162 | height: 14px;
163 | margin-bottom: -7px; }
164 | .ReactCrop__drag-bar.ord-w {
165 | width: 14px;
166 | margin-left: -7px; }
167 |
168 | }
169 |
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
--------------------------------------------------------------------------------
/src/posts/PostDetail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | class PostDetail extends Component {
4 | constructor (props) {
5 | super(props)
6 | // this.titleWasClicked = this.titleWasClicked.bind(this)
7 | this.toggleContent = this.toggleContent.bind(this)
8 | this.handleRemoveContentButton = this.handleRemoveContentButton.bind(this)
9 | this.state = {
10 | showContent: true,
11 | postItem: null
12 | }
13 | }
14 | handleRemoveContentButton (event) {
15 | if (this.props.didHandleRemove) {
16 | this.props.didHandleRemove(this.props.post)
17 | }
18 | }
19 | titleWasClicked = (event) => {
20 | event.preventDefault()
21 | const {dataCallback} = this.props
22 | // console.log(dataCallback)
23 | let newPostItem = this.props.post
24 | newPostItem['title'] = 'This is my awesome new title'
25 | this.setState({
26 | postItem: newPostItem
27 | })
28 | if (dataCallback !== undefined) {
29 | dataCallback(newPostItem)
30 | }
31 | //
32 | }
33 |
34 | toggleContent (event) {
35 | event.preventDefault()
36 | this.setState({
37 | showContent: !this.state.showContent
38 | })
39 | }
40 |
41 | setPostStateOnProps () {
42 | const {post} = this.props
43 | this.setState({
44 | postItem: post
45 | })
46 | }
47 | componentDidUpdate (prevProps, prevState, snapshop) {
48 | if (this.props !== prevProps) {
49 | this.setPostStateOnProps()
50 | }
51 | }
52 | componentDidMount () {
53 | this.setPostStateOnProps()
54 | }
55 | render () {
56 | const {postItem} = this.state
57 | const {showContent} = this.state
58 | return (
59 |
60 | {postItem !== null
61 | ?
62 |
{postItem.title}
63 | {postItem.date}
64 |
65 | {showContent === true ?
{postItem.content}
: ''}
66 |
Toggle Content Display
67 |
Remove Content
68 |
69 | : ''}
70 |
47 |
Hello There
48 | {postList.map((item, index) => {
49 | return
54 | })}
55 |
52 |
Hello There
53 |
Reverse Order
54 |
Order by date
55 | {postList.map((item, index) => {
56 | return
61 | })}
62 |
15 |
16 | Navbar
17 |
18 |
19 |
20 | (
26 | loggedIn === true ? (
27 |
34 |
35 |
24 |
{slug} that changes based on route
25 | 404 error. Page Not Found
7 | )
8 | }
9 | }
10 |
11 | export default NotFound
12 |
--------------------------------------------------------------------------------
/src/routingComps/StaticRouteComp.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import { Link } from 'react-router-dom'
4 |
5 | class StaticRouteComp extends Component {
6 | render () {
7 | return (
8 |
9 |
Content that doesn't change based on route.
10 |