First Experience Using React.JS

Bismillah,

Today, I want to explore my experience in web development with ReactJS. React-Native and ReactJS actually not have a big difference in programming language syntax. That is why I try to develop my web using ReactJS. 🙄

Login Material UI ReactJS

How To Install ReactJS

npx create-react-app nameapps
cd nameapps
npm start

from the code above first, we need to create-react-app which is install dependencies react-js. Then, change your directory terminal to your name project apps and start your program.

Install UI Modules

I utilize Material-UI Framework to make a more beautiful UI. You can check in this link. https://material-ui.com/

Or you can fast install with this code in your terminal:

npm install @material-ui/core

My Dashboard Using MaterialUI

For free template: https://material-ui.com/getting-started/templates/

Install Route/ Navigation

To change between pages on the web. You can use react-router. With Install:

npm install react-router-dom

Step by Step Configurate React-Router:

1. Adding BrowserRouter in index.js

Adding BrowserRouter

2. Adding Route in the page component

Route-Dom

3. To Change Page

Install Axios

Axios is Promise based HTTP client. Therefore, if you want to obtain the data from API you can use this.

Hooks to get Data using Axios

in this example, I load my data when the window is loaded. And, store my data in variable dataSales.

Solving Access HTTP API in React JS

API

I append some code in my Restfull-API like the picture above. And Adding Allow Origin to in my ReactJS.

Display The Data

Display the Data

To show the data, mapping can be one of the solutions in reactJS. Because this is easy and simple to use.

If you have any questions. You can contact me. Enjoy Coding!! 😁😁