React Project Description

A typical React project consists of multiple files and folders, each part having its specific role.

This chapter provides a basic explanation of React project code to help you understand the project structure and the functions of each part.

  • A React project consists of multiple files and folders. The core files include:index.html、index.jsandApp.js。

  • React components are the basic building blocks of an application, and can be function components or class components.

  • JSX is the core syntax of React, used to describe UI.

  • Props and State are the main ways to manage data in React components.

Project Structure

A React project typically includes the following files and folders:

my-react-app/
├── node_modules/       # 项目依赖的第三方库
├── public/             # 静态资源文件夹
│   ├── index.html      # 应用的 HTML 模板
│   └── ...             # 其他静态资源（如图片、字体等）
├── src/                # 项目源代码
│   ├── App.js          # 主组件
│   ├── App.css         # 主组件的样式
│   ├── index.js        # 项目入口文件
│   ├── index.css       # 全局样式
│   └── ...             # 其他组件和资源
├── package.json        # 项目配置和依赖管理
├── package-lock.json   # 依赖的精确版本锁定文件
└── README.md           # 项目说明文档

Core Files Analysis

public/index.html

public/index.htmlIs the HTML template file of the React application.

React will render the component to<div id="root"></div>inside.

React will render the component to
inside.

Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js

src/index.jsIs the entry file of the React application.

src/index.jsResponsible for rendering the root component (usually App) into div#root in index.html.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

src/App.js

src/App.jsIs the root component of the React application.

src/App.jsUsually contains the main logic and structure of the application.

Example

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

src/App.css

src/App.css Is the style file for the App component.

Example

.App {
  text-align: center;
  margin-top: 50px;
}

src/index.css

src/index.cssIs the global style file, usually used to define global styles or reset browser default styles.

Example

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

package.json

package.jsonThis is the project configuration file, containing the project's metadata, dependencies, and scripts.

Example

{
  "name": "my-react-app",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start", // Start the development server
    "build": "react-scripts build", // Build production code
    "test": "react-scripts test",   // Run tests
    "eject": "react-scripts eject"  // Eject configuration (advanced usage)
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  }
}

Basic Structure of React Components

React components are the core building blocks of React applications.

A component usually contains the following parts:

1. Function Components

Components defined using functions.

Example

import React from 'react';

function MyComponent() {
  return (
    <div>
      <h2>This is a component defined by a function.</h2>
    </div>
  );
}

export default MyComponent;

Explanation:

  • import React from 'react';: Imported the React library; React is a JavaScript library for building user interfaces.

  • function MyComponent() { ... }: This is a function component. A function component is a JavaScript function that returns JSX.

  • return (...): The component'sreturnstatement returns a JSX element. JSX is a syntax extension of JavaScript, allowing you to write HTML-like code in JavaScript.

  • export default MyComponent;: TheMyComponentcomponent is exported as the default export. This way, other files canimport MyComponent from './MyComponent';import and use this component.

2. Class Components

Components defined using classes (now less common; function components are recommended).

Example

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h2>This is a class component.</h2>
      </div>
    );
  }
}

export default MyComponent;

Explanation:

  • import React from 'react';: Import the React library; this is the foundation for using React.

  • import { Component } from 'react';: From the React library, importComponentclass.ComponentIs the base class for React class components; all class components need to extend it.

  • class MyComponent extends Component { ... }: Defined a namedMyComponentclass component. It extendsComponentclass, so it can use the features of React class components (such as lifecycle methods, state management, etc.).

  • render() { ... }: renderIs the method that must be implemented in a class component. It is responsible for returning the component's UI structure (JSX).

    • return (...): Returns a JSX element, describing the component's UI.

    • <div><h2>这是一个类组件</h2></div>: This is a simple JSX structure, containing adivand ah2heading.

  • export default MyComponent;: TheMyComponentcomponent is exported as the default export. This way, other files canimport MyComponent from './MyComponent';import and use this component.

3、JSX

JSX is a syntax extension of JavaScript, allowing you to write HTML-like code in JavaScript.

Example

const element = <h1>Hello, JSX!</h1>;

4、Props

Props are input parameters of a component, used to pass data from a parent component to a child component.

Example

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

5、State

State is the internal state of a component, used to manage the component's data.

Example (Using useState Hook)

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>
  );
}

export default Counter;

React Project Running Process

Start Development Server

Runnpm startoryarn start, start the development server.

Open your browser and visit http://localhost:3000 to view the application.

Build Production Code

Runnpm run buildoryarn build, generating optimized production code.

Run Tests

Runnpm testoryarn test, executing the project's test cases.

Other Extensions