Topic 1 of 54
What is React?
Overview
React is an open-source, component-based JavaScript library for building user interfaces. Created by Facebook, it shifts the focus from managing the entire webpage to managing small, isolated pieces of UI called 'Components'. React's declarative nature means you describe *what* the UI should look like based on the current state, and React figures out *how* to update the browser to match.
Syntax
In Vanilla JS, you manually mutate the DOM. In React, you simply tie the UI to a state variable. When the state changes, the UI automatically re-renders to reflect it.
The Declarative Approach
jsx
1// Imperative (Vanilla JS): You must manually find and update the DOM
2const btn = document.getElementById('myBtn');
3btn.addEventListener('click', () => {
4 btn.textContent = 'Clicked!';
5 btn.classList.add('active');
6});
7
8// Declarative (React): You just update the state, React handles the DOM
9function CustomButton() {
10 const [clicked, setClicked] = useState(false);
11 return (
12 <button
13 className={clicked ? 'active' : ''}
14 onClick={() => setClicked(true)}>
15 {clicked ? 'Clicked!' : 'Click Me'}
16 </button>
17 );
18}Common Pitfalls
- Trying to directly manipulate the DOM using document.getElementById in a React app. Always use state or refs instead.
- Thinking React is a full framework. You will need additional tools (like React Router, React Query) to build a complete application.
Interview Tips
- In interviews, emphasize that React is a *library*, not a framework like Angular. It specifically handles the 'View' layer, leaving routing and state management to other libraries.
Real-World Example
Building scalable apps like Instagram or Netflix by breaking the UI into dozens of small, reusable components (like VideoPlayer, CommentSection, LikeButton).
example
jsx
1function App() {
2 return (
3 <div className="app-container">
4 <Navbar />
5 <MainContent>
6 <VideoPlayer />
7 <RecommendedList />
8 </MainContent>
9 <Footer />
10 </div>
11 );
12}