the solution before REDUX

react-client/.eslintcache

-[{"/home/mli/react/react-flask-poc/react-client/src/index.js":"1","/home/mli/react/react-flask-poc/react-client/src/reportWebVitals.js":"2","/home/mli/react/react-flask-poc/react-client/src/App.js":"3"},{"size":500,"mtime":1608066788746,"results":"4","hashOfConfig":"5"},{"size":362,"mtime":1608066788746,"results":"6","hashOfConfig":"5"},{"size":528,"mtime":1608066788746,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zligjr",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/mli/react/react-flask-poc/react-client/src/index.js",[],"/home/mli/react/react-flask-poc/react-client/src/reportWebVitals.js",[],"/home/mli/react/react-flask-poc/react-client/src/App.js",[]]
\ No newline at end of file
+[{"/home/mli/react-flask-poc/react-client/src/index.js":"1","/home/mli/react-flask-poc/react-client/src/App.js":"2","/home/mli/react-flask-poc/react-client/src/reportWebVitals.js":"3","/home/mli/react-flask-poc/react-client/src/components/Posts.js":"4","/home/mli/react-flask-poc/react-client/src/components/Postform.js":"5"},{"size":500,"mtime":1608066788746,"results":"6","hashOfConfig":"7"},{"size":276,"mtime":1608079688417,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":1608066788746,"results":"9","hashOfConfig":"7"},{"size":713,"mtime":1608079404067,"results":"10","hashOfConfig":"7"},{"size":1437,"mtime":1608080388800,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1j0yot5",{"filePath":"14","messages":"15","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/mli/react-flask-poc/react-client/src/index.js",[],"/home/mli/react-flask-poc/react-client/src/App.js",["23"],"/home/mli/react-flask-poc/react-client/src/reportWebVitals.js",[],"/home/mli/react-flask-poc/react-client/src/components/Posts.js",[],["24","25"],"/home/mli/react-flask-poc/react-client/src/components/Postform.js",[],{"ruleId":"26","severity":1,"message":"27","line":1,"column":8,"nodeType":"28","messageId":"29","endLine":1,"endColumn":12},{"ruleId":"30","replacedBy":"31"},{"ruleId":"32","replacedBy":"33"},"no-unused-vars","'logo' is defined but never used.","Identifier","unusedVar","no-native-reassign",["34"],"no-negated-in-lhs",["35"],"no-global-assign","no-unsafe-negation"]
\ No newline at end of file

react-client/src/App.css

 .App {
-  text-align: center;
+  width:90%;
+  margin:auto;
 }
 
 .App-logo {

react-client/src/App.js

 import logo from './logo.svg';
 import './App.css';
+import Posts from './components/Posts';
+import Postform from './components/Postform';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <Postform/>
+      <hr/>
+      <Posts/>
     </div>
   );
 }

react-client/src/components/Postform.js

+import React,{Component} from 'react'
+class Postform extends Component{
+    constructor(props){
+        super(props);
+        this.state={
+            title:'',
+            body:''
+        };
+        this.onChange=this.onChange.bind(this);
+        this.onSubmit=this.onSubmit.bind(this);
+    }
+    onChange(e){
+        this.setState({[e.target.name]:e.target.value})
+    }
+    onSubmit(e){
+        e.preventDefault();
+        const post={
+            title:this.state.title,
+            body:this.state.body
+        }
+        fetch('https://jsonplaceholder.typicode.com/posts',
+        {
+            method:'POST',
+            header:{'content-type':'application/json'},
+            body: JSON.stringify(post)
+        }).then(res=>res.json())
+        .then(data=>console.log(data));
+    }
+    
+    render(){
+        return (
+            <div>
+            <h1>Add post</h1>
+            <form onSubmit={this.onSubmit}>
+            <div>
+                <label> Title:</label><br/>
+                <input type="text" name="title" onChange={this.onChange} value={this.state.title}/>
+                
+            </div>
+            <div>
+                <label> body:</label><br/>
+                <textarea name="body" onChange={this.onChange} value={this.state.body}/>
+                
+            </div>
+            <button type='submit'>Submit</button>
+            </form>
+            </div>
+            )
+    }
+}
+
+export default Postform;
\ No newline at end of file

react-client/src/components/Posts.js

+import React,{Component} from 'react'
+class Posts extends Component{
+    constructor(props){
+        super(props);
+        this.state={
+            posts:[]
+        }
+    }
+    componentWillMount(){
+        fetch('https://jsonplaceholder.typicode.com/posts')
+        .then(res=>res.json())
+        .then(data=>{console.log(data);this.setState({posts:data});})
+    }
+    render(){
+        const postItems=this.state.posts.map(post=>(
+            <div key={post.id}>
+            <h3>{post.title}</h3>
+            <p>{post.body}</p>
+            </div>
+            ));
+        return (
+            <div>
+            <h1>post</h1>
+            {postItems}
+            </div>
+            )
+    }
+}
+
+export default Posts;
\ No newline at end of file