Scotty 项目使用教程

Scotty 项目使用教程

scotty Meteor React Redux boilerplate with Server-Side Rendering 项目地址: https://gitcode.com/gh_mirrors/sco/scotty

1. 项目的目录结构及介绍

scotty/
├── client/
│   ├── imports/
│   │   ├── components/
│   │   ├── containers/
│   │   ├── routes/
│   │   └── styles/
│   └── main.js
├── server/
│   ├── imports/
│   │   ├── api/
│   │   └── publications/
│   └── main.js
├── .babelrc
├── .editorconfig
├── .gitignore
├── LICENSE
├── README.md
├── package-lock.json
└── package.json

目录结构介绍

• client/: 客户端代码目录，包含所有前端代码。

  • imports/: 客户端导入的模块，包括组件、容器、路由和样式。
  • main.js: 客户端的入口文件。

• server/: 服务器端代码目录，包含所有后端代码。

  • imports/: 服务器端导入的模块，包括API和发布。
  • main.js: 服务器端的入口文件。

• .babelrc: Babel配置文件，用于配置JavaScript的转译。

• .editorconfig: 编辑器配置文件，用于统一代码风格。

• .gitignore: Git忽略文件，指定哪些文件或目录不需要被Git管理。

• LICENSE: 项目许可证文件。

• README.md: 项目说明文件。

• package-lock.json: 锁定依赖包版本的文件。

• package.json: 项目配置文件，包含项目的依赖和脚本。

2. 项目的启动文件介绍

客户端启动文件 (client/main.js)

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../imports/reducers';
import App from '../imports/components/App';

const store = createStore(reducers, applyMiddleware(thunk));

Meteor.startup(() => {
  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('render-target')
  );
});

服务器端启动文件 (server/main.js)

import { Meteor } from 'meteor/meteor';
import '../imports/api/tasks';

Meteor.startup(() => {
  // 启动服务器时执行的代码
});

3. 项目的配置文件介绍

package.json

{
  "name": "scotty",
  "version": "1.0.0",
  "description": "Meteor React Redux boilerplate with Server-Side Rendering",
  "main": "index.js",
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "meteor-node-stubs": "~0.2.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.0",
    "redux": "^3.0.0",
    "redux-thunk": "^2.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^7.0.0",
    "eslint": "^3.0.0",
    "eslint-plugin-react": "^6.0.0"
  },
  "license": "MIT"
}

.babelrc

{
  "presets": ["es2015", "react"]
}

.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.gitignore

.DS_Store
node_modules/
.meteor/local/

通过以上配置文件和目录结构，您可以更好地理解和使用Scotty项目。

scotty Meteor React Redux boilerplate with Server-Side Rendering 项目地址: https://gitcode.com/gh_mirrors/sco/scotty