Project Setup Standards

1. Development Standards and Code Style

// Folder and file naming conventions
- Use lowercase with hyphen-separated words (kebab-case)
- JavaScript variables: camelCase
- Constants: UPPER_CASE
- Components: PascalCase

// Code organization
- Use functional components with React Hooks exclusively
- Wrap components with React.memo() for performance
- Component structure:
  1. State management
  2. Redux hooks
  3. Custom hooks
  4. Business logic
  5. JSX rendering

// Redux implementation
- Modular reducers combined with combineReducers
- Async operations with redux-thunk in action creators
- Use Redux hooks instead of connect()

// Network requests
- Axios with custom wrapper
- API endpoints managed in dedicated files

2. React DevTools Detection

if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
  Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__).forEach(([key, value]) => {
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value === "function" ? () => {} : null;
  });
}

3. Port Configuration with CRA

// package.json
{
  "scripts": {
    "start": "set PORT=3005 && craco start"
  }
}

4. Redux Hooks Implementation

// Store setup
import {legacy_createStore, applyMiddleware, combineReducers, compose} from "redux";
import thunkMiddleware from "redux-thunk";

const reducer = combineReducers({
  recommend
});

const store = legacy_createStore(
  reducer,
  compose(applyMiddleware(thunkMiddleware))
);

5. Redux with Immutable.js

import {Map} from "immutable";

const defaultState = Map({
  topBanners: []
});

function reducer(state = defaultState, action) {
  switch (action.type) {
    case actionTypes.CHANGE_TOP_BANNERS:
      return state.set("topBanners", action.data);
    default:
      return state;
  }
}

6. State Access in Redux

export function fetchSongAction(ids) {
  return (dispatch, getState) => {
    getSongDetail(ids).then(res => {
      dispatch(updateSongAction(res.songs[0]));
      const currentSong = getState().getIn(["player", "currentSong"]);
    });
  };
}

7. Lazy Loading with Suspense

const Discover = React.lazy(() => import("@/pages/discover"));
const Recommend = React.lazy(() => import("@/pages/discover/recommend"));

function App() {
  return (
    <suspense fallback="{<div">Loading...}>
      <routes>
        <route element="{<Discover/" path="/discover">}/>
      </route></routes>
    </suspense>
  );
}

Project Deployment

1. Build Process

React builds generate three main chunks:

• vendor.[hash].chunk.js - Third-party depandencies
• main.[hash].chunk.js - Application code
• runtime~main.[hash].js - Webpack runtime logic

2. Nginx Configuration

user root;
http {
  include /etc/nginx/conf.d/*.conf;
}

React SSR with Next.js

1. Basic Settup

// pages/index.js
export default function Home() {
  return <div>Home Page</div>;
}

// pages/about.js
export default function About() {
  return <div>About Page</div>;
}

2. Layout Components

// components/Layout.js
export default function Layout({children}) {
  return (
    <>
      <header></header>
      <main>{children}</main>
      <footer></footer>
    >
  );
}

3. Data Fetching

export async function getServerSideProps() {
  return {
    props: {
      data: await fetchData()
    }
  };
}