Create React App-ஐ sunsetting செய்தல்

February 14, 2025 அன்று Matt Carroll and Ricky Hanlon எழுதியது

2016-இல் Create React App-ஐ release செய்தபோது, புதிய React app ஒன்றை build செய்ய தெளிவான வழி இல்லை.

React app உருவாக்க, JSX, linting, மற்றும் hot reloading போன்ற basic features support செய்ய பல tools install செய்து, அவற்றை நீங்களே wire up செய்ய வேண்டியிருந்தது. இதை சரியாக செய்வது மிகவும் tricky; அதனால் community பொதுவான setups-க்காக boilerplates உருவாக்கியது. ஆனால் boilerplates update செய்ய கடினமாக இருந்தன; fragmentation காரணமாக React புதிய features release செய்வதும் கடினமானது.

Create React App, பல tools-ஐ ஒரே recommended configuration-ஆக இணைப்பதன் மூலம் இந்த பிரச்சினைகளை தீர்த்தது. இதனால் apps புதிய tooling features-க்கு நேரடியாக upgrade செய்ய முடிந்தது; மேலும் React team, non-trivial tooling changes (Fast Refresh support, React Hooks lint rules) மிகப் பரந்த audience-க்கு deploy செய்ய முடிந்தது.

இந்த model இவ்வளவு பிரபலமானதால், இன்று இதே முறையில் வேலை செய்யும் முழு tools category ஒன்று உள்ளது.

Create React App-ஐ deprecate செய்தல்

Create React App தொடங்க வசதியாக்கினாலும், high performant production apps build செய்வதை கடினமாக்கும் பல limitations உள்ளன. கொள்கை ரீதியாக, இதை framework-ஆக evolve செய்வதன் மூலம் இந்த பிரச்சினைகளை தீர்க்கலாம்.

ஆனால் Create React App-க்கு தற்போது active maintainers இல்லை; மேலும் இந்த பிரச்சினைகளை ஏற்கனவே தீர்க்கும் பல existing frameworks உள்ளன. எனவே Create React App-ஐ deprecate செய்ய தீர்மானித்துள்ளோம்.

இன்று முதல், நீங்கள் புதிய app install செய்தால், deprecation warning பார்க்கிறீர்கள்:

Create React App website மற்றும் GitHub repo-விலும் deprecation notice சேர்த்துள்ளோம். Create React App maintenance mode-இல் தொடர்ந்து வேலை செய்யும்; மேலும் React 19 உடன் வேலை செய்ய Create React App-ன் புதிய version ஒன்றை publish செய்துள்ளோம்.

Framework-க்கு migrate செய்வது எப்படி

புதிய React apps-ஐ framework உடன் உருவாக்க பரிந்துரைக்கிறோம். நாங்கள் பரிந்துரைக்கும் அனைத்து frameworks-யும் client-side rendering (CSR) மற்றும் single-page apps (SPA)-ஐ support செய்கின்றன; server இல்லாமல் CDN அல்லது static hosting service-க்கு deploy செய்யலாம்.

Existing apps-க்கு, client-only SPA-க்கு migrate செய்ய இந்த guides உதவும்:

• Next.js-ன் Create React App migration guide
• React Router-ன் framework adoption guide.
• Expo webpack-இலிருந்து Expo Router-க்கு migration guide

Build tool-க்கு migrate செய்வது எப்படி

உங்கள் app-க்கு unusual constraints இருந்தால், அல்லது இந்த பிரச்சினைகளை உங்கள் சொந்த framework build செய்வதன் மூலம் solve செய்ய விரும்பினால், அல்லது React scratch-இலிருந்து எப்படி வேலை செய்கிறது என்பதை கற்கவே விரும்பினால், Vite, Parcel அல்லது Rsbuild பயன்படுத்தி React உடன் உங்கள் சொந்த custom setup உருவாக்கலாம்.

Existing apps-க்கு, build tool-க்கு migrate செய்ய இந்த guides உதவும்:

• Vite Create React App migration guide
• Parcel Create React App migration guide
• Rsbuild Create React App migration guide

Vite, Parcel அல்லது Rsbuild உடன் தொடங்க உதவ, React App ஒன்றை Scratch-இலிருந்து Build செய்தல் என்ற புதிய docs சேர்த்துள்ளோம்.

Build tools-ன் limitations மற்றும் ஏன் frameworks பரிந்துரைக்கிறோம் என்பதை மேலும் அறிய தொடர்ந்து படிக்கவும்.

Build tools-ன் limitations

Create React App மற்றும் அதுபோன்ற build tools, React app build செய்ய தொடங்குவதை உதவுகின்றன. npx create-react-app my-app run செய்த பிறகு, development server, linting, மற்றும் production build உடன் fully configured React app கிடைக்கும்.

உதாரணமாக, நீங்கள் internal admin tool build செய்தால், landing page ஒன்றிலிருந்து தொடங்கலாம்:

export default function App() {
  return (
    <div>
      <h1>Admin Tool-க்கு வரவேற்கிறோம்!</h1>
    </div>
  )
}

இதனால் JSX, default linting rules, மற்றும் development மற்றும் production இரண்டிலும் run செய்ய bundler போன்ற features உடன் React-இல் உடனடியாக coding தொடங்கலாம். ஆனால் real production app build செய்ய தேவையான tools இந்த setup-இல் இல்லை.

பெரும்பாலான production apps routing, data fetching, மற்றும் code splitting போன்ற problems-க்கு solutions தேவைப்படும்.

Routing

Create React App குறிப்பிட்ட routing solution ஒன்றை include செய்யாது. நீங்கள் இப்போது தொடங்குகிறீர்கள் என்றால், routes இடையே switch செய்ய useState பயன்படுத்துவது ஒரு option. ஆனால் இதைச் செய்தால், உங்கள் app-க்கு links share செய்ய முடியாது - ஒவ்வொரு link-யும் அதே page-க்கு செல்லும் - மேலும் காலப்போக்கில் app structure கடினமாகிறது:

import {useState} from 'react';

import Home from './Home';
import Dashboard from './Dashboard';

export default function App() {
  // ❌ Routing in state does not create URLs
  const [route, setRoute] = useState('home');
  return (
    <div>
      {route === 'home' && <Home />}
      {route === 'dashboard' && <Dashboard />}
    </div>
  )
}

இதனால் தான் Create React App பயன்படுத்தும் பெரும்பாலான apps, React Router அல்லது Tanstack Router போன்ற routing library சேர்த்து routing solve செய்கின்றன. Routing library உடன், app-க்கு கூடுதல் routes சேர்க்கலாம்; இது உங்கள் app structure பற்றி opinions வழங்குகிறது, மேலும் routes-க்கு links share செய்ய தொடங்க அனுமதிக்கிறது. உதாரணமாக, React Router உடன் routes define செய்யலாம்:

import {RouterProvider, createBrowserRouter} from 'react-router';

import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Each route has it's own URL
const router = createBrowserRouter([
  {path: '/', element: <Home />},
  {path: '/dashboard', element: <Dashboard />}
]);

export default function App() {
  return (
    <RouterProvider value={router} />
  )
}

இந்த change-இன் மூலம், /dashboard-க்கு link share செய்யலாம்; app dashboard page-க்கு navigate செய்யும். Routing library கிடைத்த பிறகு, nested routes, route guards, மற்றும் route transitions போன்ற கூடுதல் features சேர்க்கலாம்; routing library இல்லாமல் அவற்றை implement செய்வது கடினம்.

இங்கே ஒரு tradeoff உள்ளது: routing library app-க்கு complexity சேர்க்கிறது; அதே சமயம் அது இல்லாமல் implement செய்ய கடினமான features-யையும் சேர்க்கிறது.

Data fetching

Create React App-இல் இன்னொரு பொதுவான problem data fetching. Create React App குறிப்பிட்ட data fetching solution ஒன்றை include செய்யாது. நீங்கள் தொடங்குகிறீர்கள் என்றால், data load செய்ய effect-இல் fetch பயன்படுத்துவது பொதுவான option.

ஆனால் இதைச் செய்தால், component render ஆன பிறகே data fetch செய்யப்படும்; இதனால் network waterfalls ஏற்படலாம். உங்கள் app render ஆகும்போது data fetch செய்வதால், code download ஆகும் நேரத்திலேயே parallel-ஆக fetch செய்யாமல் network waterfalls உருவாகின்றன:

export default function Dashboard() {
  const [data, setData] = useState(null);

  // ❌ Fetching data in a component causes network waterfalls
  useEffect(() => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

Effect-இல் fetching செய்வதால், data முன்பே fetch செய்ய முடிந்திருந்தாலும், user content பார்க்க இன்னும் நீண்ட நேரம் காத்திருக்க வேண்டும். இதை solve செய்ய, TanStack Query, SWR, Apollo, அல்லது Relay போன்ற data fetching library பயன்படுத்தலாம்; இவை component render ஆகும்முன் request தொடங்க data prefetch செய்யும் options வழங்குகின்றன.

Route level-இல் data dependencies specify செய்ய உங்கள் routing “loader” pattern உடன் integrate செய்யும்போது இந்த libraries சிறப்பாக வேலை செய்கின்றன; இதனால் router உங்கள் data fetches-ஐ optimize செய்ய முடியும்:

export async function loader() {
  const response = await fetch(`/api/data`);
  const data = await response.json();
  return data;
}

// ✅ Fetching data in parallel while the code is downloading
export default function Dashboard({loaderData}) {
  return (
    <div>
      {loaderData.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

Initial load-இல், route render ஆகும்முன் router data-வை உடனடியாக fetch செய்ய முடியும். User app-இல் navigate செய்யும்போது, router data மற்றும் route இரண்டையும் ஒரே நேரத்தில் fetch செய்து fetches-ஐ parallelize செய்ய முடியும். இதனால் screen-இல் content காணும் நேரம் குறைகிறது; user experience மேம்படலாம்.

ஆனால் இதற்கு உங்கள் app-இல் loaders சரியாக configure செய்ய வேண்டும்; performance-க்காக complexity tradeoff செய்யப்படுகிறது.

Code splitting

Create React App-இல் இன்னொரு பொதுவான problem code splitting. Create React App குறிப்பிட்ட code splitting solution ஒன்றை include செய்யாது. நீங்கள் இப்போது தொடங்குகிறீர்கள் என்றால், code splitting பற்றி யோசிக்காமல் இருக்கலாம்.

இதனால் உங்கள் app ஒரே bundle ஆக ship செய்யப்படும்:

- bundle.js    75kb

ஆனால் ideal performance-க்கு, உங்கள் code-ஐ தனித்தனியான bundles-ஆக “split” செய்ய வேண்டும்; இதனால் user-க்கு தேவைப்படுவது மட்டுமே download செய்ய வேண்டும். அவர்கள் இருக்கும் page பார்க்க தேவையான code மட்டுமே download செய்வதால், app load ஆக user காத்திருக்கும் நேரம் குறையும்.

- core.js      25kb
- home.js      25kb
- dashboard.js 25kb

Code-splitting செய்வதற்கான ஒரு வழி React.lazy. ஆனால் இதனால் component render ஆகும் வரை code fetch செய்யப்படாது; network waterfalls ஏற்படலாம். இன்னும் optimal solution, code download ஆகும் நேரத்திலேயே code-ஐ parallel-ஆக fetch செய்யும் router feature பயன்படுத்துவது. உதாரணமாக, route code split செய்யப்பட வேண்டும் என்றும் அது load ஆகும் நேரத்தை optimize செய்ய வேண்டும் என்றும் குறிப்பிட React Router lazy option வழங்குகிறது:

import Home from './Home';
import Dashboard from './Dashboard';

// ✅ Routes are downloaded before rendering
const router = createBrowserRouter([
  {path: '/', lazy: () => import('./Home')},
  {path: '/dashboard', lazy: () => import('Dashboard')}
]);

Optimized code-splitting சரியாக செய்வது tricky; user-க்கு தேவையானதைவிட அதிக code download செய்யும் mistakes செய்வது சாத்தியம். Caching maximize செய்ய, fetches parallelize செய்ய, மற்றும் “import on interaction” patterns support செய்ய, router மற்றும் data loading solutions உடன் integrate ஆனபோது இது சிறப்பாக வேலை செய்கிறது.

மேலும்…

இவை Create React App-ன் limitations-இன் சில examples மட்டுமே.

Routing, data-fetching, மற்றும் code splitting integrate செய்த பிறகு, pending states, navigation interruptions, user-க்கு error messages, மற்றும் data revalidation ஆகியவற்றையும் consider செய்ய வேண்டும். Users solve செய்ய வேண்டிய முழு categories உள்ளன:

இவை அனைத்தும் சேர்ந்து மிகவும் optimal loading sequence-ஐ உருவாக்குகின்றன.

Create React App-இல் இந்த பிரச்சினைகள் ஒவ்வொன்றையும் தனித்தனியாக solve செய்வது கடினமாக இருக்கலாம்; ஏனெனில் ஒவ்வொரு problem-மும் மற்றவற்றுடன் interconnected ஆக உள்ளது, மேலும் users-க்கு அறிமுகம் இல்லாத problem areas-இல் deep expertise தேவைப்படலாம். இந்த பிரச்சினைகளை solve செய்ய, users Create React App மேல் தங்கள் சொந்த bespoke solutions build செய்ய வேண்டிய நிலை ஏற்படுகிறது; இதுவே Create React App ஆரம்பத்தில் solve செய்ய முயன்ற problem.

ஏன் frameworks பரிந்துரைக்கிறோம்

Create React App, Vite, அல்லது Parcel போன்ற build tool-இல் இந்த எல்லா pieces-ஐயும் நீங்கள் solve செய்ய முடியும்; ஆனால் அதை நன்றாக செய்வது கடினம். Create React App பல build tools-ஐ ஒன்றாக integrate செய்தது போலவே, users-க்கு சிறந்த experience வழங்க இந்த features அனைத்தையும் ஒன்றாக integrate செய்யும் tool தேவை.

Build tools, rendering, routing, data fetching, மற்றும் code splitting-ஐ integrate செய்யும் இந்த tools category “frameworks” என அழைக்கப்படுகிறது - அல்லது React-ஐயே framework என்று அழைக்க விரும்பினால், இவற்றை “metaframeworks” என்று அழைக்கலாம்.

Build tools, tooling-ஐ மேம்படுத்த சில opinions impose செய்வதைப் போலவே, frameworks மிகச் சிறந்த user experience வழங்க உங்கள் app-ஐ structure செய்வது பற்றி சில opinions impose செய்கின்றன. இதனால் தான் புதிய projects-க்கு Next.js, React Router, மற்றும் Expo போன்ற frameworks-ஐ பரிந்துரைக்கத் தொடங்கினோம்.

Frameworks, Create React App போலவே getting started experience வழங்குகின்றன; ஆனால் real production apps-இல் users எப்படியும் solve செய்ய வேண்டிய problems-க்கும் solutions வழங்குகின்றன.

Create React App-ஐ உருவாக்கிய Dan Abramov-க்கும், பல ஆண்டுகளாக Create React App-ஐ maintain செய்த Joe Haddad, Ian Schmitz, Brody McKee, மற்றும் பலருக்கும் நன்றி. இந்த post-ஐ review செய்து feedback வழங்கிய Brooks Lybrand, Dan Abramov, Devon Govett, Eli White, Jack Herrington, Joe Savona, Lauren Tan, Lee Robinson, Mark Erikson, Ryan Florence, Sophie Alpert, Tanner Linsley, மற்றும் Theo Browne-க்கும் நன்றி.