Scribd
Upload
11 views

Basics of React Presentation

Uploaded by

pavang8097
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
11 views

Basics of React Presentation

Uploaded by

pavang8097
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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