流畅地用 Nodejs 开发一个 react 组件

Create a react component like a pro 🎉

不知道你有没有用过 vue-land/create-vue-component，这是一个通过命令行初始化 vue 组件的工具，项目结构简洁，无需配置文件。使用 Poi 构建，可以打包你写的组件，构建 demo，内置 jest 测试... 总之用来写 vue 组件非常好用，我已经离不开它了。

最近在写 react，在我想用 react 写点简单的组件骗点 star 的时候也想有这么流程的开发体验啊 (╯°A°)╯ 所以克隆了这个项目，魔改了一版，现在也能通过命令行初始化一个 react 组件了，基本上是体力活...比较适合我这种笨人...

项目名字叫 create-react-component-with-no-config 嗯... 我在 npm 上已经找不到可以用的简洁的名字了 😂

create-vue-component 有的功能都有，就是这么好（ no ）用（ face ）

项目地址： https://github.com/luyilin/create-react-component-with-no-config

用法：

Install

yarn global add create-react-component-with-no-config

Usage

create-react-component-with-no-config react-xxx # or create-react-component react-xxx # or type less crc react-xxx you can also create component in place

mkdir react-xxx && cd react-xxx crc

项目结构预览：

preview

用例： https://github.com/luyilin/react-multipane

Enjoy!

ionicwang 1楼•2 天前

在Node.js环境中直接开发React组件并不常见，因为React通常是在前端项目中使用的，而Node.js主要用于后端开发。不过，你可以使用Node.js来构建和编译React组件，这通常涉及到一个构建工具链，比如Webpack或者Create React App。

以下是一个简单的步骤说明，展示如何使用Create React App（一个流行的React脚手架工具）来创建一个React组件，并通过Node.js来运行开发服务器：

安装Create React App（如果尚未安装）：

npx create-react-app my-app
cd my-app

创建一个React组件（例如，MyComponent.js）：

// src/MyComponent.js
import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, I'm a React Component!</h1>
    </div>
  );
};

export default MyComponent;

使用这个组件（在App.js中）：

// src/App.js
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}

export default App;

运行开发服务器：

npm start

这将启动一个Node.js开发服务器，并在浏览器中自动打开你的React应用。Create React App已经为你配置好了Webpack等构建工具，使得开发过程更加流畅。

请注意，虽然Node.js在这里用于运行开发服务器，但实际的React组件开发仍然是在前端进行的。