Beginner Guide

Table of Contents

Set Up

Create new React projects:

npx create-react-app <project-name>

After setting up, all edits go into src/App.js file.

Templates

If a project is big, it’s too big to put everything into App.js . So we can break it down into different folders:

• All React code must go inside src/ , and all assets must go inside public/ .

Reorganize the structure

src/
├── components/       ← all React components (Button.js, Navbar.js, etc.)
├── css/              ← move all CSS files here (App.css, index.css, etc.)
├── App.js
├── index.js

Can do:

src/
├── components/       # All React components
│   ├── Navbar.js
│   └── Footer.js
├── css/              # All CSS files
│   ├── App.css
│   └── index.css
├── App.js
├── index.js
├── page/             # All Sub page
│   ├── HomePage
│   └── AboutPage

Can’t do:

• Delete src/and public/ folder - all React app source code must live inside src/ .

React Basics

A React project is made by different components, just like a Lego, combining different components