Используйте React, чтобы построить удивленную версию самородков (1)

React.js

Недавно я изучаю реакцию, и мне интересно, смогу ли я использовать реакцию для выполнения проекта. Обычно я просматриваю наггеты, так что давайте попрактикуемся с наггетсами!

Можно ли подделать? 😂😂😂

инициализация

  • Инициализировать структуру проекта с помощью приложения create-реагировать
yarn create react-app react-juejin

Этот скаффолдинг автоматически поможет нам построить базовый проект и установить различные необходимые зависимости проекта React.Если во время процесса возникнет проблема с сетью, попробуйте настроить прокси или использовать другой реестр npm.
войти в проект и начать

cd react-juejin
yarn start
  • Установить Ant-Design
yarn add antd
  • Настройка стилей загрузки библиотек пользовательского интерфейса
    Весь проект нуждается в перенастройке, что и используется здесьreact-app-rewired (Решение сообщества для индивидуальной настройки приложения create-реагировать).
yarn add react-app-rewired customize-cra

Измените файл package.json следующим образом.

Создайте config-overrides.js в корневом каталоге, чтобы переопределить конфигурацию по умолчанию.

module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
  • Используйте babel-плагин-импорт Этот плагин используется для загрузки плагинов и стилей по запросу.
yarn add babel-plugin-import

Измените файл config-overrides.js, созданный на предыдущем шаге.

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);
  • добавить меньше загрузчика
    Люди привыкли использовать меньше, и его можно установить в соответствии с личными предпочтениями.Однако, ссылаясь на приведенное выше решение сообщества react-app-rewired, нет такого решения для перезаписи, как sass, поэтому, если вам нужно использовать sass, вы можете используйте другие решения, чтобы ввести его.
yarn add less less-loader

Изменить config-overrides.js

//const { override, fixBabelImports } = require('customize-cra');
const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        javascriptEnabled: true,
    }),
);

Для получения подробной информации о настройке см.официальный сайт муравьиного дизайна

Ввести избыточность

  • Установить
yarn add redux react-redux --save
  • Как использовать Учитывая, что в будущем может быть несколько редьюсеров, мы должны хорошо продумать структуру в начале и упростить комбинирование и использование нескольких редюсеров в будущем.
    (1) Создать редуктор
// 建议使用这中结构

// 1.定义默认数据
let initialState = {
    notificationCount: 0
}

// 2.Reducer
const pageHeaderReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'CHANGE_COUNT':
            return { ...state, notificationCount: action.notificationCount }
        default:
            return state
    }
}
// 3.导出
export default pageHeaderReducer;

(2) Создайте index.js как файл, объединяющий все редукторы.

import {combineReducers} from 'redux';

import pageHeaderReducer from './pageHeader.js';

const appReducer = combineReducers({
    pageHeaderReducer
});
export default appReducer;

(3) Используйте определенный редуктор в App.js

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import appReducer from './reducers/index.js';
// 使用合并后的那个Reducer
const store = createStore(appReducer);
class App extends Component {
  constructor(props){
    super(props);
  }
  ...
  render() {
    return (
      <Provider store={store}>
        <div className="App">
          ...
        </div>
      </Provider>
    );
  }
}

(4) Используйте избыточность в header/index.js

import { connect } from 'react-redux';

class Header extends Component {
    ...
    render() {
        ...
        return (
            <Affix offsetTop={this.state.top}>
                ...
                <Badge count={this.props.count} overflowCount={10}>
                    <a href="/">
                        <Icon type="notification" />
                    </a>
                </Badge>
            </Affix>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        count: state.pageHeaderReducer.notificationCount
    }
}

Header=connect(mapStateToProps)(Header)

export default Header;

До сих пор значение notificationCount можно было изменить извне, а через редукцию соответствующее значение count можно было получить нормально внутри компонента.
Более подробная конфигурация редукса может относиться кредукционная китайская документация

добавить маршрут

В навигации по главной странице есть 5 переключателей вкладок, соответствующих различному содержимому страницы. Далее мы расскажем, как переключаться между разным содержимым страницы с помощью react-router.

  • Установить реактивный маршрутизатор
yarn add react-router-dom --save
  • Как использовать
import { Switch, Route } from 'react-router-dom';
...
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() {
        return (
            <div>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/timeline' component={Home}/>
                    <Route path='/dynamic' component={Dynamic}/>
                    <Route path='/topic' component={Topic}/>
                    <Route path='/brochure' component={Brochure}/>
                    <Route path='/activity' component={Activity}/>
                </Switch>
            </div>
        );
    }
}

Приведенное выше точное означает абсолютное совпадение /, если точное не указано, / также будет соответствовать / временной шкале и т. д. Приведенный выше код обеспечивает эффект, аналогичный переключению панели вкладок.

  • навигация по вкладкам
render() {
        return (
            <ul>
                {this.state.navs.map((item,index)=>{
                    return <li key={item.path} className={item.isActived?'activeLi':''} onClick={this.handelClick.bind(this,index)}>
                                <Link to={item.path}>{item.text}</Link>
                            </li>
                })}
            </ul>
        );
    }

React-router предоставляет два метода Link и NavLik. Если вам нужно только сопоставить маршрут, вы можете использовать Link. Отличие NavLink в том, что вы можете добавлять стили к текущему выбранному маршруту, такие как activeStyle и activeClassName, написанные выше.
Более подробная конфигурация реактивного маршрутизатора может относиться кReact-router Китайская документация

На данный момент базовая структура завершена, а затем на каждую страницу необходимо добавить фактический контент.

Текущие визуализации показаны выше и будут постоянно обновляться. Подробности смотрите в приведенном выше коде.github, Добро пожаловать в лайк, ваш лайк - моя мотивация.

Категории