SWAPI – APP

Basic Application using: SWAPI

GitHub Repository: Dynamic—SWAPI—2

Here is the Code:

 

.

Category: React | Comments Off on SWAPI – APP

React Forms

The chart above shows the flow of the data, input by a user and process by React using the states.

GitHub Repo with examples: React Form Practice

Code Example:

In the following example we capture the code provided by the user and then create a new <jsx> element with the data from the user, then rend it to the DOM.

Code:

 

 

Another example using the props to storage the data input by the user:

Code:

.

Category: React | Comments Off on React Forms

React Basics 2

Here are some of my notes while learning React.js

Basic Elements in a component:

The Code:

 

 

.

Category: React | Comments Off on React Basics 2

Princess Rap Battles

This site is a little practice of using Create-React-App, React-Router, BootsTrap, ReactStrap …

Live App: www.rap.mycode.website

Full project in GitHub: Princess-Rap-Battles

On the NPM side we need to install the following dependencies:

Here is a look to the code:

Note on “index.js” menu: <NavItem> belongs to ‘reactstrap‘, but inside you will find the <Link> that belongs to the ‘react-router-dom

 

The following is another code example of React-Router

 

.

Category: React | Comments Off on Princess Rap Battles

React Router: Bare-Bones

For more information see the ReactTraining / React Router Docs: Link

For the full project GitHub repo: React-Router-Bare-Bones

In the following example I start with a clean sleeve of Create-React-App then I install the following dependencies:

Then I create the following File-Tree:

Here is quick look a the code:

Category: React | Comments Off on React Router: Bare-Bones

React Pong

A classic with a React Spin.

Here is one very simple code of the game pong, written in React.js / JavaScript, this still work in progress, for that reason you might find some bugs, better code comming soon.

This game is functional, and and you can play it today…

GitHub Repo: React-Pong

Code:

.

Category: React | Comments Off on React Pong

Searching U.S. Senators

Find the full project in GitHub: Search U.S. Senators   use branch “br1”

Fine the Live App: Search-Senators

For a quick peek at the code: 

 

.

Category: React | Comments Off on Searching U.S. Senators

Rending Data: U.S. Senators

Basic practice for sorting data from a “json” file and reusing a Template component by pasing the data through the props.

Find the GitHub repository: React-Props-U.S.-Senators    —     Senators-2

This project will render:

The code is:

.

Category: React | Comments Off on Rending Data: U.S. Senators

Fetch-&-Map(…)

This basic project shows how to Fetch data from an API and map(…) to React-Virtual-DOM, re-using the same component.

For more info see this other Blog-Post: XMLHttp  —   Fetch()..API–JavaScript

The data comes from a file “data.json” hosted in my GitHub, click to see: data.json

Download the full project from GitHub:  Fetch-&-Map(…)

This project will render:

Here you can see 3 of the 10 elements rendered.

Code:

I hope this was useful.

Star Wars API  –  SWAPI

This is a basic example in how to use the SWAPI, the following is the React.js code to pull the name of Luke Skywalker, in this code example we are not making any queries, so ignore the value of this.state.search. the character query is hard-coded. in the URL  const srcAPI  = “https://swapi.co/api/people/1” with the sufix:  …/people/1 

 

SWAPI Find character by Number:

The code for this is on this Repo: Star Wars API – SWAPI-1

 

Find Countries by Population:

Using the API: https://restcountries.eu/#rest-countries

 

.

Category: React | Comments Off on Fetch-&-Map(…)

Senator Marco Rubio – .json

This is one basic application that takes data from a locally hosted “sen.json” file that contains data from the 50 Senators, then manipulate it using data.filter(***).map(***).reduce(***) to obtain only the information of Marco Rubio, then uses Component-State to display it on the screen for 2 seconds when the <button> is click.

Note: the images are not in the .json file but are passed through “this.state.pic

 

After Button click

Here is the GitHub-Repo

Code: 

I hope this was helpful…

Category: React | Comments Off on Senator Marco Rubio – .json

Asuka – React State Change

Basic code for React State Change, in the following example we have one Component call “Pilot”, with the picture of Asuka Langley Soryu from Neon Genesis Evangelion, then we ask what county is she from, and the answer will be show when you push the button, the following <iframe> is a window to the live React.js-App, to see it on your browser click this LINK

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

www.asuka.mycode.website

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Here is the GitHub-Repo-Link

Code:

Copy and play with the code.

TV-Time-React-State

Another GitHub Repo with similar content: TV-Time-React-State

The code in that repo would render the following:

Copy and play with the code.

Swap Characters

Another GitHub Repo with similar content: Swap-Characters

The code in that repo would render the following:

and when the button is click:

Code:

Click to see: data.json

I hope this was helpful…

Category: React | Comments Off on Asuka – React State Change

Singers & Movies: Profiles

This is a basic project were we create one component and reused several times for different profiles of singers.

Code & Pictures can be found in this: REPO

Code:

for more details see the repo.

 

 

Array of Objects – Iteration with React.js

Here is another way to create the same profile, but this time the data is provided from an Array of Objects.

For more details here is the REPOSITORY

In this case what happen is that in the file: “index.js” we have an Array of Objects with the data and pic-url of each singer, then we pass the array as props to the component “Profile.jsx” and we create each profile dinamically using “.map(…)” and reusing a single profile template.

apps created using create-react-app.

 

 

Movies Profile

This is is another way to build dynamic profile elements with and Array of Object passed from the parent element via the props.

To play with this code you can download it from this REPOSITORY.

To see the differences see the code below

for a better understanding get the code from GitHub and play with it in the computer.

.

Category: React | Comments Off on Singers & Movies: Profiles

Reactstrap – Linkin Park

Here is some documentation in how to use a library call: “REACTSTRAP

This library can be help with fast creation of: “COMPONENTS

Fast creation of: Menus, Forms, Buttons, Navs, Pagination, Tables, etc….

for more information about what version of BootStrap: Link  –  Vid1 – GitHub

 

STYLING COMPONENTS

  1. Styled-components
  2. Glamorus

 

Here is a basic Responsive layout created with Create-React-App + Bootstrap

File Tree

Here is the code: