[go: up one dir, main page]
Scribd
Upload
35 views8 pages

React & MERN Stack Beginner Essentials

The document provides essential abbreviations related to React and the MERN stack, including terms like API, NPM, and JSON. It outlines the basic folder structure of a React project, detailing the purpose of each directory and file. Additionally, it encourages reader engagement by asking which abbreviations were new to them.

Uploaded by

shaheensafana24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views8 pages

React & MERN Stack Beginner Essentials

The document provides essential abbreviations related to React and the MERN stack, including terms like API, NPM, and JSON. It outlines the basic folder structure of a React project, detailing the purpose of each directory and file. Additionally, it encourages reader engagement by asking which abbreviations were new to them.

Uploaded by

shaheensafana24
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

React &

MERN
Stack
Beginner
Essentials
Lakni Ranepura
Must-Know Abbreviations

API — Application Programming Interface


A way for apps to talk to each other

NPM — Node Package Manager


Tool to install/manage JavaScript libraries

JSON — JavaScript Object Notation


Data format for sending and receiving info

URL — Uniform Resource Locator


Web address for a resource

CORS — Cross-Origin Resource Sharing


Controls who can access your server data

JSX — JavaScript XML


Write HTML inside JavaScript in React
page 02
DOM — Document Object Model
Represents your web page’s structure

CRUD — Create, Read, Update, Delete


Basic database operations

REST — Representational State Transfer


Rules for designing APIs

HTTP — HyperText Transfer Protocol


How browsers and servers communicate

page 03
Basic React Project Folder
Structure
📂 Project
├── 📂 node_modules
├── 📂 public
├── vite.svg
├── 📂 src
├── 📂 assets
├── react.svg
├── App.jsx
├── App.css
├── index.css
├── main.jsx
├── vite.config.js
├── package.json
├── .gitignore
├── README.md
├── index.html
├── package-lock.json
├── eslint.config.js
page 04
node_modules/
Contains all installed libraries and packages.
Never edit this manually.

public/
Static files like images and the main HTML
file for your app.

vite.svg
Example image/logo file. You can replace or
delete it.

src/
All your React code, components, and CSS
files. The main working folder.

assets/
Store images, icons, and other media files
used in your app.

react.svg
Example image inside assets.
App.jsx
The main React component (like your
homepage).

App.css
CSS styles for App.jsx.

index.css
Global CSS styles for the whole app.

main.jsx
The starting point of your React app. It renders
App.jsx into index.html.

vite.config.js
Settings for Vite (the build tool and dev server).

package.json
Info about your project, installed packages,
and project scripts.
.gitignore
Tells Git which files/folders not to track (like
node_modules/).

README.md
A description file about your project, visible on
GitHub.

index.html
The single HTML file your React app runs
inside.

package-lock.json
Keeps track of the exact versions of installed
packages.

eslint.config.js
Rules and settings for ESLint (a tool that
checks your code quality).
Which one of these abbreviations was new
for you?💬

Comment below — let’s learn together!

Lakni Ranepura

You might also like