Things I Wish I Knew When I Started with React

Lessons from 3 Years of React Development

When I first dove into React, it felt like opening Pandora's box. There was so much to learn, and along the way, I encountered plenty of "Aha!" moments. Here are 10 things I wish I knew when I started, to help you skip a few speed bumps in your React journey.

1. Components Are Just Functions

The most important realization? React components are just JavaScript functions. You pass props as arguments, and they return JSX, which looks like HTML but isn’t. Once you think of components this way, understanding concepts like props and state becomes much simpler.

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. State and Props Are Different

This might seem basic now, but early on, the difference between props and state wasn’t obvious to me. Here’s a quick refresher:

• Props are external and immutable (data you pass to the component).
• State is internal and mutable (managed within the component).

When in doubt: If the data comes from the parent, it's props. If the data lives inside the component, it’s state.

3. Hooks Are Game-Changing

When React introduced hooks, it was a game-changer. Instead of juggling lifecycle methods, you can now manage state and side effects easily using hooks like useState and useEffect. I wish I had known how powerful and simple these hooks could make my code from the beginning.

const [count, setCount] = useState(0);
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

4. Understanding the Virtual DOM

I didn’t fully grasp how React’s Virtual DOM worked until later, and that was a mistake. React’s efficiency comes from updating the Virtual DOM instead of the real DOM directly. By diffing the changes, React only updates what’s necessary, making your apps fast.

5. Component Composition Over Inheritance

React favors component composition (nesting components inside each other) rather than class-based inheritance. If you need to reuse logic across components, it's better to extract it into reusable components or custom hooks rather than using inheritance.

const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
const Page = () => <Greeting name="John" />;

6. Managing State Is an Art

As your app grows, state management becomes tricky. Local component state works well for smaller apps, but for larger ones, tools like Context API or libraries like Redux help manage state across your entire application. I started with Redux too early, but I now know when to lean on simpler solutions like useContext or useReducer before introducing heavier tools.

const MyContext = React.createContext();
const App = () => {
  return (
    <MyContext.Provider value={/* some value */}>
      <ComponentA />
    </MyContext.Provider>
  );
};

7. TypeScript is Worth the Effort

If you're working on larger codebases, adopting TypeScript is worth the learning curve. It can prevent bugs early by enforcing types, and it makes collaborating with other developers smoother. I struggled with TypeScript at first, but once I embraced it, my React code became much more robust.

interface Props {
  title: string;
}
const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

8. CSS-in-JS for Scoped Styling

When I started, I wrestled with global styles clashing with each other. CSS-in-JS libraries like styled-components or Emotion changed the game for me by allowing scoped styles that live alongside the component logic.

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

9. Testing is Easier Than You Think

Testing React components was intimidating, but tools like React Testing Library and Jest make it easy. Write tests for important components to ensure they behave as expected, and you’ll thank yourself later.

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the title', () => {
  const { getByText } = render(<MyComponent title="Hello" />);
  expect(getByText(/Hello/i)).toBeInTheDocument();
});

10. Optimization Matters

As your app scales, you’ll want to optimize it for performance. Techniques like memoization (React.memo), lazy loading components (React.lazy), and splitting code (React.Suspense) can drastically improve the user experience. Performance wasn’t top of mind for me early on, but it should be for you!

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

Final Thoughts

React is an amazing tool for building dynamic UIs, but like any technology, it comes with a learning curve. Embrace the basics, and don't shy away from exploring advanced concepts. Most importantly, keep building!

These are the 10 things I wish I knew from the start. Hopefully, they’ll save you some time and frustration on your React journey.

Did this help? Drop a comment or share your own React tips below!

The above is the detailed content of Things I Wish I Knew When I Started with React. For more information, please follow other related articles on the PHP Chinese website!