React Examples

Here are my React examples and projects.

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)
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.