Учебное пособие по созданию приложения Full Stack React (часть 1)

Давайте узнаем, как создать полнофункциональное приложение React с нуля

Современные веб-приложения стали более мощными и сложными в создании. Речь идет не только о рендеринге файлов HTML и CSS с внутреннего сервера. С такими фреймворками, как React, создание проекта с большим количеством интерфейсов стало намного проще.

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

Ингредиенты для полнофункционального приложения React:

1. Создавайте повторно используемые компоненты
2. Разделите код на мелкие компоненты
3. React Router
4. Управление состоянием - API контекста
5. Бэкэнд: REST API

Разберитесь в приложении - Помощник экзаменатора

Exam Assistant - это веб-приложение для студентов, помогающее им с экзаменами, которое содержит список предметов, и каждый предмет будет иметь аудиозаметки по разным темам. В этом руководстве мы будем создавать только интерфейсную часть приложения. Бэкэнд API будет хранить аудиофайлы в базе данных, которые будут загружены учителями.

Дизайн приложения аналогичен дизайну приложения Spotify со списком воспроизведения аудиофайлов для студентов.

Создание приложения React

npx create-react-app exam-assistant

Создайте приложение React, набрав указанную выше команду в терминале. Первые два шага при разработке приложения - это понимание необходимых компонентов и маршрутов. Для маршрутизации мы используем библиотеку с именем response-router-dom.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

В нашем проекте есть два маршрута: один для студентов - основная панель управления, а другой - для учителей - для загрузки заметок.

Мы будем использовать компонент Switch из response-router. <Switch /> гарантирует, что маршрут точно соответствует указанному пути.

function App() 
return (
     <Router basename={window.location.pathname || ''}>
     <Switch>
          <Route path="/teacher">
            <Teacher />
          </Route>
          <Route path="/">
            <Home />
          </Route>
      </Switch>
     </Router>
  );
}

Сборка основного компонента

Компонент Dashboard будет иметь боковую панель, текст и нижний колонтитул.

Компоненты боковой панели отобразят список тем. Компонент body покажет список звуковых заметок для темы, выбранной на боковой панели. компонент нижнего колонтитула покажет аудиофайл, выбранный из основного текста.

Здесь мы сталкиваемся с проблемой государственного управления и бурения пропеллеров. Обратите внимание, как компоненты в одной иерархии зависят от состояния друг друга. Чтобы решить эту проблему, мы должны передать реквизиты родительского компонента, чтобы он достиг всех дочерних компонентов.

Именно здесь появляется API контекста, который предоставляет нам объект глобального состояния, такой как уровень данных, поверх этих компонентов, чтобы к данным внутри контекстов можно было получить доступ из любых компонентов, заключенных в этот уровень данных.

Использование Context API

Создайте объект контекста.

export const StateContext = createContext();
export const useStateValue = () => useContext(StateContext);

Каждый объект Context поставляется с компонентом Provider React, который позволяет потребляющим компонентам подписываться на изменения контекста.

export const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);

Создайте объект начального состояния и редуктор, а затем оберните App Componetn в Провайдере состояния. Таким образом, все компоненты будут иметь доступ к начальному состоянию и редукторам.

<StateProvider initialState={initialState} reducer={reducer}>
      <App />
 </StateProvider>

Редукторы и Диспетчер

const reducer = (state, action) => {
  
  switch (action.type) {
    case "SET_TOKEN":
      return {
        ...state,
        token: action.token
      };
    case "SET_ITEM":
      return {
        ...state,
        item: action.item
      }
    case "SET_SONG":
      return {
        ...state,
        curr_song: action.song
      }
    case "SET_PLAYING":
      return {
        ...state,
        playing: action.playing
      }
    case "SET_AUDIO":
    let newplaylist = state.subject_audio
    newplaylist[action.name].push({'title':action.title,'teacher':'ajay'})
    return{
      ...state,
      subject_audio: newplaylist
    }
    default:
        return state;
};
}
export default reducer;

Редуктор принимает два параметра: текущее состояние и действие. Действие отправляется через такие компоненты, как событие onclick и т. Д., А редукторы создают изменения и возвращают новое состояние для поставщика состояния.

Пример отправки:

const [{ item,subject_audio }, dispatch] = useStateValue();
const onHandleClick = (id)=>{
    dispatch({
      type: "SET_SONG",
      song: id
    });
  }

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

Спасибо, что дочитали статью до конца. Надеюсь, это было полезно!

Ссылки:

Больше контента на plainenglish.io