Construindo um Site de Curso Online com React: Tutorial Passo a Passo (2023)

Introdução

Se você deseja compartilhar seu conhecimento de maneira única e personalizada, criar um site de curso online é uma excelente opção. Neste tutorial, vamos explorar como construir um site de curso de página única usando React, proporcionando liberdade na criação de design e experiência do usuário.

Configuração com Create React App

Vamos começar configurando nosso site de curso usando Create React App:

$ npx create-react-app react-curso
$ cd react-curso
$ npm install --save react-router-dom

A instalação do React Router nos ajudará a criar páginas dinâmicas para o curso.

Configuração do Roteador e Criação de Páginas

Nosso aplicativo terá três páginas principais:

1. Página Inicial: Mostrará os cursos disponíveis.
2. Página do Curso: Exibirá informações específicas sobre um curso e suas lições.
3. Página da Lição: Apresentará detalhes de uma lição específica.

Vamos configurar o roteador e criar componentes para essas páginas.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from "react-router-dom";
import './index.css';

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

// src/App.js
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Course from './pages/Course';
import Lesson from './pages/Lesson';

function App() {
  return (
    <div className="App">
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/courses/:courseId" element={<Course />} />
          <Route path="/courses/:courseId/lessons/:lessonId" element={<Lesson />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;

Criando Dados do Curso

Para armazenar os dados dos cursos e lições, criaremos um arquivo courses.js. Este arquivo conterá um array de objetos, cada um representando um curso.

// src/courses.js
const courses = [
  {
    id: 1,
    title: "Fotografia para Iniciantes",
    description: "Phasellus ac tellus tincidunt...",
    lessons: [
      { id: 1, title: "Bem-vindo ao curso", description: "Lorem ipsum dolor sit amet...", vimeoId: 76979871 },
      { id: 2, title: "Como funciona uma câmera?", description: "Lorem ipsum dolor sit amet...", vimeoId: 76979871 },
      // ...
    ]
  },
  // Mais cursos...
];

export default courses;

Criando a Página Inicial

Agora, começaremos a construir as páginas, começando pela página inicial. Importaremos o array de cursos e mapearemos para criar resumos de cursos.

// src/pages/Home.js
import React from 'react';
import courses from '../courses';
import CourseSummary from '../components/CourseSummary';

function Home() {
  return (
    <div className="Home page">
      <header>
        <h1>Site de Cursos Online com React</h1>
      </header>
      {courses.map((course) => (
        <CourseSummary course={course} key={course.id} />
      ))}
    </div>
  );
}

export default Home;

Criando a Página do Curso

A próxima página é a página do curso. Vamos usar o useParams do React Router para obter o ID do curso dinamicamente e, em seguida, exibiremos detalhes do curso e resumos das lições.

// src/pages/Course.js
import React from 'react';
import { useParams } from 'react-router-dom';
import courses from '../courses';
import LessonSummary from '../components/LessonSummary';
import { Link } from 'react-router-dom';

function Course() {
  const { courseId } = useParams();
  const course = courses.find((course) => course.id === parseInt(courseId));

  return (
    <div className="Course page">
      <header>
        <p>
          <Link to={'/'}>Voltar para os cursos</Link>
        </p>
        <h1>{course.title}</h1>
        <p>{course.description}</p>
        <Link className="button primary icon" to={`/courses/${courseId}/lessons/${course.lessons[0].id}`}>
          Iniciar curso
        </Link>
      </header>
      <div>
        {course.lessons.map((lesson, index) => (
          <LessonSummary courseId={courseId} lesson={lesson} num={index + 1} key={lesson.id} />
        ))}
      </div>
    </div>
  );
}

export default Course;

Criando a Página da Lição

A última página é a página da lição, onde incorporaremos vídeos do Vimeo para cada lição. Também adicionaremos um botão "Completar e Continuar" para navegar para a próxima lição.

// src/pages/Lesson.js
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import Vimeo from '@u-wave/react-vimeo';
import courses from '../courses';
import CompleteAndContinueButton from '../components/CompleteAndContinueButton';

function Lesson() {
  const { courseId, lessonId } = useParams();
  const course = courses.find((course) => course.id === parseInt(courseId));
  const lesson = course.lessons.find((lesson) => lesson.id === parseInt(lessonId));

  const nextLessonId = () => {
    const currentIndex = course.lessons.indexOf(lesson);
    const nextIndex = (currentIndex + 1) % course.lessons.length;
    return course.lessons[nextIndex].id;
  };

  return (
    <div className="Lesson page">
      <header>
        <p>
          <Link to={`/courses/${course.id}`}>Voltar para {course.title}</Link>
        </p>
        <h1>{lesson.title}</h1>
      </header>
      <div className="Content">
        <Vimeo video={lesson.vimeoId} responsive />
        <CompleteAndContinueButton courseId={courseId} lessonId={nextLessonId()} />
      </div>
    </div>
  );
}

export default Lesson;

Conclusão

Este tutorial abrange os passos fundamentais para criar um site de curso online usando React. Desde a configuração inicial até a implementação de páginas dinâmicas, você agora tem as bases para criar um ambiente educacional personalizado. Lembre-se de explorar ainda mais e adicionar recursos personalizados conforme necessário.

Esperamos que este guia tenha sido útil para começar a construir seu próprio site de curso online.