Introduction to
Cybersecurity
[Link]
[Link]
• [Link] is a popular open-source React framework for building web
applications.
• It provides features like server-side rendering (SSR), static site
generation (SSG), and other performance-boosting tools that make it
ideal for modern web development.
• It's developed and maintained by Vercel.
Why [Link]
• Simplifies the development process
• Optimizes your web apps
1. Rendering
2. Routing
3. Full-stack application: From [Link] version 9, developers introduced
a new feature called API Routes. This enables creation of serverless
functions to handle API requests, through which you create API
endpoints without the need for a traditional server.
Why [Link]
• Lee Robinson mentioned in his blog post that moving from a typical
react, express and webpack backed to [Link] resulted in removing
20,000+ lines of code and 30+ dependencies while improving HMR
(Hot Module Reloading) from 1.3s to 131ms, which is 10 times less.
Why [Link]
4. Automatic Code splitting
• Code splitting is a technique that breaks down large bundles of Javascript
code into smaller, more manageable chunks that can be loaded as needed.
5. Next is React
JSX
• JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write
HTML-like code directly within JavaScript.
• It is primarily used in React to describe the UI structure of a component in a declarative
and readable way.
• It has HTML like syntax.
• Use javascript expressions within jsx using {}.
• JSX is not natively understood by browsers, so it needs to be compiled (usually by Babel)
into standard JavaScript.
• JSX allows you to define attributes for HTML-like elements or pass props to React
components.
• We use JSX for custom react components
• Supports nesting allowing you to use complex react structures
JSX Rules
• JSX tags must be properly closed.
• JSX must return single parent element.
• Use className instead of class, since class is a reserved keyword in JS.
• Javascript expressions goes in { }.
Components
• In React, components are the building blocks of a React application.
They allow developers to break the UI into reusable, independent
pieces that can manage their own state and behavior. React
components can be broadly categorized into two types:
• Class components
• Functional components
Class components
• Class components are ES6 classes that extend [Link].
• They have a render method that returns JSX and support state
management and lifecycle methods.
• JSX (JavaScript XML) is a syntax extension for JavaScript that allows
developers to write HTML-like code directly within JavaScript.
• It is primarily used in React to describe the UI structure of a component in a
declarative and readable way.
Example: Class component
Class Components
• Stateful by nature with [Link] and [Link].
• Use lifecycle methods
like componentDidMount and componentWillUnmount.
• More verbose compared to functional components.
Lifecycle
State
• In React, state is a built-in object that is used to manage and store data
that can change over time.
• It determines how a component behaves and renders.
• When the state of a component changes, React re-renders the
component to reflect the updated state.
Functional Components
• Functional components are plain JavaScript functions that return JSX
(JavaScript XML).
• They are simple and primarily used to create UI elements.
• With React Hooks, they can now handle state and lifecycle events,
making them as powerful as class components.
[Link]
React
encourages component
composition, where complex
UIs are created by combining
multiple smaller components.
[Link]
Functional Components
• Stateless by default but can use useState and useEffect to manage
state and side effects.
• Lightweight and easy to read.
• Widely used in modern React due to their simplicity and compatibility
with hooks.
Common types of components
• Presentational Components:
• Focus on rendering UI.
• Receive data via props but do not manage state or handle business
logic.
• Container Components:
• Handle state and logic, passing data to child components as props.
• Typically connected to global state management systems like Redux.
Common types of components
• Higher-Order Components (HOC):
• Functions that take a component and return an enhanced version of it.
• Useful for sharing common logic between components.
• Controlled Components:
• Manage form inputs by maintaining their values in the component state.
• Uncontrolled Components:
• Handle form inputs with direct DOM manipulation using ref.
Key Benefits of React Components
• Reusability: Write once, use multiple times.
• Separation of Concerns: Logic and presentation are separated into
independent pieces.
• Maintainability: Smaller, focused components make the codebase
easier to manage.
• Testability: Each component can be tested in isolation.
Props
• Props (short for "properties") are inputs passed from a parent
component to a child component in React.
• They are read-only, meaning the child component cannot modify the
props directly.
• Props are used to customize components and make them reusable.
Props
• Passing props to components
