HarryPage

Key Tips for ReactJS Beginners to Know

Nguyen Thi Thao's photo
Nguyen Thi Thao
·

2 min read

1. Set Up a React Project with Vite

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev
  • Tip: Vite is faster than Create React App for development. It provides better performance and a leaner build process.

  • React Router: For routing in your app.

      npm install react-router-dom

  • Axios: For making API requests.

      npm install axios

  • React Icons: For adding icons easily.

      npm install react-icons

3. Use Functional Components and Hooks

  • Tip: Always prefer functional components over class components. Hooks like useState and useEffect simplify state and lifecycle management.

      import React, { useState } from 'react';

  function Counter() {
      const [count, setCount] = useState(0);

      return (
          <div>
              <p>Count: {count}</p>
              <button onClick={() => setCount(count + 1)}>Increment</button>
          </div>
      );
  }

4. Use the npm run Scripts

  • Start development server:

      npm run dev

  • Build for production:

      npm run build

  • Preview the production build:

      npm run preview

5. Set Up ESLint and Prettier

  • Install ESLint:

      npm install eslint --save-dev

  • Initialize ESLint:

      npx eslint --init

  • Install Prettier:

      npm install prettier --save-dev

  • Tip: Use VS Code extensions for ESLint and Prettier to format and lint your code automatically.

6. Use Tailwind CSS for Styling

  • Install Tailwind CSS in a Vite project:

      npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

  • Add the following to your tailwind.config.js:

      content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"];

  • Import Tailwind in your index.css:

      @tailwind base;
  @tailwind components;
  @tailwind utilities;

7. Use React Developer Tools

  • Install the React Developer Tools browser extension to debug React components.

8. Lazy Load Components

  • Use React’s lazy and Suspense to load components on demand and improve performance.

      import React, { lazy, Suspense } from 'react';

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

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

9. Use Environment Variables

  • Create a .env file in the root directory:

      VITE_API_URL=https://api.example.com

  • Access the variable in your app:

      console.log(import.meta.env.VITE_API_URL);

10. Optimize Production Builds

  • Use Vite’s build optimization:

      npm run build

  • Analyze bundle size:

      npm install rollup-plugin-visualizer --save-dev

    Add it to your vite.config.js:

      import { defineConfig } from 'vite';
  import { visualizer } from 'rollup-plugin-visualizer';

  export default defineConfig({
      plugins: [visualizer()],
  });

If you love my content , just give me a love? 😊

ReactviteReactHookstips