AXIOS get API with ReactJs

buat folder react seperti biasa dan instal axios
siapkan file root inde.js/App.js biasanya
oiya untuk data API nya kalian bisa menggunakan https://jsonplaceholder.typicode.com/users


Root index.js

1. import React from "react";  
2. import ReactDOM from "react-dom";  
3. import Navbar from "./component/Navbar";  
4. import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";  
5.   
6. import HomePage from "./pages/home-pages";  
7. import ContactPage from "./pages/contact-pages";  
8. import AboutPage from "./pages/about-pages";  
9.   
10. import "./styles.css";   
11.   
12. function App() {  
13.   return (  
14.     <Router>  
15.       <div className="App">  
16.         <Navbar />  
17.         <Route path="/" exact component={HomePage} />  
18.         <Route path="/about" exact component={AboutPage} />  
19.         <Route path="/contact" exact component={ContactPage} />  
20.       </div>  
21.     </Router>  
22.   );  
23. }  
24.   
25. const rootElement = document.getElementById("root");  
26. ReactDOM.render(<App />, rootElement);  

buat folder componen kemudian buat file disini saya membuat file navbar.js

1. import React, { Component } from "react";  
2. import { Link } from "react-router-dom";  
3.   
4. export default class Navbar extends Component {  
5.   constructor(props) {  
6.     super(props);  
7.     this.state = {  
8.       menus: [  
9.         { label: "Home", path: "/" },  
10.         { label: "About", path: "/about" },  
11.         { label: "Contact", path: "/contact" }  
12.       ]  
13.     };  
14.   }  
15.   render() {  
16.     return (  
17.       <ul>  
18.         {this.state.menus.map(menu => (  
19.           <li style={styles.menuLi}>  
20.             <Link to={menu.path}>{menu.label}</Link>  
21.           </li>  
22.         ))}  
23.       </ul>  
24.     );  
25.   }  
26. }  
27.   
28. const styles = {  
29.   menuLi: {  
30.     display: "inline-block",  
31.     padding: "10px",  
32.     background: "#eaeaea"  
33.   }  
34. };  

buat folder pages untuk halamannya, disini asaya membuat folder home-pages.js about-pages.js dan contact-pages.js

1. import React, { Component } from "react";  
2. import axios from "axios";  
3.   
4. class HomePage extends Component {  
5.   constructor(props) {  
6.     super(props);  
7.     this.state = {  
8.       users: []  
9.     };  
10.   }  
11.   componentWillMount() {  
12.     const url = "https://jsonplaceholder.typicode.com/users";  
13.   
14.     axios.get(url).then(users => {  
15.       //data dari API console.log  
16.       console.log(users.data);  
17.       this.setState({  
18.         users: users.data  
19.       });  
20.     });  
21.   }  
22.   
23.   render() {  
24.     const { users } = this.state;  
25.     return (  
26.       <div>  
27.         {users.length < 1 && <div>Loading...</div>}  
28.         {users.map((user, idx) => {  
29.           return (  
30.             <div key={idx}>  
31.               <div> Name : {user.name}</div>  
32.             </div>  
33.           );  
34.         })}  
35.       </div>  
36.     );  
37.   }  
38. }  
39.   
40. export default HomePage;  

jalankan maka hasilnya akan seperti ini

oke sekian next kita akan membuat menggunakan method post 
wassalamualaiku wr.wb jangan lupa titik koma :D

Routing di ReactJs

Sedikit penjelasan jadi Routing itu intinya menampilan single page app dalam sebuah website :D
Point yang paling terpenting itu adalah harus menginstal react-router-dom sebagai dependenciesnya dengan terminal

kali ini saya buat di codesanbox, pakai text editor apapun bisa

Oke pertama-tama masuk ke menu index.js atau rootnya 

1. import React from "react";  
2. import ReactDOM from "react-dom";  
3. import Navbar from "./component/Navbar";  
4. import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";  
5.   
6. import HomePage from "./pages/home-pages";  
7. import ContactPage from "./pages/contact-pages";  
8. import AboutPage from "./pages/about-pages";  
9.   
10. import "./styles.css";  
11.   
12. function App() {  
13.   return (  
14.     <Router>  
15.       <div className="App">  
16.         <Navbar />  
17.         <Route path="/" exact component={HomePage} />  
18.         <Route path="/about" exact component={AboutPage} />  
19.         <Route path="/contact" exact component={ContactPage} />  
20.       </div>  
21.     </Router>  
22.   );  
23. }  
24.   
25. const rootElement = document.getElementById("root");  
26. ReactDOM.render(<App />, rootElement);  

Buat folder dengna nama component dan buat file Navbar.js

1. import React, { Component } from "react";  
2. import { Link } from "react-router-dom";  
3.   
4. export default class Navbar extends Component {  
5.   constructor(props) {  
6.     super(props);  
7.     this.state = {  
8.       menus: [  
9.         { label: "Home", path: "/" },  
10.         { label: "About", path: "/about" },  
11.         { label: "Contact", path: "/contact" }  
12.       ]  
13.     };  
14.   }  
15.   render() {  
16.     return (  
17.       <ul>  
18.         {this.state.menus.map(menu => (  
19.           <li style={styles.menuLi}>  
20.             <Link to={menu.path}>{menu.label}</Link>  
21.           </li>  
22.         ))}  
23.       </ul>  
24.     );  
25.   }  
26. }  
27.   
28. const styles = {  
29.   menuLi: {  
30.     display: "inline-block",  
31.     padding: "10px",  
32.     background: "#eaeaea"  
33.   }  
34. };  

Kemudian buat folder pages untuk tempat link yang dituju nanti, disini saya membuat 3 buah yaitu home-pages.js contact-pages.js dan about-pages.js

1. import React from "react";  
2.   
3. const HomePage = props => {  
4.   return (  
5.     <div>  
6.       <span>Ini halaman Home pages hehe</span>  
7.     </div>  
8.   );  
9. };  
10.   
11. export default HomePage;  

1. import React from "react";  
2.   
3. const ContactPage = props => {  
4.   return (  
5.     <div>  
6.       <span>Ini halaman Contact </span>  
7.     </div>  
8.   );  
9. };  
10.   
11. export default ContactPage;  

1. import React from "react";  
2.   
3. const AboutPage = props => {  
4.   return (  
5.     <div>  
6.       <span>Ini halaman About</span>  
7.     </div>  
8.   );  
9. };  
10.   
11. export default AboutPage;  

Hasilnya akan seperti ini

Oke saya rasa ini cukup untuk pengetahuan dasar mengenai routing di reactJs.

wassalamualaikum wr wb