To get some hands-on experience, I built a V2EX homepage using React: Live Demo GitHub Repository

The entire project is built on React. Initially, I planned to write the styles using inlineStyle, but I found it too cumbersome, so I reverted to using Sass. Finally, webpack was used for compilation. I initially thought about directly calling the V2EX API to create a purely front-end homepage, with all data fetched via Ajax. However, due to cross-origin issues, the front-end couldn’t retrieve the data, so I gave up on that approach. Ultimately, it ended up being a static page.

Let’s talk about some of the issues I encountered while coding. First, the file structure of the entire project is as follows:

│  .babelrc
│  .editorconfig
│  .eslintrc
│  .gitignore
│  index.html
│  index.js
│  package.json
│  readme.md
│  server.js
│  tree.txt
│  webpack.config.js
│
├─api
│      hot.json
│      latest.json
│
├─build
│      bundle.js
│      index.html
│
├─components
│      CommunityStatus.js
│      Footer.js
│      Header.js
│      Main.js
│      SearchInput.js
│      TopicsHot.js
│      UserLink.js
│      UserPanel.js
│
├─containers
│      App.js
│
├─sass
│  │  main.scss
│  │  _config.scss
│  │  _global.scss
│  │  _normalize.scss
│  │  _page.scss
│  │
│  └─components
│          _CommunityStatus.scss
│          _Footer.scss
│          _Header.scss
│          _Main.scss
│          _TopicHot.scss
│          _UserPanel.scss
│
├─static
│  └─images
│          [email protected]
│
└─utils
        getData.js

Advantages#

Let’s start by discussing the advantages of using React. It’s popular for good reason, and indeed has many benefits. Here, I’ll only focus on the practical advantages encountered during coding, without delving into performance improvements from the virtual DOM or similar topics.

Clear Structure#

Since React itself is component-based, the entire page is divided into several components based on its structure. Each component manages its own display and behavior, and they are finally combined through containers, resulting in a very clear structure. Component states are controlled via state or props. In my opinion, most components only need props, with state being managed only at the top-level component. This allows for clearer state management.

Easy to Maintain#

Because of the clear structure, it’s easy to foresee that this approach leads to easy maintenance. For example, if you need to change the structure or style of the header, you only need to modify Hearker.js and the corresponding _Header.scss. Or, if you need to change the logic, you just modify the props or state-related code within Hearker.js. You don’t have to search for that specific code within the entire page’s logic, as you might have done before. Compared to some older projects I currently maintain, the maintainability is a world apart. I no longer have to worry about where to find the code to make changes, nor do I have to complain about those endless, incomprehensible jQuery code snippets.

No Need for Template Engines#

Since React essentially comes with its own templating engine, there’s no need for separate template engines like Jade or EJS. You can just take the data and render it directly, like this:

<div>
  {Hot.map((topic, index) => (
    <TopicsHotItem {...topic} key={index} />
  ))}
</div>

Disadvantages#

Doubts About Component Granularity#

How many parts should a page be divided into? Should it be based on logic or page layout? To what level should components be divided? For example, should the V2EX header be one component or three? Of course, this might not truly be a disadvantage, but rather a result of my insufficient experience in determining how to divide components.

Unfriendly Error Messages#

For instance, I habitually wrote class instead of className. The console merely reported an error: ‘Did you mean className?’ However, it didn’t specify which file the error was in, let alone the exact line number. I had to find it myself. When a project grows larger, this would definitely be a pain.

Summary#

Overall, writing with React is quite enjoyable. Its advantages are also very clear: component-based, unidirectional data flow, functional programming. Although there are some immature issues, its benefits are still prominent. If possible, trying it out in some small projects would be a good idea.