/ReactProjects

A summary of my React projects

Primary LanguageJavaScript

🚀 Getting Started

To launch one React project you will need to follow the next steps:

  1. Clone the code:
git clone git@github.com:CosmeValera/react-learning.git
  1. Open your terminal and navigate to the root directory:
cd ReactProjects
  1. Navigate to a project directory (these 3 are Vite):
cd learning-react/tenzies/

or

cd learning-react/meme-generator/

or

cd learning-react/notes-app/
  1. Install the dependencies:
npm i
  1. Start Vite project:
npm run dev

Open http://localhost:5173 to view it in your browser.

Or

  1. Start create-react-app project:
npm start

Open http://localhost:3000 to view it in your browser.

📒 Projects (From Most Recent to Oldest)

Meme Generator:

Learned:

  • State (useState is a hook for handling state in React)
  • Side Effects (useEffect is a hook for handling side effects in React)
  • Forms
  • Event Listeners (onClick, onMouseOver...)
  • Fetch and call to API
  • Conditional rendering

AirBnb Experience:

Learned:

  • Props
  • Array.map
  • Create project from scratch using Vite
npm create vite@latest

Facts about React:

Learned:

  • Create React components
  • How React DOM works
  • Create project from scratch
npx create-react-app my-react-app

📒➕ Other Projects

Notes App

Learned:

  • Debouncing effect
  • Firebase
  • Local Storage

Tenzies

Learned:

  • React Confetti
npm install react-confetti

âž• Other things I learned

Add Standard Lintern:

  1. Type in the terminal:
npm install standard -D
  1. Add in the package.json:
"eslintConfig": {
"extends": "./node_modules/standard/eslintrc.json"
}
  1. To run the lintern, type in the terminal:
npm run lint

Deploy in Netlify

To deploy our project we are going to build it first and then drop the /dist files in Netlify. Here's how:

  1. Build the project
npm run build
  1. Open the following URL:

https://app.netlify.com/drop/

  1. Drop the dist folder inside the web:

Enjoy your deployed app!! 😀

Tutorial-> https://www.youtube.com/watch?v=bMknfKXIFA8