add recommended tutorials

Author: tienbku

README.md

@@ -1,7 +1,31 @@
-# Vue.js CRUD App with Vue Router & Axios
+# React.js CRUD App with React Router & Axios
 
 For more detail, please visit:
-> [React.js CRUD example to consume Web API](https://bezkoder.com/react-crud-web-api/)
+> [React (Components) CRUD example to consume Web API](https://bezkoder.com/react-crud-web-api/)
+
+> [React (Hooks) CRUD example to consume Web API](https://bezkoder.com/react-hooks-crud-axios-api/)
+
+Fullstack with Node.js Express:
+> [React.js + Node.js Express + MySQL](https://bezkoder.com/react-node-express-mysql/)
+
+> [React.js + Node.js Express + PostgreSQL](https://bezkoder.com/react-node-express-postgresql/)
+
+> [React.js + Node.js Express + MongoDB](https://bezkoder.com/react-node-express-mongodb-mern-stack/)
+
+Fullstack with Spring Boot:
+> [React.js + Spring Boot + MySQL](https://bezkoder.com/react-spring-boot-crud/)
+
+> [React.js + Spring Boot + MongoDB](https://bezkoder.com/react-spring-boot-mongodb/)
+
+Fullstack with Django:
+
+> [React.js + Django Rest Framework](https://bezkoder.com/django-react-axios-rest-framework/)
+
+Serverless:
+> [React Firebase CRUD App with Realtime Database](https://bezkoder.com/react-firebase-crud/)
+
+> [React Firestore CRUD App example | Firebase Cloud Firestore](https://bezkoder.com/react-firestore-crud/)
+
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 

src/components/tutorial.component.js

@@ -114,9 +114,11 @@ export default class Tutorial extends Component {
   }
 
   render() {
+    const { currentTutorial } = this.state;
+
     return (
       <div>
-        {this.state.currentTutorial ? (
+        {currentTutorial ? (
           <div className="edit-form">
             <h4>Tutorial</h4>
             <form>
@@ -126,7 +128,7 @@ export default class Tutorial extends Component {
                   type="text"
                   className="form-control"
                   id="title"
-                  value={this.state.currentTutorial.title}
+                  value={currentTutorial.title}
                   onChange={this.onChangeTitle}
                 />
               </div>
@@ -136,7 +138,7 @@ export default class Tutorial extends Component {
                   type="text"
                   className="form-control"
                   id="description"
-                  value={this.state.currentTutorial.description}
+                  value={currentTutorial.description}
                   onChange={this.onChangeDescription}
                 />
               </div>
@@ -145,11 +147,11 @@ export default class Tutorial extends Component {
                 <label>
                   <strong>Status:</strong>
                 </label>
-                {this.state.currentTutorial.published ? "Published" : "Pending"}
+                {currentTutorial.published ? "Published" : "Pending"}
               </div>
             </form>
 
-            {this.state.currentTutorial.published ? (
+            {currentTutorial.published ? (
               <button
                 className="badge badge-primary mr-2"
                 onClick={() => this.updatePublished(false)}

src/components/tutorials-list.component.js

@@ -85,6 +85,8 @@ export default class TutorialsList extends Component {
   }
 
   render() {
+    const { searchTitle, tutorials, currentTutorial, currentIndex } = this.state;
+
     return (
       <div className="list row">
         <div className="col-md-8">
@@ -93,7 +95,7 @@ export default class TutorialsList extends Component {
               type="text"
               className="form-control"
               placeholder="Search by title"
-              value={this.state.title}
+              value={searchTitle}
               onChange={this.onChangeSearchTitle}
             />
             <div className="input-group-append">
@@ -111,12 +113,12 @@ export default class TutorialsList extends Component {
           <h4>Tutorials List</h4>
 
           <ul className="list-group">
-            {this.state.tutorials &&
-              this.state.tutorials.map((tutorial, index) => (
+            {tutorials &&
+              tutorials.map((tutorial, index) => (
                 <li
                   className={
                     "list-group-item " +
-                    (index === this.state.currentIndex ? "active" : "")
+                    (index === currentIndex ? "active" : "")
                   }
                   onClick={() => this.setActiveTutorial(tutorial, index)}
                   key={index}
@@ -134,30 +136,30 @@ export default class TutorialsList extends Component {
           </button>
         </div>
         <div className="col-md-6">
-          {this.state.currentTutorial ? (
+          {currentTutorial ? (
             <div>
               <h4>Tutorial</h4>
               <div>
                 <label>
                   <strong>Title:</strong>
                 </label>{" "}
-                {this.state.currentTutorial.title}
+                {currentTutorial.title}
               </div>
               <div>
                 <label>
                   <strong>Description:</strong>
                 </label>{" "}
-                {this.state.currentTutorial.description}
+                {currentTutorial.description}
               </div>
               <div>
                 <label>
                   <strong>Status:</strong>
                 </label>{" "}
-                {this.state.currentTutorial.published ? "Published" : "Pending"}
+                {currentTutorial.published ? "Published" : "Pending"}
               </div>
 
               <Link
-                to={"/tutorials/" + this.state.currentTutorial.id}
+                to={"/tutorials/" + currentTutorial.id}
                 className="badge badge-warning"
               >
                 Edit