Styled React Boilerplate 使用教程

Styled React Boilerplate 使用教程

styled-react-boilerplateMinimal & Modern boilerplate for building apps with React & styled-components项目地址:https://gitcode.com/gh_mirrors/st/styled-react-boilerplate

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

styled-react-boilerplate/
├── src/
│   ├── components/
│   ├── styles/
│   ├── index.js
│   └── App.js
├── .gitignore
├── .npmrc
├── .stylelintrc
├── babel.config.js
├── LICENSE
├── netlify.toml
├── now.json
├── package.json
├── README.md
├── webpack.config.js
└── travis.yml

• src/：包含项目的源代码。
  • components/：存放 React 组件。
  • styles/：存放全局样式文件。
  • index.js：项目的入口文件。
  • App.js：主应用组件。
• .gitignore：指定 Git 忽略的文件和目录。
• .npmrc：npm 配置文件。
• .stylelintrc：stylelint 配置文件。
• babel.config.js：Babel 配置文件。
• LICENSE：项目许可证。
• netlify.toml：Netlify 配置文件。
• now.json：Now 配置文件。
• package.json：npm 包配置文件。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。
• travis.yml：Travis CI 配置文件。

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，主要负责渲染 React 应用到 DOM 中。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

src/App.js

这是主应用组件，通常包含应用的路由和全局状态管理。

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

export default App;

3. 项目的配置文件介绍

webpack.config.js

Webpack 配置文件，定义了如何打包和构建项目。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

babel.config.js

Babel 配置文件，用于转换现代 JavaScript 代码。

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

.stylelintrc

stylelint 配置文件，用于检查和规范 CSS 代码。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "single"
  }
}

package.json

npm 包配置文件，包含项目的依赖和脚本。

{
  "name": "styled-react-boilerplate",
  "version": "1.0.0",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
 

styled-react-boilerplateMinimal & Modern boilerplate for building apps with React & styled-components项目地址:https://gitcode.com/gh_mirrors/st/styled-react-boilerplate