Skip to content

Latest commit

 

History

History
72 lines (45 loc) · 2.68 KB

README.md

File metadata and controls

72 lines (45 loc) · 2.68 KB

ReactJS Logo. Subjected to Copyright. Facebook Inc. From Wikimedia.org

ReactJS.GetAPIData.snippet

Use an API data and output API data into Bootstrap4 cards.

version: 0.0.134

Author: Vernard Mercader

Credit: Samer Buna

Live: http://vmdataserv.com/react-apidata/

Keywords: React,Express,Node,Webpack,Babel,Axios,Bootstrap4

I'm going to build an environment using NodeJS, Express and Webpack, then React-away from there. The goal for this small react Module is to use a simple Method that grabs API AJAX data and output an API "Document" as a card containing information to a specific unique key. I'll be using Bootstrap4 framework—through react—designing the UI, and the API will be from GitHub. The module is simple: it consists of a textbox and a submit button that will accept a valid GitHub username (and displays an error alert If the user name is invalid), and on user execution, it will display a rectangular card containing the GitHub User's Profile Name, Profile Company, Link to the GitHub Profile, and their Avatar Image.

Init:

To start the project in Node:

npm -y init

Install necessities

  1. npm install --save express react react-dom
  2. npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/plugin-proposal-class-properties html-webpack-plugin

After initialisation, creating the entry point (start.js (others like it app.js))

Additionally, run the following:

  • npm i --save-dev clean-webpack-plugin
  • npm install jquery
  • npm install --save-dev jquery popper.js
  • npm install bootstrap
  • npm i --save-dev react-bootstrap
  • npm install less
  • npm i --save-dev less-loader
  • npm i --save-dev css-loader style-loader postcss-loader
  • npm i --save-dev autoprefixer cssnano
  • npm i --save-dev mini-css-extract-plugin
  • npm i --save-dev less-plugin-clean-css
  • npm i --save-dev file-loader
  • npm i --save-dev terser-webpack-plugin
  • npm i --save-dev axios

##Running the Module

To compile the build, run

npm run build

or

npx webpack

To preview the build using a Localhost server, run

node start.js

Previews

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4

What else can I do?

Maybe in later a version, I can:

  • Add Transitions/Animations
  • Selectively remove a card from the display
  • remove all cards button (reset)