Основы React: От React к Next.js

До этого момента мы изучали, как можно начать работать с React. Вот как выглядит финальный код. Если вы начинаете отсюда, вставьте этот код в файл index.html в вашем редакторе кода.

index.html

<html>
  <body>
    <div id="app"></div>
 
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
 
    <script type="text/jsx">
      const app = document.getElementById("app")
 
      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>
      }
 
      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"]
 
        const [likes, setLikes] = React.useState(0)
 
        function handleClick() {
          setLikes(likes + 1)
        }
 
        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
 
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        )
      }
 
      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

В последних главах вы познакомились с тремя основными концепциями React: компоненты, пропсы и состояние. Прочное понимание этих концепций поможет вам начать создавать приложения на React.

Когда дело доходит до изучения React, лучший способ научиться — это практиковаться. Вы можете постепенно внедрять React, используя <script> и то, что вы уже изучили, чтобы добавлять небольшие компоненты на существующий сайт. Однако многие разработчики считают, что пользовательский и разработческий опыт, который предоставляет React, настолько ценен, что сразу начинают писать всё фронтенд-приложение на React.

От React к Next.js

Хотя React отлично подходит для создания пользовательского интерфейса, требуется дополнительная работа, чтобы превратить этот интерфейс в полностью функциональное и масштабируемое приложение. Также существуют новые функции React, такие как серверные и клиентские компоненты, которые требуют использования фреймворка. Хорошая новость в том, что Next.js берёт на себя большую часть настройки и конфигурации, а также предоставляет дополнительные функции для создания React-приложений.

Далее мы перенесём пример с React на Next.js, обсудим, как работает Next.js, и познакомим вас с различиями между серверными и клиентскими компонентами.

От React к Next.js

От React к Next.js

On this page