Web Development using React
Submitted to: Ms. Rekha
Submitted by:
Aman Loar : 23UGBTC35104
Anurag Singh : 23UGBTC35112
Introduction to Web Development
• Web development involves creating and
maintaining websites and web applications.
• Frontend: Visual and interactive part (HTML,
CSS, JavaScript).
• Backend: Server-side logic ([Link], Django,
etc.).
• React is a popular frontend JavaScript library
developed by Facebook.
What is React?
• React is a JavaScript library for building user
interfaces.
• Used to create dynamic, component-based
web applications.
• Allows efficient UI updates with a virtual
DOM.
• Supports single-page applications (SPA).
Key Features of React
• Component-based architecture.
• Virtual DOM for fast rendering.
• Reusable UI components.
• Unidirectional data flow.
• JSX – JavaScript syntax extension for writing
UI.
Setting Up React Environment
• 1. Install [Link] and npm.
• 2. Create a new React app using 'npx create-
react-app my-app'.
• 3. Navigate to project folder: cd my-app.
• 4. Start the development server: npm start.
React Project Structure
• public/: Contains [Link] and static assets.
• src/: Main source code folder.
• [Link]: Main application component.
• [Link]: Entry point for rendering the app.
JSX (JavaScript XML)
• JSX allows writing HTML-like syntax inside
JavaScript.
• Example: const element = <h1>Hello, React!
</h1>;
• JSX helps structure UI components more
naturally.
React Components
• Functional Components – simple functions
returning UI.
• Class Components – ES6 classes extending
[Link].
• Props – used to pass data to components.
• State – used to store and manage component
data.
React Hooks
• Hooks allow functional components to use
state and lifecycle features.
• Common hooks:
• useState – for state management.
• useEffect – for side effects (API calls,
subscriptions).
• useContext – for global data sharing.
Routing in React
• React Router is used for navigation between
pages.
• Install via: npm install react-router-dom.
• Define routes in [Link] using <BrowserRouter>
and <Route> components.
State Management
• State defines dynamic data of a component.
• Lift state up when multiple components need
access.
• For complex apps, use Context API or Redux.
React with APIs
• React can fetch data from APIs using fetch() or
Axios.
• useEffect is commonly used for API calls.
• Example:
fetch('[Link]
=> [Link]()).then(setData).
Styling in React
• Inline styling using style attribute.
• CSS Modules for scoped styles.
• Styled-components for dynamic styling.
• Tailwind CSS for utility-first design.
Deployment
• Build the app using: npm run build.
• Host on platforms like:
• GitHub Pages, Netlify, Vercel, or Firebase.
• Serve the production build via any web server.
Conclusion
• React simplifies building complex, interactive
UIs.
• Supports reusable components and efficient
rendering.
• Widely used in modern web development
projects.
