安装与使用

使用架手架创建 React 项目

安装并使用 create-react-app 创建 react 项目

yarn global add create-react-app
create-react-app react-test
cd react-test
yarn start

或者:

npm create react-app react-test
# or
yarn create react-app react-test

项目默认运行在 http://localhost:3000/

目录结构

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
    manifest.json
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

起始页面是 public/index.html , 应用的起始脚本是 src/index.js

看到 src/index.js 页面下有一句:

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

使用 ReactDOM.render 渲染React组件, 这里将整个应用程序挂载到 .root 元素下, 在 public/index.html 中能找到对应的元素, 初始挂载的组件是 <App />

src/index.js 初始化示例

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

弹出设置

如果想要改变 webpack 配置, 可以使用以下命令弹出设置(不可逆)

$ yarn eject

可以看到多出 configscripts 文件夹, 分别是 webpack 的一些配置以及项目运行时的一些配置。

webpack 配置

引入 css

引入 css, 只需要使用 import './App.css'; 即可, 在此 css 中的样式将渲染到当前组件。

引入静态资源

比如一些图片, 如 jp(e)g gif svg bmp 等:

import logo from './logo.svg';
class App extends React.Component {
  render() {
    return (
      <div className="App">
          <img src={logo} className="App-logo" alt="logo" />
      </div>
    );
  }
}

引入 stylus

如果要引入 stylus, 则需要先安装:

$ yarn add -D stylus stylus-loader

在 eject 后修改配置 config/webpack.config.dev.js:

module: {
  strictExportPresence: true,
  rules: [
    ...
    oneOf: [
      ...
      {
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.styl$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      {
        test: /\.styl$/,
        loaders: ['style-loader', 'css-loader', 'stylus-loader']
      },
    ]
  ]
  ...
}

在组件中引入 styl 即可:

import './App.styl';

引入 less

同样地, 先 eject, 再安装相应的依赖:

$ yarn add -D less less-loader

config/webpack.config.dev.js 中修改配置:

module: {
  strictExportPresence: true,
  rules: [
    ...
    oneOf: [
      ...
      {
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.less$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
    ]
  ]
  ...
}

在组件中引入 less 即可:

import './App.less';

引入 scss 或 sass

同样地, 先 eject, 再安装相应的依赖:

$ yarn add -D sass-loader node-sass

config/webpack.config.dev.js 中修改配置:

module: {
  strictExportPresence: true,
  rules: [
    ...
    oneOf: [
      ...
      {
        exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/, /\.scss$/, /\.sass$/],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },
      {
        test:/\.(scss|sass)$/,
        loaders:['style-loader','css-loader','sass-loader']
      },
    ]
  ]
  ...
}

在组件中引入 scss 或 sass 即可:

import './App.scss';

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress