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
- 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 (Gets Latitude) 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.