Example state

react_tour/src/App.js

@@ -1,13 +1,17 @@
-
-import MyComponent from './components/Component/co';
-import Component2 from './components/co2/Component2';
-
+import MyComponent from "./components/Component/co";
+import Component2 from "./components/co2/Component2";
+import Jsx from "./Jsx/jsx";
+import Example from "./exampleState/exampleState";
+import ExampleWithManyStates from "./exampleState/multipleState";
 
 function App() {
   return (
     <div className="App">
-    <MyComponent/>
-    <Component2/>
+      <Jsx />
+      <MyComponent />
+      <Component2 />
+      <Example />
+      <ExampleWithManyStates />
     </div>
   );
 }

react_tour/src/Jsx/README.md

@@ -0,0 +1,40 @@
+What is jsx,
+How jsx works and
+What is really done behind the scene after writing jsx
+
+React is an Open Source view library created and maintained by Facebook. It's a great tool to render the User Interface (UI) of modern web applications.
+
+React uses a syntax extension of JavaScript called JSX that allows you to write HTML directly within JavaScript. This has several benefits. It lets you use the full programmatic power of JavaScript within HTML, and helps to keep your code readable. For the most part, JSX is similar to the HTML that you have already learned
+
+Because JSX is a syntactic extension of JavaScript, you can actually write JavaScript directly within JSX. To do this, you simply include the code you want to be treated as JavaScript within curly braces: { 'this is treated as JavaScript code' }
+
+However, because JSX is not valid JavaScript, JSX code must be compiled into JavaScript. The transpiler Babel is a popular tool for this process
+
+JSX stands for JavaScript XML.
+JSX allows us to write HTML in React.
+JSX makes it easier to write and add HTML in React.
+
+
+Example of simple JSX
+
+```JS
+const JSX = <h1>
+Hello JSX!
+</h1>;
+```
+
+Example of a Complex JSX where  JSX can represent more complex HTML as well.
+
+Nested JSX it must return a single element this one parent element would wrap all of the other levels of nested elements.
+```JS
+const JSX =
+<div>
+<h1>Nested JSX</h1>
+<p>This is our example</p>
+<ul>
+<li>paragraph</li>
+<li>paragraph</li>
+<li>paragraph</li>
+</ul>
+</div>
+```

react_tour/src/Jsx/jsx.js

@@ -0,0 +1,7 @@
+import '../Style/jsx.css'
+function Jsx() {
+  const myelement = <h1>Example of JSX!</h1>;
+  return <div className="exjsx">{myelement}</div>;
+}
+
+export default Jsx;

react_tour/src/Style/components.css

@@ -0,0 +1,4 @@
+.comp{
+    background-color: rgb(96, 221, 96);
+    margin: 50px;
+}

react_tour/src/Style/exampleState.css

@@ -0,0 +1,4 @@
+.exState{
+    background-color: aqua;
+    margin: 50px;
+}

react_tour/src/Style/jsx.css

@@ -0,0 +1,4 @@
+.exjsx{
+    background-color: yellow;
+    margin: 50px;
+}

react_tour/src/components/Component/co.js

@@ -1,13 +1,12 @@
-import React from 'react';
+import React from "react";
+import '../../Style/components.css'
 class MyComponent extends React.Component {
-    constructor(props) {
-      super(props);
-    }
-    render() {
-        return (
-            <h1>This is example of Class component</h1>
-          );
-    }
-  };
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <h1 className="comp">This is example of Class component</h1>;
+  }
+}
 
-  export default MyComponent;
+export default MyComponent;

react_tour/src/components/README.md

@@ -8,23 +8,21 @@ There are two ways to create a React component.
 (1) The first way is to use a JAVASCRIPT FUNCTION.
 
 Example;
-```JS
 function Component2() {
     return (
       <div >
-        <h1>This is Function component</h1>
+<h1>This is Function component</h1>
       </div>
     );
   }
 export default Component2
-```
 
 To create a component with a function, you simply write a JavaScript function that returns either JSX or null. One important thing to note is that React requires your function name to begin with a CAPITAL letter. Above is an example of a stateless functional component that return div element that contain head 1 element
 
 (2)The other way to define a React component is with the ES6 CLASS syntax.
 
 Example;
-```JS
+
 class MyComponent extends React.Component {
     constructor(props) {
       super(props);
@@ -35,7 +33,6 @@ class MyComponent extends React.Component {
           );
     }
   };
-```
 
 The above creates an ES6 class MyComponent which extends the React.Component class.
-Also notice the MyComponent class has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, in this case React.Component. The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component's constructor with super, and pass props to both. This makes sure the component is initialized properly.
+Also notice the MyComponent class has a constructor defined within it that calls super(). It uses super() to call the constructor of the parent class, in this case React.Component. The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component's constructor with super, and pass props to both. This makes sure the component is initialized properly.

react_tour/src/components/co2/Component2.js

@@ -1,10 +1,10 @@
 
 function Component2() {
-    return (
-      <div >
-<h1>This is example of Function component</h1>
-      </div>
-    );
-  }
-  
-export default Component2
+  return (
+    <div>
+      <h1 className="comp">This is example of Function component</h1>
+    </div>
+  );
+}
+
+export default Component2;

react_tour/src/exampleState/README.md

@@ -0,0 +1,204 @@
+React components has a built-in state object. The state object is where you store property values that belongs to the component.
+State consists of any data your application needs to know about, that can change over time. When the state object changes, the component re-renders.
+
+You create state in a React component by declaring a state property on the component class in its constructor. This initializes the component with state when it is created. The state property must be set to a JavaScript object. Declaring it looks like this:
+
+```JS
+this.state = {
+
+}
+```
+
+You have access to the state object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The state object can be as complex or as simple as you need it to be. Note that you must create a class component by extending React.Component in order to create state like this.
+
+The state object is initialized in the constructor:
+Class example
+
+```JS
+class Car extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        brand: "Ford"
+        };
+  }
+  render() {
+    return (
+      <div>
+        <h1>My Car</h1>
+      </div>
+    );
+  }
+}
+```
+
+Refer to the state object anywhere in the component by using the ( this.state.propertyname ) syntax
+
+```JS
+class Car extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+        brand: "Ford",
+        color: "red"
+        };
+  }
+  render() {
+    return (
+      <div>
+        <h1>My Car {this.state.brand}</h1>
+        <p> It is a {this.state.color} in color</p>
+      </div>
+    );
+  }
+}
+```
+
+To CHANGE a value in the state object, use the this.setState() method
+When a value in the state object changes, the component will re-render, meaning that the output will change according to the new value(s).
+
+Add a button that will change color;
+
+```JS
+class Car extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      brand: "Ford",
+      color: "red"
+    };
+  }
+  changeColor = () => {
+    this.setState({color: "blue"});
+  }
+  render() {
+    return (
+      <div>
+        <h1>My Car {this.state.brand}</h1>
+        <p> It is a {this.state.color} in color</p>
+        <button
+          type="button"
+          onClick={this.changeColor}
+        >Change color</button>
+      </div>
+    );
+  }
+}
+```
+
+How to declare a new state in react using useState hook? Assuming we use functional components in this whole journey.
+How to update state?
+State accepts any type of data from strings, booleans, arrays, objects, numbers etc, how to update a single key in an object while leaving other keys unaffected? How to update array data( adding or removing an item in an array)?
+Assume array of objects is passes as a state, how to update a single key in a single object of an array without affecting other keys of a particular object and without affecting other objects in the array?
+
+Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
+
+//Function example
+
+```JS
+import React, { useState } from 'react';
+
+function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+```
+
+function components in React look like this:
+
+```JS
+const Example = (props) => {
+  // You can use Hooks here!
+  return <div />;
+}
+```
+
+or this
+
+```JS
+function Example(props) {
+  // You can use Hooks here!
+  return <div />;
+}
+```
+
+You might have previously known these as “stateless components”. We’re now introducing the ability to use React state from these, so we prefer the name “function components”.
+Hooks don’t work inside classes. But you can use them instead of writing classes.
+
+The following example starts by importing the useState Hook from React:
+
+```JS
+import React, { useState } from 'react';
+
+function Example() {
+  // ...
+}
+```
+
+What is a Hook?
+A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add React state to function components. There ae other Hooks in React.
+
+When to use a Hooks
+If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component
+
+Hooks are similar to JavaScript functions, but you need to follow these two rules when using them
+(a)Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.
+(b)You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.
+
+Declaring a State Variable
+In a function component, we have no this, so we can’t assign or read this.state. Instead, we call the useState Hook directly inside our component
+
+```JS
+import React, { useState } from 'react';
+
+function Example() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0);
+```
+
+We declare a state variable called count, and set it to 0. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current count, we can call setCount.
+
+Reading State:
+In a function, we can use count directly:
+
+```JS
+ <p>You clicked {count} times</p>
+```
+
+Updating State:
+In a function, we already have setCount and count as variables so we don’t need this:
+
+```JS
+ <button onClick={() => setCount(count + 1)}>
+    Click me
+  </button>
+```
+
+Using Multiple State Variables
+
+Declaring state variables as a pair of [something, setSomething] is also handy because it lets us give different names to different state variables if we want to use more than one:
+
+```JS
+function ExampleWithManyStates() {
+  // Declare multiple state variables!
+  const [age, setAge] = useState(42);
+  const [fruit, setFruit] = useState('banana');
+  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
+In the above component, we have age, fruit, and todos as local variables, and we can update them individually:
+
+  function handleOrangeClick() {
+    // Similar to this.setState({ fruit: 'orange' })
+    setFruit('orange');
+  }
+```
+
+You don’t have to use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.