Scribd
Upload
4 views

Basics of React Presentation

Uploaded by

pavang8097
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Basics of React Presentation

Uploaded by

pavang8097
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Basics of React

Introduction to React.js
Introduction to React
• What is React?
• A JavaScript library for building user
interfaces.
• Developed and maintained by Facebook.
• Focuses on reusable components and efficient
rendering
Key Features of React
• Component-Based: UI is divided into reusable
components.
• Virtual DOM: Efficiently updates and renders
only the necessary parts.
• Declarative: Allows you to describe how your
UI should look.
• Unidirectional Data Flow: Easier to debug.
React vs Traditional Web Development
• React: Component-driven architecture,
reusable code.
• Traditional: Manipulates the DOM directly,
less efficient.
Setting Up React
• 1. Install Node.js and npm.
• 2. Run the command: npx create-react-app
my-app
• 3. Start the app: npm start
Understanding Components
• Function Components:
• function Welcome() { return <h1>Hello,
World!</h1>; }
• Class Components:
• class Welcome extends React.Component
{ render() { return <h1>Hello, World!</h1>; } }
JSX Syntax
• JSX: A syntax extension of JavaScript.
• const element = <h1>Hello, World!</h1>;
Props in React
• Props (short for 'Properties') allow data to be
passed from one component to another.
• function Greeting(props) { return <h1>Hello,
{props.name}!</h1>; }
State in React
• State is used to manage the data inside a
component.
• const [count, setCount] = useState(0);
Handling Events in React
• React uses standard JavaScript event handling.
• function handleClick() { console.log('Button
clicked!'); }
React Hooks
• Hooks let you use state and other React
features in functional components.
• useState
• useEffect
Virtual DOM
• Virtual DOM is a lightweight copy of the actual
DOM.
• React updates the Virtual DOM first, then
syncs it with the real DOM.
Conclusion
• React is powerful for building dynamic and
efficient UIs.
• Focuses on component-based architecture
and efficient updates through the Virtual
DOM.

You might also like