Skip to main content

Create React App

Deprecated

Create React App (CRA) is a toolchain for setting up React applications, and it is no longer maintained. It has been replaced by Vite and Snowpack, which offer faster build times and better performance. If you are starting a new React project, consider using Vite or Snowpack instead of Create React App.

react-scripts​

react-scripts is a JavaScript package provided by the React team and is typically used in React projects created with create-react-app. Its main role is to abstract the build configuration and development environment setup for React applications, making it easier for developers to get started with React development without having to deal with complex build tools and configurations.

Here are the key roles of react-scripts:

  1. Development Server: react-scripts includes a development server that allows you to run your React application locally during development. It supports hot reloading, which means you can see your changes instantly without having to manually refresh the page.
  2. Webpack Configuration: Webpack is a powerful build tool used to bundle and optimize JavaScript code and other assets for production. react-scripts sets up Webpack with sensible defaults for React applications, including handling JavaScript transpilation, CSS processing, and more.
  3. Babel Configuration: Babel is a tool that converts modern JavaScript code into older versions that are compatible with most browsers. react-scripts configures Babel so that you can use the latest JavaScript features while ensuring compatibility with older browsers.
  4. ESLint Integration: ESLint is a popular linter tool that helps identify and enforce coding standards and best practices. react-scripts integrates ESLint into the development environment, providing helpful warnings and error messages to keep your code consistent and error-free.
  5. Test Configuration: react-scripts comes with test configurations using Jest, a popular testing framework for JavaScript applications. It sets up the environment to run tests and provides utilities to write and execute tests for your React components.
  6. Production Build: When you're ready to deploy your React application, react-scripts enables you to create a production build using Webpack. This build is optimized for performance and reduces the overall size of your application assets, making it faster for end-users to load.

By relying on react-scripts, developers can focus more on building their React applications rather than spending time configuring complex build tools and development environments. It abstracts away the underlying complexities, making it easier to get started and maintain a React project.

Folder Structure​

The standard structure of a Create React App (CRA) application includes the following files and directories:

my-app/
  ├── .gitignore
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── index.js
  │   ├── App.js
  │   ├── App.css
  │   ├── index.css
  │   └── logo.svg
  ├── package.json
  ├── package-lock.json (or yarn.lock for Yarn users)
  └── README.md

Here's a brief overview of each item:

  1. node_modules: This directory contains all the dependencies of your project. It is managed by npm or Yarn and is automatically generated when you install the project dependencies.

  2. public: This directory holds the static assets and the main HTML file that serves as the entry point of your application.

    • index.html: The main HTML file that is served to the browser. It usually contains a <div> with an ID like root, where the React app will be mounted.
    • favicon.ico: The icon that appears in the browser's tab or title bar.

  3. src: This directory is where most of your application code resides.

    • index.js: The entry point of your React application. This file typically contains the code to render the root React component into the DOM.
    • App.js: The main component of your application. You can define your application's layout and structure here.
    • App.css: CSS file specific to the App.js component.
    • index.css: Global CSS file that applies styles to the entire application.
    • logo.svg: A sample SVG image used in the default App.js component.

  4. package.json: This file contains metadata about the project and lists its dependencies, scripts, and other configuration settings.

  5. package-lock.json (or yarn.lock): This file is automatically generated by npm or Yarn and ensures that the dependencies are installed with the same versions across different machines.

  6. README.md: A markdown file that provides information and documentation about the project.

Please note that the Create React App structure can be extended or modified based on the specific needs of your project, but this is the basic and commonly used structure provided by Create React App when you first initialize a new application using create-react-app.