React Web App Development

Session 01: Objective

By the end of this session, students will:

1. Understand core React concepts (Components, State, Props, JSX).
2. Set up a new React project using Vite.
3. Create simple functional components with state and props.

Content Outline:

1. Introduction to React (Recap)
   • React is a JavaScript library for building user interfaces.
   • It follows a component-based architecture: everything is broken into reusable components.
   • Virtual DOM: React updates only what is necessary, making it efficient.
2. What is Vite?
   • Vite is a modern, lightweight build tool that provides a faster development experience.
   • Faster than create-react-app due to ES modules and on-demand compilation.

Installing and Setting up React with Vite
Step-by-Step Commands:

Check Node Installation

node -v

install vite server (latest)

npm create vite@latest

y/ project name —- / select React / JS

create react app ekata wada fast

cd to the project folder -> code . open in VS code

package.json folder structure

vite.config.js -> react plugin ekak use karana nisa thamai meka fast wela thiyenne

index.html -> main.jsx eke thami

get terminal -> npm install (you can see node_modules folder)

run project

npm run dev