React Examples

React is a flexible Javascript library for building user interfaces. It allows for complex UI’s of isolated code called “components”.  Here are my React projects, examples, notes, shortcuts, references and tips.  It’s to help me remember and learn the React language.

My React Projects on Github

eResources

  • React JS: A JavaScript library for building user interaces
  • Node JS: Open-source, cross-platform-back-end, JavaScript enviroment that excutes JavaScript code outside a web browser.
  • NPM: A package manager or repository for open-source Node JavaScript Modules.
  • Create-App-React: Starter Files and Scripts for new React Apps.  install: npx create-react-app myapp
  • Firebase:  Googles hosting for apps.
  • Axios: a client HTTP API based on XMLHttpRequest allows us to fetch resources and make HTTP requests.  install:  npm install axios –save
  • Axios Cheat Sheet: Some help for Axios
  • Semantic-UI: opensource CSS framework.
  • Semantic-UI CDN:  CDN links for Semantic-UI.
  • JSONPlaceholder: fake data for development
  • Faker JS: fake data for development

Deploying Create-React-App Locally

To create a new react project, type: npx create-react-app myapp

NPM Terminal Commands 

To start the app, type:  npm start
URL: http://localhost:3000

To stop the app, press:  Ctrl + C

Deploying Create-React-App on Firebase

Create a new React project:  npx create-react-app your-app
Install Firebase:  npm install firebase-tools -g
Log into Firebase: firebase login
Initialize Firebase: firebase init
(select: Hosting: Configure and deploy Firebase Hosting sites)
(select: Use an existing project)
(select: Your Project)
(What do you want to use as your public directory? : build)
(Configure as a single-page app (rewrite all urls to /index.html)?: Yes)
(All the rest of the questions: No, unless you need it)

Quick Commands
Build the app:  npm run build
To Deploy on Firebase: firebase deploy

JSX Syntax

To avoid JS and CSS conflicts with class=”style:atr;”  Change  class=  to  className=

For inline styles change ” ” to {{ }}, for compound property names, remove dash and change to Camel case, then attribute in double quotes.  Separate multiple styles with a comma.

props means Properties. Use props to pass elements from parent to children.