ReactJS Core Features
React's powerful feature set makes it the most popular JavaScript library for building user interfaces.
JSX (JavaScript XML)
Syntax extension that allows writing HTML-like code in JavaScript
const element = <h1>Hello, world!</h1>;
Virtual DOM
In-memory representation of real DOM for efficient updates
// React calculates minimal DOM operations // when state changes
Components
Reusable, self-contained UI building blocks
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}Unidirectional Data Flow
Data flows down from parent to child components
<ChildComponent data={parentData} />State Management
Component-level state with useState/useReducer
const [count, setCount] = useState(0);
Props System
Pass data and event handlers between components
<UserProfile name="John" age={30} />Context API
Share data across component tree without prop drilling
const ThemeContext = createContext('light');Hooks System
Use state and lifecycle features in function components
useState, useEffect, useContext, etc.
Error Boundaries
Catch JavaScript errors in child components
class ErrorBoundary extends React.Component {
componentDidCatch(error, info) {
// Handle error
}
}Fragments
Group elements without extra DOM nodes
<> <ChildA /> <ChildB /> </>
Higher-Order Components
Function that takes a component and returns a new component
const EnhancedComponent = withAuth(UserComponent);
Render Props
Share code between components using prop functions
<DataProvider render={data => (
<h1>Hello {data.target}</h1>
)} />Portals
Render children into DOM nodes outside parent hierarchy
ReactDOM.createPortal(child, container)
Refs System
Access DOM nodes or React elements directly
const inputRef = useRef();
<input ref={inputRef} />Suspense
Declaratively specify loading states
<Suspense fallback={<Spinner />}>
<LazyComponent />
</Suspense>Lazy Loading
Load components only when needed
const OtherComponent = React.lazy(() => import('./OtherComponent'));Server Components
Run components on server to reduce bundle size
// Next.js 13+ feature import ServerComponent from './ServerComponent'
Concurrent Features
Prepare multiple versions of UI simultaneously
// React 18+ const root = createRoot(container); root.render(<App />);
React Performance Features
Memoization
Prevent unnecessary re-renders
const MemoComp = React.memo(Component); const val = useMemo(() => compute(), [deps]);
Code Splitting
Split code into smaller bundles
import('./math').then(math => {
console.log(math.add(16, 26));
});Windowing
Render only visible items in large lists
import { FixedSizeList } from 'react-window';Transition API
Mark updates as non-urgent
const [isPending, startTransition] = useTransition();
startTransition(() => {
// Non-urgent updates
});React Ecosystem
React Router
Declarative routing for SPAs
<Routes>
<Route path="/" element={<Home />} />
</Routes>State Management
Redux, Zustand, Recoil, Jotai
// Redux example const store = createStore(reducer);
Styling Solutions
Styled-components, CSS Modules, Tailwind
const Button = styled.button` background: palevioletred; `;
Testing
Jest, React Testing Library, Cypress
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});Server-Side Rendering
Next.js, Remix, Gatsby
// Next.js page
export async function getServerSideProps() {
// Fetch data
}Mobile Development
React Native, Expo
// React Native <View> <Text>Hello World!</Text> </View>
