React Examples
Here are my React examples and projects.
My React Projects on Github
- Burger Builder | Burger Building app demo.
- Http – Ajax Intro | Demo of using Ajax to get requests.
- JSX Intro | Demo of JSX syntax.
- Person Manager JSX Demo | Demo using lists in JSX.
- Components | Comment demo using components.
- Seasons-Display | A seasons Demo App. Live Demo
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.