方式，项目做出反应与快速

Question

我和反应，和的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 

使用自耕农创建发电机反应，fullstack 或者，你可以简单地使用yeoman react generator做这一切的东西，但要小心发电机，他们有时锻炼你的部署过程。