DEV Community: Shashi

Displaying Content On The Webpage Using A Local JSON File.....

Shashi — Sun, 07 Feb 2021 19:18:10 +0000

Want to learn and experiment with how data gets exchanged between different files using JSON locally with a small practice project?

For the next few minutes, please forget about JaSON (Statham) from the "The Transporter" and "Fast & Furious"- and just read on, and then later code on. By the end, you will say you know little bit of another JSON, I promise. Okay, that's a bad joke.

I made this simple project to understand how this works with a local JSON file.

Some Fast & Furious Bytes about JSON.

JSON stands for Java Script Object Notation
JSON is a complete platform and language independent.
JSON is a text based format file, So it's easy to read and understand even for non-coders.
JSON mostly used for asynchronous transactions.
We can convert any Javascript Object into JSON and send it to the server. Server will then process it and send it back to the Javascript in JSON format.

Project Demo: Render JSON

Project Snapshot:

Here is the Project's Source Code:

index.html



<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JavaScript JSON List</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div>
    <h1>[ Displaying Content On The Webpage From Local JSON File ]</h1>
  </div>
  <hr />
  <div class="output"></div>
  <script src="app.js"></script>
</body>

</html>

style.css



body {
  font-family: 'Roboto', sans-serif;
  background-color: #070116;
}

div {
  text-align: center;
  background-color: rgb(41, 216, 216);
  padding: 10px;
}

.output {
  text-align: center; 
  color: white; 
  font-size: 20px;
}

.active {
  margin: 40px;
  padding: 50px;
  font-size: 20px;
  color: white;
  letter-spacing: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient( 160deg, #ff0000, #ec008c );
  border-radius: 30px;
  cursor: pointer;
}

local.json



[
  {
    "firstName": "Shash",
    "lastName": "WebDev",
    "gender": "male",
    "age": 35,
    "address": {
      "streetAddress": "123",
      "city": "Greater Manchester",
      "postalCode": "M32"
    },
    "phoneNumbers": [{ "type": "home", "number": "123456789" }]
  },
  {
    "firstName": "Rihan",
    "lastName": "Anne",
    "gender": "Female",
    "age": 28,
    "address": {
      "streetAddress": "019",
      "city": "Dublin",
      "postalCode": "D01"
    },
    "phoneNumbers": [{ "type": "home", "number": "238047651" }]
  },
  {
    "firstName": "John",
    "lastName": "Smith",
    "gender": "male",
    "age": 38,
    "address": {
      "streetAddress": "456",
      "city": "London",
      "postalCode": "E1"
    },
    "phoneNumbers": [{ "type": "home", "number": "987654321" }]
  },
  {
    "firstName": "Kelly",
    "lastName": "Brokes",
    "gender": "Female",
    "age": 32,
    "address": {
      "streetAddress": "789",
      "city": "Glasgow",
      "postalCode": "G1"
    },
    "phoneNumbers": [{ "type": "home", "number": "345672198" }]
  }
]

app.js



"use strict";

const output = document.querySelector(".output");
//console.log(output); // <div class="output"></div>

//output.textContent = "New Content";
//console.log(output); // <div class="output">New content</div>

// Storing json data in a variable
const localJsonFile = "local.json";

// The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed,
// without waiting for stylesheets, images, and subframes to finish loading.
window.addEventListener("DOMContentLoaded", () => {
  // console.log('DOM fully loaded and parsed');
  output.textContent = "Loading....";
  // Make fetch request to local.json file
  fetch(localJsonFile)
    .then((response) => response.json()) // and the response we get is in json format
    .then((data) => {
      // we call that data here
      // console.log(data); // check the data on the console
      output.innerHTML = ""; // Initial content is empty
      data.forEach((el) => {
        // loop through the json data using forEach method
        // console.log(el);
        jsonList(el); // calling jsonList function
      });
    });
});

// Create a function to display the json data dynamically on the webpage
function jsonList(item) {
  // Create a new div element dynamically
  const div = document.createElement("div");
  // get the required details from the local.json file to the div element using innerHTML
  div.innerHTML = `
        ${item.firstName} ${item.lastName} is a ${item.gender} of ${item.age},
        resides in ${item.address["streetAddress"]} ${item.address["city"]} ${item.address["postalCode"]}
        with a contact number ${item.phoneNumbers[0]["number"]}.`;
  // attach the newly created div element to the original div element, in this case to the class '.output'
  output.append(div);
  // Add styling to the displayed content
  div.classList.add("active");
}

If you want to experiment, just add some content to local.json file and see how it updates the webpage dynamically.

Happy C❤️ding!!

React Basics For Absolute Beginners....

Shashi — Tue, 02 Feb 2021 20:38:57 +0000

Are you just starting out or thinking to learn React Basics without any development setup or just want to see how the syntax looks?

Then check it out my step by step guide to learn React Basics with code examples. This is a single html file with 920 lines of pure React Basics which I prepared to learn it myself last year. I then pushed it to my Github account as a repo at My React Guide but got no exposure nor got any feedback till now. I just thought, if I post it here, it might be useful for someone who is just starting out.

Here we go...

Copy all the code from here or from My React Guide and paste it in your favourite text editor.
Right click on the index.html and open it in your default browser.
Uncomment only the part of the code you want and check the result in the browser.
Once you understand it, just comment it and uncomment the next bit of code.
Repeat till the end.

Note: For better visibility of the code, please click on fullscreen mode.

<!-- INSERT A BOILER PLATE CODE -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React JS Quick Guide by Shashi - Twitter: https://twitter.com/ShashiWebDev</title>

    <!-- SETUP A DEVELOPMENT ENVIRONMENT -->
    <!-- REACT LIBRARY -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- REACT DOM LIBRARY -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- BABEL LIBRARY -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <!-- PROP-TYPES -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
</head>

<body>
    <!-- DESIGNATED LOCATION TO INSERT REACT CONTENT -->
    <div id="app">REACT HAS NOT RENDERED YET!</div>

    <!-- JAVASCRIPT -->
    <script type="text/babel">
        // RENDER REACT TO THE DOM - WILL ACCEPT TWO ARGUMENTS (REACT WHAT, REACT WHERE)

        ///////////////////// => SINGLE ELEMENT <= /////////////////////
        //  
        //   ReactDOM.render(
        //     // REACT WHAT - JSX
        //        <h1>Hello World!</h1>,
        //     // REACT WHERE - DIV WITH ID OF "APP"
        //     document.getElementById("app")
        //   );


        ///////////////////// => NESTED ELEMENTS: Must be wrapped in a div or other element <= /////////////////////
        //
        //   ReactDOM.render(
        //     // REACT WHAT - JSX
        //        <div>
        //         <h1>Header</h1>
        //         <h2>Content</h2>
        //         <p>This is the Content!!!!</p>
        //       </div>,
        //     // REACT WHERE - DIV WITH ID OF "APP"
        //     document.getElementById("app")
        //   );

        ///////////////////// => ATTRIBUTE USAGE: Must use a data prefix <= /////////////////////
        // 
        //   ReactDOM.render(
        //     // REACT WHAT - JSX
        //        <div>
        //         <h1>Header</h1>
        //         <h2>Content</h2>
        //         <p data-myAttribute="some value">This is the Content!!!!</p>
        //        </div>,
        //     // REACT WHERE - DIV WITH ID OF "APP"
        //     document.getElementById("app")
        //   );

        ///////////////////// => JAVASCRIPT EXPRESSIONS: Must be wrapped in curly braces <= /////////////////////
        // 
        //   ReactDOM.render(
        //     // REACT WHAT - JSX
        //        <div>
        //          <h1>{1 + 1}</h1>
        //        </div>,
        //     // REACT WHERE - DIV WITH ID OF "APP"
        //     document.getElementById("app")
        //   );

        ///////////////////// => We can use Conditional (Ternary) Expressions but can't use if else statements inside JSX <= /////////////////////
        //
        //     let i = 1; // Global Variable
        //     ReactDOM.render(
        //         // REACT WHAT - JSX
        //         <div>
        //             <h1>{i==1 ? 'True!': 'False'}</h1>
        //         </div>,
        //         // REACT WHERE - DIV WITH ID OF "APP"
        //         document.getElementById("app")
        //     );

        ///////////////////// => STYLING: Recommended || Inline styles, camelCase syntax, automatically appends px to number values on specific elements <= /////////////////////
        //
        // ->  Declare Styles:
        //
        //      var myStyle = {
        //         fontSize: 100,
        //         color: 'red',
        //         border: '5px solid green'
        //         }
        //
        //      ReactDOM.render(
        //          // REACT WHAT - JSX
        //          <div>
        //              <h1 style={myStyle}>Header</h1>
        //          </div>,
        //      // REACT WHERE - DIV WITH ID OF "APP"
        //          document.getElementById("app")
        //      );

        ///////////////////// => COMMENTS: Must be wrapped in curly braces <= /////////////////////
        //
        //      ReactDOM.render(
        //      // REACT WHAT - JSX
        //         <div>
        //           <h1>Don't display Comment</h1>
        //           {/* Multi Line Comment...*/}
        //           {// Single Line Comment...}
        //         </div>,
        //      // REACT WHERE - DIV WITH ID OF "APP"
        //      document.getElementById("app")
        //   );

        ///////////////////// => NAMING CONVENTION <= /////////////////////
        //
        // HTML tags always use lowercase tag names
        // React Components start with uppercase
        // Since JSX is JavaScript, Identifiers such as class and for are referred as className and htmlFor

        ///////////////////// => STATELESS COMPONENTS <= /////////////////////
        // 
        // -> Stateless Header Child Component: 
        //
        // class Header extends React.Component {
        //        render() {
        //            return (
        //               <div>
        //                  <h1>Header</h1>
        //               </div>
        //          );
        //      }
        // }
        //
        // -> Stateless Content Child Component:
        //
        // class Content extends React.Component {
        //        render() {
        //            return (
        //             <div>
        //               <h2>Content</h2>
        //               <p>This is paragraph...</p>
        //             </div>
        //         );
        //     }
        // }  
        //
        // -> Stateless App Parent Component:
        //
        // class App extends React.Component {
        //     render() {
        //         return(
        //             <div>
        //               <Header />
        //               <Content />    
        //             </div>
        //         );
        //     }
        // }
        //       
        // ReactDOM.render(
        //         // REACT WHAT - JSX
        //         <App />,
        //         // REACT WHERE - DIV WITH ID OF "APP"
        //         document.getElementById("app")
        //     );

        ///////////////////// => STATEFUL COMPONENTS <= /////////////////////  
        //
        // -> Stateless Header Child Component:
        //
        // class Header extends React.Component {
        //     render() {
        //         return (
        //             <h1>Header</h1>
        //         );
        //     }
        // }
        //
        // -> Stateless TableRow Child Component:
        //
        //    class TableRow extends React.Component {
        //         render () {
        //             return (
        //                 <tr>
        //                     {/* props(properties) are used to send data to components  */}
        //                    <td>{this.props.data.id}</td>
        //                    <td>{this.props.data.name}</td>
        //                    <td>{this.props.data.age}</td> 
        //                 </tr>
        //             );
        //         }
        //   }    
        //
        // -> Stateful App Parent Component:
        //   class App extends React.Component {
        //       constructor() { // Constructor method is used to initialize the state
        //           super(); // super will call the constructor of its parent class
        //           this.state = { // Components data will be stored in component's state
        //               data: [
        //                   {
        //                     "id": 1, 
        //                     "name": 'Foo',
        //                     "age": "20"
        //                   },
        //                   {
        //                     "id": 2,
        //                     "name": "Bar",
        //                     "age": "30"
        //                   },
        //                   {
        //                     "id": 3, 
        //                     "name": "Baz",
        //                     "age": "40"  
        //                   }
        //               ]
        //           }
        //       }
        //
        //        render () {
        //           return (
        //              <div>
        //                <Header />
        //                <table>
        //                  <tbody>
        //                     {this.state.data.map(
        //                         // Dynamically inserting a TableRow for every object from the data array.
        //                         (person, i) => <TableRow key = {i} data = {person} />
        //                         // key = {i} will help React to update only necessary elements
        //                         // instead of re-rendering the entire list when something changes.
        //                     )}
        //                  </tbody>
        //                </table>
        //              </div>
        //           );
        //       }
        //   }
        //  
        //   ReactDOM.render(
        //       // REACT WHAT 
        //       <App />,
        //       // REACT WHERE - DIV WITH ID OF "APP"
        //       document.getElementById("app")
        //   );

        ///////////////////// => STATE <= ///////////////////// 
        // -> Using state: 
        // class App extends React.Component {
        //     constructor(props) {
        //         super(props);
        //         this.state = { //state is the place where the data comes from. Make it as simple as possible and minimize the number of stateful components
        //             header: "Header from state...",
        //             content: "Content from state..."
        //         }
        //     }
        //     render() {
        //         return (
        //             <div>
        //               <h1>{this.state.header}</h1>  
        //               <h2>{this.state.content}</h2>  
        //             </div>
        //         );
        //     }
        // }
        // ReactDOM.render(
        //     // REACT WHAT
        //     <App />,
        //     // REACT WHAT - DIV WITH ID OF "APP"
        //     document.getElementById("app")
        // );

        ///////////////////// => PROPS <= /////////////////////
        // 1. The main difference between state and props are that props are immutable.
        // 2. This is why the container or parent component should define the state that can be updated and changed.
        // 3. While the child components should only pass data from the state using props.
        // 4. If we need immutable data in our component, we can just add props to it. 
        //
        // -> Using props:
        //
        //    class App extends React.Component {
        //        render() {
        //            return(
        //                <div>
        //                   <h1>{this.props.headerProp}</h1>
        //                   <h2>{this.props.contentProp}</h2>
        //                </div>
        //            );
        //        }
        //    }
        //     ReactDOM.render(
        //         // REACT WHAT
        //         <App headerProp = "Header from props..." 
        //              contentProp = "Content from props..." />,
        //         // REACT WHERE - DIV WITH ID OF "APP"
        //         document.getElementById("app")
        //     );

        // -> Default props: 
        // We can set default property values directly on the component constructor instead of 
        // adding it to the reactDOM.render() element.
        //
        //    class App extends React.Component {
        //        render() {
        //            return (
        //                <div>
        //                  <h1>{this.props.headerProp}</h1>
        //                  <h2>{this.props.contentProp}</h2>
        //                </div>
        //            );
        //        }
        //    }
        //    App.defaultProps = {
        //        headerProp: "Header from props...",
        //        contentProp: "Content from props..."
        //    }
        //  
        //    ReactDOM.render(
        //        //REACT WHAT 
        //        <App />,
        //        // REACT WHERE - DIV WITH THE ID "APP"
        //        document.getElementById("app")
        //    );

        // -> State and Props:
        // 1. Let's combine state and props in the following app
        // 2. Let's set the state in the parent component and then pass it down the component tree using props.
        //
        // Stateful Parent Component- App: 
        //  
        // class App extends React.Component {
        //         constructor(props) {
        //             super(props);
        //             this.state = { // setting the state in the parent component 
        //                 header: "Header from props...",
        //                 content: "Content from props..."
        //             }
        //         }
        //          render() {
        //              return (
        //                  <div>
        //                     <Header headerProp = {this.state.header} />
        //                     <Content contentProp = {this.state.content} />
        //                  </div>
        //              ); 
        //          }
        //        }
        //     // Child Component - Header:
        //     class Header extends React.Component {
        //         render() {
        //             return (
        //                 <h1>{this.props.headerProp}</h1> // Passing state property to child component
        //             );
        //         }
        //     }
        //     // Child Component - Content:
        //     class Content extends React.Component {
        //         render() {
        //             return(
        //                 <h2>{this.props.contentProp}</h2> // Passing state property to child component
        //             );
        //         }
        //     }

        //     ReactDOM.render(
        //         // REACT WHAT
        //         <App />,
        //         // REACT WHERE - DIV WITH THE ID "APP"
        //         document.getElementById("app")
        //     );

        // -> Props validation:
        // 1. Properties validation is a useful way to force the correct usage of the components. 
        // 2. This will help in development stage of the app to avoid future bugs and problems.
        // 3. This also makes the code more readable as we can see how each component should be used.
        // 4. component.propTypes is used for props validation. 
        // 5. We will get a console warning if any of the props are not using the correct type that we assigned.
        // 6. After we specify validation patterns, we will set component.defaultProps
        //
        //    class App extends React.Component {
        //        render() {
        //            return (
        //                <div>
        //                  <h3>Array: {this.props.propArray}</h3> 
        //                  <h3>Boolean: {this.props.propBool ? "True..." : "False"}</h3>
        //                  <h3>Function: {this.props.propFunc(3)}</h3>
        //                  <h3>Number: {this.props.propNumber}</h3>
        //                  <h3>String: {this.props.propString}</h3>
        //                  <h3>Object: {this.props.propObject.objectName1}</h3>
        //                  <h3>Object: {this.props.propObject.objectName2}</h3>
        //                  <h3>Object: {this.props.propObject.objectName3}</h3>
        //                </div>
        //               );
        //        }
        //    }
        //     App.propTypes = {
        //           propArray: PropTypes.array.isRequired,
        //           propBool: PropTypes.bool.isRequired,
        //           propFunc: PropTypes.func,
        //           propNumber: PropTypes.number,
        //           propString: PropTypes.string,
        //           propObject: PropTypes.object
        //     }
        //
        //     App.defaultProps = {
        //          propArray: [1, 2, 3, 4, 5],
        //          propBool: true,
        //          propFunc: function(e){return e},
        //          propNumber: 1,
        //          propString: "String Value...",
        //          propObject: {
        //              objectName1: "objectValue1",
        //              objectName2: "objectValue2",
        //              objectName3: "objectValue3"
        //          }
        //     }
        //
        //     ReactDOM.render(
        //         // REACT WHAT
        //         <App />,
        //         // REACT WHERE - DIV WITH THE ID "APP"
        //         document.getElementById("app")
        //     );

        ///////////////////// => COMPONENT API <= /////////////////////
        // -> Set State: 
        // 1. This method is used to update the state of the component.
        // 2. This method will not replace the original state but it will add changes to it. 
        //
        //   class App extends React.Component {
        //       constructor() {
        //           super();
        //         
        //           this.state = { // Created a state for the component 
        //               data: [] // but with no data in it @ empty array 
        //           }
        //
        //           this.setStateHandler = this.setStateHandler.bind(this); // In ES6 classes, we have to Manually bind this. 
        //       }; 
        //       // handler function 
        //       setStateHandler() {
        //           var item = "setState...";
        //           var myArray = this.state.data.slice();
        //               myArray.push(item);
        //           this.setState(
        //               {
        //                   data: myArray // Updating the state
        //               }
        //           )    
        //       }; 
        //
        //       render() {
        //           return(
        //               <div>
        //                 <button onClick={this.setStateHandler}>SET STATE</button> {/* Calls the setStateHandler function when the button is clicked */}
        //                 <h3>State Array: {this.state.data}</h3> {/* Display the updated state */}
        //               </div>
        //           );
        //       }
        //   }
        //
        //   ReactDOM.render(
        //       // REACT WHAT
        //       <App />,
        //       // REACT WHERE - DIV WITH THE ID ("APP")
        //       document.getElementById("app")
        //   );

        // -> Force Update: 
        // This method will be used in a situation where you have to manually update the component.
        //
        //   class App extends React.Component {
        //       constructor() {
        //           super();
        //
        //           this.forceUpdateHandler = this.forceUpdateHandler.bind(this); // In ES6 class, We have to manually bind this
        //       }
        //
        //       // Handler function
        //       forceUpdateHandler() {
        //           this.forceUpdate(); // This will force the update to the component
        //       }
        //
        //       render() {
        //           return (
        //               <div>
        //                 <button onClick={this.forceUpdateHandler}>FORCE UPDATE</button> {/* Calls the forceUpdateHandler function when the button is clicked.*/}
        //                  <h3>Random Number: {Math.random()}</h3> {/* A random number will be updated every time the button is clicked or the page refreshes */}
        //               </div>
        //           );
        //       }
        //   }
        //
        //    ReactDOM.render(
        //        // REACT WHAT
        //        <App />,
        //        //REACT WHERE - DIV WITH THE ID "APP"
        //        document.getElementById("app")
        //    );

        // -> Find DOM Node:
        // For DOM manipulation, we can use ReactDOM.findDOMNode() Method
        //
        //   class App extends React.Component {
        //        constructor() {
        //            super();
        //
        //            this.findDomNodeHandler = this.findDomNodeHandler.bind(this); // In ES6 classes, we manually bind this
        //        }
        //
        //        // Handler function
        //        findDomNodeHandler() {
        //            var myDiv = document.getElementById("myDiv");
        //            ReactDOM.findDOMNode(myDiv).style.color = "green"; // Assign the color 
        //        }
        //
        //        render() {
        //            return (
        //                <div>
        //                 <button onClick={this.findDomNodeHandler}>FIND DOM NODE</button> {/* Calls the findDomNodeHandler function when the button is clicked. */}
        //                 <div id="myDiv">NODE:</div> {/* The color of myDiv element changes to green when the button is clicked */}
        //                </div>
        //            );
        //        }
        //
        //   }
        //   ReactDOM.render(
        //       // REACT WHAT 
        //       <App />,
        //       //REACT WHERE - DIV WITH THE ID "APP"
        //       document.getElementById("app")
        //   );

        ///////////////////// => COMPONENT LIFE CYCLE <= /////////////////////
        // -> LifeCycle Methods:
        // 1. componentWillMount => This method will be executed before rendering, on both the server and the client side.
        // 2. componentDidMount => This method will be executed after the first render only on the client side. 
        //    A. This is where AJAX requests and DOM or state updates should occur. 
        //    B. This method is also used for integration with other JavaScript Frameworks and any functions with delayed execution such as setTimeout or setInterval.
        //    C. This method can be used to update the state, so that we can trigger other lifecycle methods. 
        // 3. componentWillReceiveProps => This method is invoked as soon as the props are updated before another render is called. We triggered it from setNewNumber when we updated the state. 
        // 4. shouldComponentUpdate => This method should return true or false value. 
        //    A. This will determine whether the component will be updated or not. 
        //    B. This is set to true by default.  
        //    C. If we are sure that the component doesn't need to render after state or props are updated, we can return false value. 
        // 5. componentWillUpdate => This method is called just before rendering. 
        // 6. componentDidUpdate => This method is called just after rendering. 
        // componentWillUnmount => This method is called after the component is unmounted from the dom. 
        // An example: 
        // All the life cycle methods are inside the child component - Content.   
        //
        // class Content extends React.Component {
        //       UNSAFE_componentWillMount() { // This method is deprecated, So using UNSAFE_ prefix to it to suppress the console error  
        //         console.log('Component WILL MOUNT!');
        //       } 
        //       componentDidMount() {
        //           console.log('Component DID MOUNT!');
        //       }
        //       UNSAFE_componentWillReceiveProps(newProps) { // This method is deprecated, So using UNSAFE_ prefix to it to suppress the console error
        //           console.log('Component WILL RECEIVE PROPS!');
        //       }
        //       shouldComponentUpdate(nextProps, nextState) {
        //           return true;
        //       }
        //       UNSAFE_componentWillUpdate(newProps, nextState) { // This method is deprecated, So using UNSAFE_ prefix to it to suppress the console error
        //           console.log('Component WILL UPDATE!');
        //       }
        //       componentDidUpdate(prevProps, prevState) {
        //           console.log('Component DID UPDATE!');
        //       }
        //       componentWillUnmount() {
        //           console.log('Component WILL UNMOUNT!');
        //       }
        //       render() {
        //           return (
        //               <div><h3>{this.props.myNumber}</h3></div>
        //           );
        //       }
        //     }
        // Parent Component - App: 
        //    class App extends React.Component {
        //        constructor(props) {
        //            super(props);
        //
        //            this.state = { // Setting initial state in the constructor method. 
        //                data: 0
        //            }
        //
        //            this.setNewNumber = this.setNewNumber.bind(this); // In ES6, We manually bind this 
        //        };
        //      
        //        // setNewNumber function
        //        setNewNumber() { // setNewNumber function will be used to update the initial state
        //            this.setState({
        //                data: this.state.data + 1
        //            });
        //        }
        //
        //        render() {
        //            return (
        //                <div>
        //                  <button onClick={this.setNewNumber}>INCREMENT</button>
        //                  <Content myNumber={this.state.data}></Content> 
        //                </div>
        //            );
        //        }
        //    } 
        //
        //    ReactDOM.render(
        //        // REACT WHAT
        //        <App />,
        //        // REACT WHERE - DIV WITH THE ID "APP"
        //        document.getElementById("app")
        //    );

        ///////////////////// => FORMS <= /////////////////////
        // -> Simple Example:
        //
        //   class App extends React.Component {
        //       constructor(props) {
        //           super(props);
        //
        //           this.state = { // Setting up state's initial value
        //               data: "Initial Value..."
        //           }
        //
        //           this.updateState = this.updateState.bind(this); // In ES6 classes, We manually bind this.
        //       }
        //
        //       updateState(e) { // Update the state whenever the input value changes 
        //          this.setState({
        //              data: e.target.value 
        //          });
        //       }
        //
        //       render() {
        //           return(
        //               <div>
        //                 <input type="text"
        //                         value = {this.state.data} // Set input form with a value as this.state.data
        //                         onChange = {this.updateState} // onChange event will watch the input changes and update the state accordingly. 
        //                          />  
        //                 <h3>{this.state.data}</h3>        
        //               </div>
        //           );
        //       }
        //   }
        //   ReactDOM.render(
        //       // REACT WHAT 
        //       <App />,
        //       // REACT WHERE 
        //       document.getElementById("app")
        //   );

        // Complex Example: 
        // 1. How to use forms from child component.
        // 2. onChange method will trigger state update that will be passed to the child input value and rendered on the screen.
        // 3. Whenever we need to update the state from the child component, we need to pass the function that will handle updating (updateState) as a prop (updateStateProp).
        //
        // Child Component - Content: 
        //
        //   class Content extends React.Component {
        //       render() {
        //           return (
        //               <div>
        //                 <input type="text"
        //                        value={this.props.myDataProp}
        //                        onChange={this.props.updateStateProp}
        //                        />
        //                   <h3>{this.props.myDataProp}</h3>     
        //               </div>  
        //           );
        //       }
        //   }  
        //
        //   Parent Component - App :
        //
        //   class App extends React.Component {
        //       constructor(props) {
        //           super(props);
        //
        //           this.state = {
        //               data: "Updated from child..."
        //           }
        //
        //           this.updateState = this.updateState.bind(this);
        //       }
        //
        //       updateState(e) {
        //           this.setState({
        //               data: e.target.value
        //           });
        //       }
        //
        //       render() {
        //           return (
        //               <div>
        //                 <Content myDataProp={this.state.data}
        //                          updateStateProp={this.updateState}></Content>
        //               </div>
        //           );
        //       }
        //   }
        //
        //   ReactDOM.render(
        //       //REACT WHAT 
        //       <App />,
        //       // REACT WHERE 
        //       document.getElementById("app")
        //   );

        ///////////////////// => EVENTS <= /////////////////////
        // => Simple Example Using onClick Event on one single component:
        //
        // class App extends React.Component {
        //      constructor(props) {
        //          super(props);
        //
        //          this.state = {
        //              data: "Initial data..."
        //          }
        //
        //          this.updateState = this.updateState.bind(this);
        //      }
        //
        //      updateState() {
        //          this.setState({
        //              data: "Updated data..."
        //          });
        //      }
        //
        //      render() {
        //          return (
        //              <div>
        //                <button onClick={this.updateState}>Click</button>
        //                <h3>{this.state.data}</h3>
        //              </div>
        //          );
        //      }
        //  } 
        //
        //  ReactDOM.render(
        //      //REACT WHAT 
        //      <App />,
        //      // REACT WHERE -  DIV WITH THE ID "APP"
        //      document.getElementById("app")
        //  );

        // => Steps involved in Child Events: 
        // When we need to update the state of a parent component from its child component, we can create
        // an event handler (updateState) in the parent component and 
        // Pass it as a prop (updateStateProp) to the child component where we can just call it 

        // Child Component: 
        //   class Content extends React.Component {
        //       render() {
        //           return(
        //               <div>
        //                 <button onClick={this.props.updateStateProp}>Click</button>
        //                 <h1>{this.props.myDataProp}</h1>
        //               </div>
        //           );
        //       }
        //   }   
        // Parent Component: 
        //   class App extends React.Component {
        //       constructor(props) {
        //           super(props);
        //
        //           this.state = {
        //               data: "Initial data..."
        //           }
        //           this.updateState = this.updateState.bind(this);
        //       }
        //
        //       updateState() {
        //           this.setState({
        //              data: "Data Updated from the child component..."
        //           });
        //       }
        //
        //       render() {
        //           return (
        //               <div>
        //                 <Content 
        //                   myDataProp = {this.state.data} 
        //                   updateStateProp = {this.updateState}>
        //                   </Content>
        //               </div>
        //           );
        //       }
        //   }
        //
        //   ReactDOM.render(
        //       //REACT WHAT
        //       <App />,
        //       //REACT WHERE
        //       document.getElementById("app")
        //   );

        ///////////////////// => REACT - REF'S <= /////////////////////
        // -> The ref is used to return a reference to the element. 
        // -> Ref's should be avoided in most cases, however, they can be useful when we need DOM measurements or to add methods to the components. 
        // ->> Using Ref's: 
        // -> The following example shows how to use refs to clear the input field. 
        // -> ClearInput function searches for element with ref = "myInput" value, resets the state, and add focus to it after the button is clicked. 

        //     class App extends React.Component {
        //         constructor(props) {
        //             super(props);
        //
        //             this.state = {
        //                 data: " "
        //             }
        //             this.updateState = this.updateState.bind(this);
        //             this.clearInput = this.clearInput.bind(this);
        //         }
        //
        //          updateState(e) {
        //              this.setState({
        //                  data: e.target.value
        //              });
        //          }
        //
        //          clearInput() {
        //              this.setState({
        //                  data: " "
        //              });
        //              ReactDOM.findDOMNode(this.refs.myInput).focus();
        //          }
        //
        //         render() {
        //             return (
        //                 <div>
        //                   <input value={this.state.data} onChange={this.updateState} ref="myInput"></input>
        //                   <button onClick={this.clearInput}>Clear</button>
        //                   <h1>{this.state.data}</h1>
        //                 </div>
        //             );
        //         }
        //     } 
        //
        //     ReactDOM.render(
        //         //REACT WHAT
        //            <App />,
        //         //REACT WHERE
        //            document.getElementById("app")
        //       );
        //   
        // 

        ///////////////////// => REACT - KEY'S <= /////////////////////
        // -> React keys are useful when working with dynamically created components
        // or when your lists are altered by the users. 
        // -> Setting the key value will keep your components uniquely identified after the change. 
        // -> Using keys: 
        // Dynamically creating Content elements with unique index (i).
        // class App extends React.Component {
        //     constructor() {
        //         super();
        //
        //         this.state = {
        //             data: [
        //                 {
        //                     component: "First...",
        //                     id: 1
        //                 }, 
        //                 {
        //                     component: "Second...",
        //                     id: 2
        //                 }, 
        //                 {
        //                     component: "Third...",
        //                     id: 3
        //                 }
        //             ]
        //         }
        //     }
        //
        //     render() {
        //         return (
        //             <div>
        //               <div>
        //               {/* The map function will create three elements from the data array*/}
        //               {/* Where i is the unique key which will be assigned for each created element*/}
        //                 {this.state.data.map((dynamicComponent, i) => 
        //                  <Content key = {i}componentData = {dynamicComponent}/>)}
        //               </div>
        //             </div>
        //         );
        //     }
        // }
        //
        // class Content extends React.Component {
        //     render() {
        //         return (
        //           <div>
        //             <div>
        //               {this.props.componentData.component}
        //             </div>
        //             <div>{this.props.componentData.id}</div>
        //           </div>
        //         );
        //     }
        // }
        //
        // ReactDOM.render(
        //         //REACT WHAT
        //            <App />,
        //         //REACT WHERE
        //            document.getElementById("app")
        //       );
        // -> If we add or remove some elements in the future or change the order of the 
        // dynamically created elements, React will use the key values to keep track of each element.  
        </script>
</body>

</html>

Note: This is my first post in Dev To and any feedback is welcome.

Happy C❤️ding!!!

Javascript Array Methods You Should/Must Know....

Shashi — Mon, 01 Feb 2021 22:25:12 +0000

There are many array methods in Javascript but I will discuss the ones that are most useful and important.

Before, I delve into those methods. Let's get the basics down.

Okay, First of all, What is an array?
->> An array is a list/collection of values/items/elements that are stored in a special variable or else simply we can define it as "A single special variable which stores multiple values/items/elements". These multiple values can be of same datatype or different datatypes.

Note: I used long descriptive variable names according to its functionality just to understand them better. In general, variable names should be concise and meaningful.

// An Array Example With Same Datatype
let same_datatype = ["HTML", "CSS", "Javascript"]; // string
    console.log(same_datatype); // ["HTML", "CSS", "Javascript"]

// An Array Example With Multiple Datatypes
let multi_datatypes = [
    1, // number
    "Coding", // string
    true, // boolean,
    ["HTML", "CSS", "Javascript"], // array
    {author: "Shash", location: "the U.K"} // object
    ]; 
    console.log(multi_datatypes); 
// 0: 1
// 1: "Coding"
// 2: true
// 3: ["HTML", "CSS", "Javascript"]
// 4: {author: "Shash", location: "the U.K"}

Okay, how do you create an array?

// Syntax: let squareBracket_array = [];
let squareBracket_array = [1, "Javascript", true];

-> We call this way of creating an array as array literal method.

Great! is this the only way to create an array?
Not actually, there's another way.

// Syntax: let keyword_new_array = new Array();
let keyword_new_array = new Array(1, "Javascript", true);

By consoling them, We get the same results.

let squareBracket_array = [1, "Javascript", true];
console.log(squareBracket_array); // [1, "Javascript", true]

let keyword_new_array = new Array(1, "Javascript", true);
console.log(keyword_new_array); // [1, "Javascript", true]

Okay, which one to use then?
-> For simplicity, readability and execution speed, use the former one, the array literal method.

Alright, let's jump into sea of some array methods:

I categorised these array methods into three different sections:

1. Add/Remove Array Methods:

push() Method: - This method adds element/s at the end of an array and returns the new length.

Syntax:

array.push(element1, element2, ..., elementX); // Parameters are required

Example:

let add_element_at_the_end = ["HTML", "CSS", "Javascript"]; 
    add_element_at_the_end.push("PHP");

    console.log(add_element_at_the_end); // ["HTML", "CSS", "Javascript", "PHP"]

Notes:

push() method takes argument/s.
push() method returns new array length.

pop() Method: - This method removes the last element of an array and returns that element.

Syntax:

array.pop(); // No Parameter/s are required

Example:

let remove_element_at_the_end = ["HTML", "CSS", "Javascript"]; 
    remove_element_at_the_end.pop();

    console.log(remove_element_at_the_end); // ["HTML", "CSS"]

Notes:

pop() method takes no argument/s.
pop() method returns removed element from the array.
pop() method returns new array length.

unshift() Method:- This method adds new element/s at the beginning of an array.

Syntax:

array.unshift(element1, element2, ..., elementX); // Parameters are required

Example:

let add_element_at_the_start = ["CSS", "Javascript"]; 
    add_element_at_the_start.unshift("HTML");

    console.log(add_element_at_the_start); // ["HTML", "CSS", "Javascript"]

Notes:

unshift() method takes argument/s.
unshift() method returns new array length.

shift() Method:- This method removes first element of an array.

Syntax:

array.shift(); // No Parameter/s are required

Example:

let remove_element_at_the_start = ["HTML", "CSS", "Javascript"]; 
    remove_element_at_the_start.shift();

    console.log(remove_element_at_the_start); // ["CSS", "Javascript"]

Notes:

shift() method takes no argument/s.
shift() method returns removed element from the array.
shift() method returns new array length.

splice() Method:- This method adds/removes elements to/from an array. Basically, It’s a method which changes the content of an array by adding the new elements or removing the old one's.

Syntax:

array.splice(index, how many, element1, ....., elementX);
// "index" parameter is required whereas "how many" and "element1, ....., elementX" are optional.

Let's examine both:

->splice() Add Method:- This method adds new element/s on a specified position in an array and returns the deleted elements (if any).

Example:

let splice_add = ["HTML", "CSS", "Javascript"];
    splice_add.splice(2, 1, "PHP", "SQL");

    console.log(splice_add); //["HTML", "CSS", "PHP", "SQL"] 
/* Explanation:
First parameter (2) defines the index where we want the new elements to be added. In this case, we want to add the new elements on the JavaScript position. 
Second parameter (1) defines how many element/s we want to remove. In this case, we want to remove only one element i.e, JavaScript. 
Rest of the parameters, In this case ("PHP", "SQL") defines the new elements that are going to be added. 
*/

In a nutshell, it looks like this

Original Array - ["HTML", "CSS", "Javascript"]; 
New Array - ["HTML", "CSS", "PHP", "SQL"];
Removed Element - Javascript;

->splice() Remove Method:- This method removes element/s on a specified position in an array with no new element/s will be added.

Example:

let splice_remove = ["HTML", "CSS", "Javascript"]; 
    splice_remove.splice(0, 1);

    console.log(splice_remove); // ["CSS", "Javascript"]
/* Explanation:
First parameter (0) defines the index of the element that needs to be removed. In this case, we want to remove "HTML" element. 
Second parameter (1) defines, how many element/s we want to remove. In this case, we want to remove only one, "HTML" element.

In a nutshell, it looks like this

Original Array - ["HTML", "CSS", "Javascript"]; 
New Array - ["CSS", "Javscript"];
Removed Element - HTML;

Notes:

splice() method changes the original array.
splice() method can be used to add/remove any element in an array where as push, pop, shift and unshift methods performs only designated positions.

slice() Method: This method creates a new array by slicing out a piece of an original array.

Syntax:

array.slice(start, end); 
// Both "start" and "end" are optional parameters

Example:

let slice_array = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
let new_slice_array = slice_array.slice(2);

console.log(new_slice_array); // ["Javascript", "PHP", "SQL"]
/* Explanation: 
The above example slices out a part of original array, i.e, slice_array starting from an array element position at 2 ("Javascript") and stores it in the new array called new_slice_array. 
*/

Notes:

The slice() method returns the selected elements in an array, as a new array object.
The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.
slice() method doesn't remove any elements from the original/source array.
The original array will not be changed.

concat() Method: This method creates a new array by combining/merging/concatenating existing arrays.

Syntax:

array1.concat(array2, array3, ..., arrayX);
// Parameters are required

Example:

let frontEnd_lang = ["HTML", "CSS", "Javascript"];
let backEnd_lang = ["PHP", "Python", "Java"];
let fullStack_lang = frontEnd_lang.concat(backEnd_lang);
console.log(fullStack_lang); // ["HTML", "CSS", "Javascript", "PHP", "Python", "Java"]

Notes:

concat() method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

2. Searching Array Methods:

indexOf() Method: This method returns the position of the first occurrence of a specified value in a string. If the searched value didn't exist, it returns -1.

Syntax:

array.indexOf(item, start);
// parameter "item" is required but "start" parameter is optional

Example:

let reg_str = "Search a string using indexOf method";
let index_str = reg_str.indexOf("indexOf");
    console.log(index_str); // 22
// Start counting the characters of given string from zero including spaces and we will find the first occurrence of indexOf with "i" being at position 22.

let reg_str = "Search a string using indexOf method";
let index_str = reg_str.indexOf("!");
    console.log(index_str); // -1
// "!" didn't existed in the string, so it returned -1 as expected.

Notes:

The indexOf() method searches the array for the specified item, and returns its position.
The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array.
If the item is present more than once, the indexOf method returns the position of the first occurrence.

includes() Method: This method determines whether the characters of a specified string is included or not in a given string. It returns true if it's included and false otherwise.

Syntax:

array.includes(element, start);
// parameter "element" is required but "start" parameter is optional

Example:

let reg_str = "Javascript array methods you should know";
let include_str = reg_str.includes("array");
console.log(include_str); // true 

let reg_str = "Javascript array methods you should know";
let include_str = reg_str.includes("arrays");
console.log(include_str); // false

Notes:

The includes() method is case sensitive.

filter() Method: This method creates an array filled with all array elements that pass a condition (provided as a function).

Syntax:

array.filter(function(currentValue, index, arr), thisValue);
// function(currentValue, index, arr) is required but "thisValue" is optional.

Examples:

// Filter the given array by removing single item
let web_lang = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
let lang_to_remove = "SQL";
let filtered_langs = web_lang.filter(lang => lang !== lang_to_remove);

console.log(filtered_langs); // ["HTML", "CSS", "Javascript", "PHP"]

// Filter the given array by removing multiple items
let web_lang = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
let langs_to_remove = ["PHP", "SQL"];
let filtered_langs = web_lang.filter(lang => !langs_to_remove.includes(lang));

console.log(filtered_langs); // ["HTML", "CSS", "Javascript"]

Notes:

filter() method does not execute the function for array elements without values.
filter() method does not change the original array.

findIndex() Method: This method returns the index of the first element in an array that pass a condition (provided as a function) and it returns -1 if it doesn't find any array element. Basically, it's very similar to find method, the only difference is, it returns the index instead of a value. ####Syntax:

array.findIndex(function(currentValue, index, arr), thisValue);
// function(currentValue, index, arr) is required but "thisValue" is optional.

Example:

let web_lang = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
let lang_index = web_lang.findIndex(lang => lang === "Javascript");
    console.log(lang_index); // 2

let web_lang = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
let lang_index = web_lang.findIndex(lang => lang === "Bootstrap");
    console.log(lang_index); // -1

Notes: Both filter() and findIndex() methods does not execute the function for array elements without values and both does not change the original array.

3. Transforming Array Methods:

map(func) Method: This method creates a new array from results of calling function for every element.

Syntax:

array.map(function(currentValue, index, arr), thisValue);
// currentValue is a required parameter whereas index, arr and thisValue are optional.

Example:

// Using regular function
let original_arr = [1, 2, 3, 4, 5];
let new_arr = original_arr.map(function(num){ 
    return num * 5;
});
    console.log(new_arr); // [5, 10, 15, 20, 25]

//Using arrow function
let original_arr = [1, 2, 3, 4, 5];
let new_arr = original_arr.map(num => num * 5);
    console.log(new_arr); // [5, 10, 15, 20, 25]

Notes:

This method neither execute the function for array elements without values nor change the original array.

sort(func) Method: This method sorts the items of an array either alphabetically or numerically, in either ascending(up) or descending(down) order and returns the sorted array.

Syntax:

array.sort([compareFunction]);
// compareFunction is an optional parameter. When it is not provided - all the array elements are converted to strings.

Example:

//Default behaviour 
let sort_array = ["d", "c", "b", "a"];
    sort_array.sort();
    console.log(sort_array); // ["a", "b", "c", "d"] (sorts alphabetically in ascending order)

let sort_array = [4, 3, 2, 1];
    sort_array.sort();
console.log(sort_array); // [1, 2, 3, 4] (sorts numerically in ascending order)

 // Using compareFunction
// Sort numbers in an array in ascending order:
// Using regular function
let scores = [5, 6, 1, 2, 4, 3];
scores.sort(function(x, y){return x-y});
console.log(scores); // [1, 2, 3, 4, 5, 6]

// Using arrow function 
let scores = [5, 6, 1, 2, 4, 3];
scores.sort((x, y) => x-y);
console.log(scores); // [1, 2, 3, 4, 5, 6]

// Sort numbers in an array in descending order:
// Using regular function
let scores = [5, 6, 1, 2, 4, 3];
scores.sort(function(x, y){return y-x});
console.log(scores); // [6, 5, 4, 3, 2, 1]

// Using arrow function
let scores = [5, 6, 1, 2, 4, 3];
scores.sort((x, y) => y-x);
console.log(scores); // [6, 5, 4, 3, 2, 1]

Notes:

By default, the sort() method sorts the values as strings in alphabetical and ascending order.
This method changes the original array.

reverse() Method: This method reverses the order of the elements in an array and then returns it.

Syntax:

array.reverse();

Example:

let reverse_array = ["HTML", "CSS", "Javascript", "PHP", "SQL"];
    reverse_array.reverse();
    console.log(reverse_array); // ["SQL", "PHP", "Javascript", "CSS", "HTML"]

Notes:

This method will change the original array.

split() Method: This method is used to split a string into an array of substrings, and returns the new array.

Syntax:

str.split();

Example:

let string = "Coding is my passion!";
let split_string_into_words = string.split(" ");

console.log(split_string_into_words); // ["Coding", "is", "my", "passion!"]

let string = "Coding is my passion!";
let split_string_into_chars = string.split("");

console.log(split_string_into_chars); // ["C", "o", "d", "i", "n", "g", " ", "i", "s", " ", "m", "y", " ", "p", "a", "s", "s", "i", "o", "n", "!"]

Notes:

The split() method does not change the original string.

join() Method: This method converts the elements of an array into a string. The elements will be separated by a specified separator. The default separator is comma (,).

Syntax:

array.join(separator);
// The separator is an optional. If omitted, the elements are separated with a comma(,).

Example:

// Eg, join() method with no string passed. 
let array_strings = ["Coding", "is", "my", "passion"];
let join_strings = array_strings.join();

console.log(join_strings); // Coding,is,my,passion

// Eg, join() method with empty string but without space.
let array_strings = ["Coding", "is", "my", "passion"];
let join_strings = array_strings.join("");

console.log(join_strings); // Codingismypassion

// Eg, join() method with empty string but with a space. 
let array_strings = ["Coding", "is", "my", "passion"];
let join_strings = array_strings.join(" ");

console.log(join_strings); // Coding is my passion

// Eg, join() method with dash(-) string.
let array_strings = ["Coding", "is", "my", "passion"];
let join_strings = array_strings.join("-");

console.log(join_strings);// Coding-is-my-passion

Notes: The join() method will not change the original array.

More methods will be added soon.....

Until then, Happy C❤️ding...