Question

我从React，NodeJs和ExpressJs开始。我看过很多教程，但我不确定启动项目的正确方法？

我见过两种方法。第一个是express <project_name>，第二个是npm init。

哪个是正确的，如果没有正确的方法，那么当npm init最终包含表达时，为什么会以不同的方式初始化它们（在教程中）。

由于

Answer 1

npm init是一种很好的开始方式，因为您知道它会在项目目录中创建一个package.json文件，您可以在其中存储项目依赖项。

在此之后，您必须运行以下命令：

npm install --save-dev webpack
npm install --save-dev babel
npm install --save-dev babel-loader
npm install babel-core
npm install babel-preset-env
npm install babel-preset-react

或作为单行命令使用此：

npm install --save-dev webpack babel babel-loader babel-core babel-preset-env babel-preset-react

第一个命令将创建一个webpack.config.js文件。第二个命令将让babel在你的项目中使用，第三个命令使用babel-loader。

现在是时候创建看起来像的项目结构了：

projectFolder/
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.png

这是非常基本的项目结构。它没有服务器端结构。

完整结构如下：

react/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── docs
│   ├── data-fetching.md
│   ├── getting-started.md
│   ├── how-to-configure-text-editors.md
│   ├── react-style-guide.md
│   ├── README.md
│   └── recipes/
├── LICENSE.txt
├── node_modules/
├── package.json
├── README.md
├── src
│   ├── actions
│   ├── client.js
│   ├── components
│   │   ├── App
│   │   │   ├── App.js
│   │   │   ├── App.scss
│   │   │   ├── package.json
│   │   │   └── __tests__
│   │   │       └── App-test.js
│   │   ├── ContentPage
│   │   │   ├── ContentPage.js
│   │   │   ├── ContentPage.scss
│   │   │   └── package.json
│   │   ├── ErrorPage
│   │   │   ├── ErrorPage.js
│   │   │   ├── ErrorPage.scss
│   │   │   └── package.json
│   │   ├── Feedback
│   │   │   ├── Feedback.js
│   │   │   ├── Feedback.scss
│   │   │   └── package.json
│   │   ├── Footer
│   │   │   ├── Footer.js
│   │   │   ├── Footer.scss
│   │   │   └── package.json
│   │   ├── Header
│   │   │   ├── Header.js
│   │   │   ├── Header.scss
│   │   │   ├── logo-small@2x.png
│   │   │   ├── logo-small.png
│   │   │   └── package.json
│   │   ├── Link
│   │   │   ├── Link.js
│   │   │   └── package.json
│   │   ├── Navigation
│   │   │   ├── Navigation.js
│   │   │   ├── Navigation.scss
│   │   │   └── package.json
│   │   ├── NotFoundPage
│   │   │   ├── NotFoundPage.js
│   │   │   ├── NotFoundPage.scss
│   │   │   └── package.json
│   │   ├── TextBox
│   │   │   ├── package.json
│   │   │   ├── TextBox.js
│   │   │   └── TextBox.scss
│   │   ├── variables.scss
│   │   └── withViewport.js
│   ├── config.js
│   ├── constants
│   │   └── ActionTypes.js
│   ├── content
│   │   ├── about.jade
│   │   ├── index.jade
│   │   └── privacy.jade
│   ├── core
│   │   ├── db.js
│   │   ├── DOMUtils.js
│   │   ├── fetch
│   │   │   ├── fetch.client.js
│   │   │   ├── fetch.server.js
│   │   │   └── package.json
│   │   ├── Location.js
│   │   └── passport.js
│   ├── data
│   │   ├── queries
│   │   │   ├── content.js
│   │   │   ├── me.js
│   │   │   └── news.js
│   │   ├── schema.js
│   │   └── types
│   │       ├── ContentType.js
│   │       ├── NewsItemType.js
│   │       └── UserType.js
│   ├── public
│   │   ├── apple-touch-icon.png
│   │   ├── browserconfig.xml
│   │   ├── crossdomain.xml
│   │   ├── favicon.ico
│   │   ├── humans.txt
│   │   ├── robots.txt
│   │   ├── tile.png
│   │   └── tile-wide.png
│   ├── routes
│   │   ├── contact
│   │   │   ├── Contact.js
│   │   │   ├── Contact.scss
│   │   │   └── index.js
│   │   ├── home
│   │   │   ├── Home.js
│   │   │   ├── Home.scss
│   │   │   └── index.js
│   │   ├── login
│   │   │   ├── index.js
│   │   │   ├── Login.js
│   │   │   └── Login.scss
│   │   └── register
│   │       ├── index.js
│   │       ├── Register.js
│   │       └── Register.scss
│   ├── routes.js
│   ├── server.js
│   ├── stores
│   └── views
│       ├── error.jade
│       └── index.jade
├── test
│   └── stubs
│       └── SCSSStub.js
└── tools
    ├── build.js
    ├── bundle.js
    ├── clean.js
    ├── copy.js
    ├── deploy.js
    ├── lib
    │   ├── fetch.js
    │   └── fs.js
    ├── README.md
    ├── run.js
    ├── runServer.js
    ├── start.js
    └── webpack.config.js

使用yeoman generator-react-fullstack创建或者你可以通过简单地使用yeoman react generator来完成所有这些工作但是要小心生成器，它们有时会使你的部署过程变得更加强大。

正确启动NodeJs的方法，使用Express实现React项目

1 个答案: