Как создать статический блог использование инструментов Gatsby, CosmicJS и React


Содержание материала:

1.3 Создать новое React приложение

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

В данном разделе описаны несколько популярных наборов инструментов React, которые помогают в таких задачах, как:

Масштабирование множества файлов и компонентов.

Использование сторонних библиотек из npm.

Раннее обнаружение распространенных ошибок.

Отслеживаемое редактирование CSS и JS в режиме разработки.

Оптимизация кода для релиза.

Рекомендуемые в данном разделе наборы инструментов не требуют настройки для начала работы.

1.3.1 Возможно вам не нужен набор инструментов

Если вы не испытываете проблем, описанных выше, или пока не чувствуете себя комфортно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега

Создаём новое React-приложение

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

На этой странице описано несколько популярных наборов инструментов React, которые помогают в таких задачах как:

  • Масштабирование до большого количества файлов и компонентов.
  • Использование сторонних библиотек из npm.
  • Раннее обнаружение распространённых ошибок.
  • Отражение изменений CSS и JS на лету в процессе разработки.
  • Оптимизация кода для продакшена.

Рекомендованные на этой странице инструменты не требуют дополнительной настройки для начала работы.

Возможно, вам не нужен дополнительный набор инструментов

Если у вас нет проблем, описанных выше, или пока не чувствуете себя уверенно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега

Что значит static в React

Если вкратце, то статические свойства — это свойства класса, а не экземпляра класса.

Кто использует React, часто видит ключевое слово static:

Копируя код со stackoverflow, да и вообще, обычно не задумываешься над такими мелочами, особенно, если всё работает.

Статическими свойствами объявляются defaultProps, propTypes, contextTypes и displayName. А вот state (состояние компонента) не является статическим свойством.

Давайте разберём простой пример.

Если у нас есть два экземпляра компонента Foo, то displayName, propTypes, defaultProps всегда будут одинаковыми для обоих экземпляров, но состояние каждого экземпляра сможет обновляться независимо друг от друга.

thisFoo будет иметь своё состояние, и thatFoo будет иметь своё состояние, но оба будут иметь одинаковые статические свойства: displayName, propTypes и defaultProps.

Gatsby Blog

Blazing fast blog built using Gatsby that utilizes the power of Cosmic JS.

You may also like

Get Started Free

Products

Developers

Community

Company

  • Case Studies
  • Blog
  • About
  • Contact Us
  • Terms & Privacy
  • © 2020 Cosmic JS Inc.

Connect

  • Slack
  • GitHub
  • Twitter
  • YouTube
  • Facebook
  • LinkedIn
  • Instagram

Free Bucket Options

You can have up to 5 Free Buckets at any given time each with a 14-day trial. During this trial, you have free access to all Bucket Add-ons including Webhooks, Localization, Revision History and more.

At any point during of your 14-day trial you can upgrade your Bucket, use the Free Bucket Referral Program to extend your Free Bucket free trial time, or earn a Free Bucket forever by contributing to the Cosmic JS community.

Contribute

Get rewarded for contributing Apps, Extensions, Functions, and Learning Center Articles for our community. Once your contribution is approved, you will receive a Free Bucket forever and free Cosmic JS swag!

Referral Program

Refer a friend to signup and get 14 more days of trial time which can be applied to any of your Free Buckets. There is no limit to the number of referrals you can use to get extended trial time.

Overage Policy

Overage rate: $80 per additional 100,000 API requests per month.

If you go over your plan’s API request limit for the month, Cosmic JS support will reach out to inform you. At the point of contact you will have the choice to either upgrade your Bucket to the next higher plan or pay the overage charges at the end of the calendar month.

API Requests Add-on Available: $54.90 per additional 100,000 API requests per month.


Генерация статичных сайтов с Gatsby.js

15 ноября 2020 г. // @ yenbekbay // время чтения: 5 минут

Этот сайт (anvilabs.co) работает на Gatsby – новом статичном генераторе [1] , написанном специально для работы с React. В отличие от таких популярных решений как Jekyll, Hugo или Hexo, Gatsby не использует шаблоны (темплейтинг) и вместо этого опирается на Webpack и компоненты от React. В результате, вы получаете такие приятные плюшки как автообновление и моментальные переходы между страницами.

Для меня Gatsby был особенно ценной находкой, потому что с ним я, будучи разработчиком на React и React Native, могу использовать все те инструменты, которые я использую в своей повседневной работе.

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

Кстати, весь исходный код для этого сайта открыт и доступен на GitHub.

Приведённый код в этой статье написан на ES2020 с тайпингом на Flow. Имейте это в виду перед тем, как что-то копировать к себе.

§ Использование веб-шрифтов

Если на своем сайте вы используете веб-шрифты, существуют два явления, с которыми вы можете столкнуться:

  • FOIC (“flash of invisible content”) – когда ваш браузер пытается стилизовать текст шрифтом, который он еще не успел загрузить. В результате этого явления, весь текст, использующий веб-шрифты на странице, становится будто бы написанным невидимыми чернилами.
  • FOUC (“flash of unstyled content”) – вместо того чтобы показывать невидимые чернила, браузер стилизует текст запасным шрифтом и заменяет его на ваш веб-шрифт, когда тот наконец подгружается.

Google Chrome переходит на FOUC – перестает ждать окончание загрузки веб-шрифта – через 3 секунды (или 0 секунд при 2G подключении). Но в некоторых других браузерах, в том числе в Safari на iOS устройствах, такого поведения не наблюдалось – то есть вы получаете только FOIC и вынуждены ждать загрузки веб-шрифта перед тем, как иметь возможность что-то прочитать.

§ Предотвращение FOIC

Чтобы минимизировать FOIC на вашем сайте вы можете использовать Font Face Observer или Web Font Loader.

На этом сайте, в частности, я использовал Web Font Loader. Ниже представлены все шаги, которые вам нужно выполнить чтобы интегрировать Web Font Loader в ваш проект (оригинальные коммиты: 5af2cc, cf2c49)

JAMstack: Как создать свой блог используя Gatsby + Contentful + Netlify

Вы уже слышали о новом подходе JAMstack? Возможность писать веб-приложения на любимом фреймворке, управлять контентом из админ панели, а на выходе получать полностью валидные HTML-страницы построенные согласно с самыми последними рекомендациями SEO, PWA и a11y.

Интересно? Тогда вот список рассматриваемых вопросов в этой статье:

  • Что это за новый стек и зачем он нужен?
  • Как запустить базовое приложение используя Gatsby?
  • Работа с Contentful и создание первой порции данных
  • Как связать Contentful и Gatsby используя GraphQL?
  • Настроить автоматический деплоймент используя Netlify

JAMstack

Как известно: “Всё новое это давно забытое старое” и вот очередное подтверждение ― мода на статические сайты возвращается. Что представлял собой интернет десять лет назад? Это был PHP сервер-рендеринг, который подставлял данные из БД в HTML-шаблоны и отправлял на клиент.

На смену этому подходу пришли JavaScript фреймворки, которые в последние годы представлены святой троицей веба React Angular VueАминь. В чем было кардинальное отличие? В скорости и отзывчивости интерфейса, ведь теперь вся логика сайта находилась на клиенте, и на любое движение мышью можно вызывать красивую анимацию с изменением контента, отправкой запросов на API.

Что дальше? JAM предлагает:

  • никакого server-side рендеринга, да и вообще убрать сервер как таковой
  • никакого client-side рендеринга, долой

Клиент всегда получает, заранее отрендеренную страницу с полностью валидной версткой и вопрос о производительности теперь касается только скорости интернет соединения (но конечно же не стоит забывать про коэффициент прямоты рук разработчиков).

Инструментарий

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

Список лучших инструментов на 2020 год:

Gatsby ― это генератор статических сайтов из React + GraphQL приложений. Почему именно такой выбор, а не Angular или Vue я затрудняюсь ответить, но скорее всего дело в злой статистике, которая говорит что не смотря на все споры, React самый популярный фреймворк последних трех лет (не забросайте меня камнями в комментариях, за это утверждение, на самом деле мне заплатили). Для более наглядного представления create-react-app компилирует код в JavaScript билд, для дальнейшего рендера при запуске страницы, Gatsby генерирует полноценные HTML-страницы, с валидной версткой, которые показываются как есть, даже с выключенным JS.

Contentful ― система управления контентом на статических страницах. Это WordPress, который не сохраняет связи между шаблонами и данными в БД, а вместо этого меняет данные непосредственно в HTML файлах.

Netlify ― это очень простая в использовании система деплоймента, которая позволяет связать большинство популярных файловых хостингов с JAM приложением, да ещё и на HTTPS протоколе.

От теории к практике

Теперь когда определились с инструментами ― можно приступать.

Contentful

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

Система управления контентом базируется на двух сущностях ― Content model, описывающая структуру и типы данных, и непосредственно Content. Для начала создадим простую модель для нашего блога. Content model состоит из типов данных, например для блога типами данных будут: Article, Person.

конечно же можно выбрать любой уровень абстракции, который по душе, например можно упразднить Person и указывать данные об авторе внутри Article, как _Article.authorname

Далее, используя уже созданные типы данных, добавляем контент, для текстов можно использовать SaganIpsum для картинок Unsplash.

Gatsby

Открываем терминал и создаем рабочую среду

Что получилось? React + GraphQL приложение собираемое с помощью Gatsby, что значит что можно любой старый проект, который долго рендерится перевести в статический HTML сайт и получить прирост в скорости в несколько раз.

Gatsby+Contentful

Создаем файл .env в корне приложения со следующим содержимым:

Расширяем конфигурацию в gatsby-config.js:

Перезапускаем Gatsby сервер и если консоль не показывает никаких ошибок, значит соединение с Contentful установлено и можно переходить дальше.

Gatsby+GraphQL+Contentful

Если Вы еще не знакомы с GraphQL, то не переживайте потому что это достаточно просто. Наш сайт сейчас находится по адресу:

Но мы пока что оставим его и откроем вторую вкладку:

Перед нами IDE для GraphQL прямо в браузере. С ним очень удобно строить запросы и тестировать их. Кликните на Docs в верхнем правом углу, чтобы развернуть сайдбар с документацией, но сюрприз, это не документация к GraphQL, это документация Вашего API. Разверните список Query чтобы увидеть все доступные схемы для запросов, с их типами данных.

Интересующие нас схемы имеют примерно следующее название:

contentfulВашТипДанных — один экземпляр
allContentfulВашТипДанных — список экземпляров

  • contentfulArticle
  • contentfulPerson
  • allContentfulArticle
  • allContentfulPerson

Используя левую панель построим правильный запрос для наших данных (попробуйте автодополнение, очень удобно).

Что можно отметить из структуры запросов:


  • чтобы получить URL для файла, нужно обращаться по пути typeName.file.url
  • чтобы получить текст из типа Long text, идем по пути typeName.typeName
  • чтобы получить список экземпляров какого-то типа нужно использовать следующий путь allContentfulName.edges

Переносим схему запроса в проект и рендерим их как обычные данные в React-приложении. Общепринятым Best Practice считается использование компонента из пакета gatsby, который уже установлен в проект.

Как это работает? В query передается схема запроса GraphQL, а в render наш любимый JSX. Используйте деструктуризацию чтобы сделать код более читабельным.

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

Разместим наш проект на GitHub, откуда его можно будет деплоить в следующем шаге.

Настраиваем Netlify

Создаем аккаунт используя тот сервис, на котором планируется размещение проектов. Я выбрал GitHub, поэтому после успешной авторизации настроим новый проект, клик на New site from Git. Подключаем наш репозиторий, а Netlify автоматически определит что это Gatsby проект и настроит все скрипты для сборки.

Выбираем нужную ветку, и не забываем про переменные окружения, для этого раскрываем меню Advanced settings и добавляем содержимое локального файла .env и подтверждаем настройки.

Осталось добавить хук на обновление контента. Переходим в настройки:

Deploy settings → Build hooks → Add build hook

Устанавливаем любое понятное название, для примера «Contentful hook», выбираем ветку с которой будем делать билд и подтверждаем. Результатом будет ссылка, копируем и идем в панель Contentful:

Settings → Webhooks

Ищем на правой боковой панели темплейт для Netlify и в два клика связываем две системы. Пробуем изменить контент и смотрим как новые данные появляются на сайте.

Итого

JAM-stack совмещает в себе решение проблем предшествующих подходов и похоже претендует на захват власти и всемирную популярность, но революция ли это? Ничего нового и особенного нет, но это самая передовая методология последних двух лет, там, на чужбине, а у нас? Мы только-только начали переводить проекты с WordPress на React и это однозначно прогресс, но может чтобы не остаться за бортом, как легендарный индийский аутсорс, нам пора делать более решительные шаги?

How to Build a Documentation App With Gatsby and Cosmic JS

Documentation. Documentation. Let’s say for a second that you want to create a way to easily publish and read docs, err… documentation. By the end of this read you will be able to do just that, all with the power of Gatsby (a static site generator) and Cosmic JS (an easy to setup and use Content Management System). Grab some coffee, find a comfy chair and let’s build something cool.

TL:DR

1.0 — Introduction

Gatsby is an easy to use framework for generating static web site files. It comes bundled with all sorts of hotness, like React JS for building web components, and GraphQL for handling our component state without the need to configure something Redux to handle external data.

Cosmic JS will handle our publishing and data storage. It’s easy to set up and easy to implement for apps like this, yet scalable enough to handle more complex projects across larger teams. We will use this to create and store our documentation content. This will us allowing us to focus on how our users interact with our app, and let Cosmic JS do all the heavy lifting.

Well no… we are going to convert our docs from markdown to html, since that’s what web Browsers like. To do this we are going to use a package called Showdown, that can handle parsing and converting markdown to and from HTML.

Oh yeah, you will need to have access to a terminal, a Cosmic JS account with abucket and a documentation object, and a recent(ish) version of Node JS installed on your machine in order to install the necessary software to make this app work. I’m going to be using yarn to run my build scripts but you can npm if you like. Just remember to choose one(npm or yarn) and stick with it as things can get little hairy when it’s time to deploy.

1.1 — Setting up our Development Environment

To get started we will want to install Gatsby and install our dependencies. Easy peasy. Gatsby uses a handy command line interface (CLI) to build our initial project files. First we will want to install the CLI by installing it globally with npm:

$ npm install -g gatsby-cli

This gives us access to the `gatsby` command and allows us to initialize our project. Run the following script to create a new directory filled with a project template:

$ gatsby new gatsby-docs

Wait a second to allow the script to complete and you will notice a new directory created called `gatsby-docs`. Let’s see what’s inside by changing directories:

you should see a directory structure similar to this:

Much of this will look familiar if are used to creating Node applications but some of this will be a little new. You should be able to get a development server up and running by executing the start script:

After a second you should see a success prompt letting you know that everything has compiled properly and your app is live.

Now you can open up your browser pointing to `localhost:8000` and see the compiled output. It should look something very similar to this:

Congrats! You have set up a working Gatsby site. But before we dig into what is going on under the covers let’s install the rest of our dependencies that will power our app:

$ yarn add cosmicjs showdown highlight.js dotenv node-sass gatsby-plugin-sass gatsby-source-graphql

Whoa. That’s a lot of newly installed packages, but each of these are super useful I swear.

cosmicjs will be used to add new content to our app.

showdown is the text parser I mentioned that will handle markdown and html conversion.

highlight.js is going to handle our syntax highlighting inside of our converted markdown text.

dotenv is an environment variable package that will make sure our sensitive tokens and/or runtime environment is configured from a `.env` file

node-sass and the gatsby-plugin-sass packages will allow to use .scss files to style our components.

gatsby-source-graphql will allow us to leverage GraphQL queries on external data (ie — use the Cosmic JS GraphQL api)

With all of that business out of the way we can look at our directory and configure our Gatsby source code to run properly.

2.0 — Configuring Gatsby

Now we can dig into our directory and make sure Gatsby is configured properly for using the technologies that will scalably and sensibly power our app.

The first file we will want to look into is gatsby-config.js . This file is used to configure high level plugins that allow any source code we write to be bundled properly when our static files are built. It also contains a little bit of metadata that describes our site site to users and can be queried in our React Components.

Here we will add our newly installed plugins to the default configuration you see before you. First we just need to add gatsby-plugin-sass to the plugins list, allowing us to import sass files and leverage sass to write sensible styling specs for each component.

Next up we will add an object to end of our plugins list for gatsby-source-graphql that will configure our external GraphQL API endpoint to allow us to fetch data from Cosmic JS. Here’s how things should look:

Now we are set to make GraphQL queries to the Cosmic JS GraphQL API! Next, Let’s talk for a second about Gatsby and how things are going to break down.

2.1 Building our app with Gatsby

I’ve mentioned that Gatsby is a static site generator, but what does that mean? Gatsby takes all the fancy code we create and produces static files that are pre-configured using the config files we specify. By doing so we get increased performance for sites that may have lots of images, data to be fetched, and other assets that can slow down web applications.

Let’s now get some source code created. Our site is going to use just two ‘Pages’, one that will serve a home page to list the documentation we’ve created, and one for viewing a piece of documentation. But to fetch the content that we are going to display, we are going to use GraphQL, which we have recently configured. We will need to add some variables to our gatsby-node.js file in order to allow our static files to have the necessary parameters to make API calls.

Create a .env file and add your Cosmic JS environment variables

In your Cosmic JS Bucket > Basic Settings menu you will see fields for a bucket-slug and read and write keys down at the bottom. Copy all three of these things and add them to a .env file.

At your project root, type into your terminal:

Now Create three lines:

We will use these with our dotenv package to allow our src files to access these variables when necessary.

Open up gatsby-node.js and add config variables to pages

We are now going to use Gatsby’s built in node API to give each page in our site access to the environment variable we just created. First we will import the variables from our .env file using dotenv, then we will explicitly set each variable in our page’s context. Your file should look like this:

Creating our first page

Now we are going to create our first page that will grab all of the documentation objects and display them at the root of our site, on index.js . First let’s create our list by creating a folder in the components directory titled docs — /src/components/docs/ and in that folder we will create a file titled index.js .

This will be our module that is first displayed when we render our page after fetching our docs. Here is the source code:

What’s going on here:

This page basically runs a big loop over our docs and returns some fancy jsx. We map through the docs array and produce a Link from Gatsby that contains the title, a date, and some content that uses a a description for the piece of documentation that was published.


Feel free to add any .scss files to this directory as well to get a styling that works for you for the given class names.

Update the ‘home’ page with our new components

Now we can open up our home page file at /pages/index.js and import the components we just created and add them to our returned jsx.

Now any docs created on Cosmic JS, will appear here on the home page!

Notice the exported query at the bottom of the file. It contains two string type variable that will be present because we set the context object in our gatsby-node configuration.

With our newly created home page working, let’s create our doc view that will display content from the documentation that we post.

Creating our doc display page

Instead of adding a new file to the pages directory in Gatsby, we are going to create a `templates` directory and make a template page that we can configure on build, so that each time a doc is created, a new page can be created when we fetch our Docs from Cosmic JS.

Start by creating a `templates` directory at your project root, and then creating a docPage.js file within.

Now add the page template complete with exported query that will fetch a singular doc from Cosmic JS.

Nothing will happen with this template until we tell Gatsby that it needs to create a page using this template. We do this so that Gatsby has a chance to fetch our Documentation from Cosmic JS before it builds the page using the necessary parameters for each GraphQL query at the bottom of docPage.js . We are using static site files after all.

Update Gatsby Node to build template pages

Let’s go ahead and add an export function to gatsby-node.js so that we are building docPage template from our GraphQL data:

Now when Gatsby creates its pages, ie — the index page will fetch our docs and create a page for each doc that is retrieved and attach all the necessary params to the page Content of each page. This way our template component is rendered and our GraphQL query should succeed!

3.0 Deployment

Lastly we can talk about deployment and about how static sites work. Deploying this bad boy can be a little tricky since this site uses a static build that won’t have the necessary pages of newly created docs until the deployment service has a chance to rebuild.

My recommendation is to use netlify and link your source from GitHub or wherever you store your code. From there you can trigger buildhooks in order to rebuild your site whenever certain events happen. Cosmic JS will allow a post request to be fired off at an endpoint when objects are created, deleted, edited, etc. So you can easily link the two together to make some magic happen. You can also modify the addDoc method on the createDoc component class to make a POST request to the buildhook whenever you successfully add a doc.

Anyway, that’s all for me folks! Happy hacking.

TypeScript и React с использованием create-react-app: пошаговое руководство по настройке вашего первого приложения

Из этого туториала вы узнаете, как быстро приступить к созданию приложений React с использованием TypeScript без необходимости какой-либо настройки с помощью create-react-app (CRA). Предположим, что на вашем компьютере уже установлены Node и NPM. Ваше приложение TypeScript/React будет работать сразу после установки без необходимости использовать CRA. Кроме того, вы узнаете, как создавать свои собственные компоненты и управлять props и state, используя TypeScript.

Установка с помощью create-react-app

create-react-app это инструмент командной строки, который позволяет разработчикам легко создавать новые приложения React с разумными настройками по умолчанию и нулевой конфигурацией.

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

Инициализируйте свое приложение React с помощью TypeScript

Вызовите команду create-react-app с дополнительной опцией TypeScript, чтобы сгенерировать приложение React с использованием TypeScript в качестве синтаксиса JS по умолчанию.

npx — это команда, выпущенная с npm 5.2, которая позволяет вам выполнять команды CLI и исполняемые файлы, размещенные в локальном node_modules — это означает, что глобальные установки больше не требуются.

Если вы ранее использовали приложение create-react-app, это должно выглядеть очень знакомо. Дополнительной флаг —typescript говорит CRA использовать TypeScript в качестве синтаксиса по умолчанию и добавить соответствующую конфигурацию, чтобы он работал «из коробки».

Это создаст следующие файлы и структуру папок:

Ниже описание каждой части:

  • tsconfig.json объявляет параметры TypeScript. Он находится в корне проекта и указывает параметры компилятора и файлы для включения.
  • tslint.json — это настройки линтера, которые будут использоваться TSLint.
  • public — это папка статических ресурсов, которые будут доступны пользователям, такие как документ HTML и файл манифеста.
  • src содержит код пользовательского приложения. Это включает в себя наши компоненты TypeScript и стили CSS. Традиционный файл index.js был заменен на index.tsx в качестве точки входа.

Изменения React под TypeScript

Чтобы использовать React с TypeScript, вы должны внести небольшие изменения в подходе создания стандартного приложения React.

Используйте .tsx файлы для JSX

В дополнение к новому расширению файлов .ts для TypeScript есть также новое расширение файла .tsx. Это расширение, которое вы должны использовать каждый раз, когда включаете синтаксис JSX в файл компонента React. TypeScript способен компилировать JSX напрямую в JavaScript.

Импорт React и ReactDOM

Вы можете заметить, что в компонентах по умолчанию используется следующий синтаксис:

С TypeScript вы больше не сможете делать стандартные импорты фида:

React экспортируется как модуль CommonJS, который не использует default export. На данный момент, не обязательно точно знать, почему, а просто знать, как вы должны импортировать React, чтобы он работал. Это также означает, что вы объявляете свои компоненты как:

Создание компонент

Одна из лучших особенностей использования TypeScript — вам больше не нужно использовать пакет prop-types. Есть небольшая магия при изучения использования TypeScript для props и state, но как только вы его поймете, он станет гораздо более мощным, чем методология React по умолчанию.

Вы определите интерфейс props для каждого из компонентов, которым вы передаете параметры. Вы определяете интерфейс объекта и где у каждого ключа может быть свой тип данных. Кроме того, вы можете объявить интерфейс для состояния (state) компоненты.

Функциональный компонент без хранения состояния

Чтобы продемонстрировать функциональный компонент с props, мы заменим заголовок

в App.tsx нашим собственным компонентом . Создайте файл ./src/Header.tsx. Он получает параметр name. Внутри нашего файла мы создадим функциональный компонент:

Начнем с импорта React. Затем мы объявляем интерфейс IProps с единственным параметром name. Мы указали что параметр необязательный, это задается симфолом “?”. Обозначение ключа как необязательного означает, что входной параметр может быть или string или undefined.

При создании компоненты Header, обратите внимание на React.SFC

. «SFC» обозначает функциональный компонент без сохранения состояния в прототип. Хотя это объявление не является обязательным, оно позволяет нам использовать defaultProps.

Далее, мы объявляем тип входного параметра как IProps, ссылающийся на созданный нами интерфейс.

Компонент класса

Чтобы показать основы компонента класса, мы заменим описание

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

Создайте файл ./src/Description.tsx и добавьте следующий код.

Мы начнем с объявления интерфейса для IProps и IState. Будет необязательный счетчик вызовов счетчика, который будет определять значение приращения. Сам компонент будет вести подсчет, используя свое состояние.

Компонент объявлен с типами IProps и IState как class Description extends React.Component < и defaultProps объявлен как статическая переменная. State инициализируется со счетчиком 0.

Ваше create-react-app с компонентами TypeScript

Внутри нашего App.tsx мы импортируем только что созданные компоненты и заменяем HTML по умолчанию из CRA. Параметры name и countBy должны соответствовать типам, объявленным в дочернем компоненте. Поскольку props являются необязательными, они также могут быть undefined, и будет использоваться defaultProps.

И это все, что вам нужно для начала работы с TypeScript в React! Чтобы увидеть, как работает ваше приложение запустите следующую команду в консоли:

Что значит static в React

Если вкратце, то статические свойства — это свойства класса, а не экземпляра класса.

Кто использует React, часто видит ключевое слово static:

Копируя код со stackoverflow, да и вообще, обычно не задумываешься над такими мелочами, особенно, если всё работает.

Статическими свойствами объявляются defaultProps, propTypes, contextTypes и displayName. А вот state (состояние компонента) не является статическим свойством.

Давайте разберём простой пример.

Если у нас есть два экземпляра компонента Foo, то displayName, propTypes, defaultProps всегда будут одинаковыми для обоих экземпляров, но состояние каждого экземпляра сможет обновляться независимо друг от друга.

thisFoo будет иметь своё состояние, и thatFoo будет иметь своё состояние, но оба будут иметь одинаковые статические свойства: displayName, propTypes и defaultProps.

Как создать статический блог: использование инструментов Gatsby, CosmicJS и React

5254 просмотра

3 ответа

166 Репутация автора

Я нахожусь в фазе быстрого прототипирования моего опыта обучения React / javascript. Мне было интересно, когда люди достигнут рамки, такой как Next.js или Gatsby.js, и стандартное приложение Create React.

Я действительно копаю структуру на основе страниц и перспективу предварительной загрузки ссылок Next.js. Тем не менее, я не уверен, когда вы доберетесь до следующего, как это было сделано с CRA или даже с выброшенным CRA.

Ответы (3)

плюса

32718 Репутация автора

Я сам занимаюсь этим исследованием. Я понимаю, что Next.js предоставляет серверную визуализацию из коробки. Создать приложение React не делает этого, поэтому вам нужно предоставить свое собственное решение для SSR (для таких вещей, как более быстрая загрузка страниц и SEO).

12 плюса

692 Репутация автора

Я в одной лодке. Я начал с CRA, чтобы создать SPA, который был бы прекрасен, чтобы начать с кривой обучения. Но вскоре я понял два важных вопроса:

  1. Совместное использование в социальных сетях: я не смог изменить теги OGP для каждого маршрута. Эффект от этого заключается в том, что только базовый маршрут (правильно настроенный с тегами OGP) при совместном использовании в социальной сети может создать карту (твиттер), любой другой маршрут, который вы используете, будет в основном отображаться как пустая. Это справедливо и для Facebook и LinkedIn. См. Здесь .
  2. Оптимизация в поисковых системах: хотя было несколько статей о поисковых системах, способных правильно сканировать ваш СПА для индексации, по моему опыту это не было удовлетворительным. Например, например, в Google я заметил, что проиндексирована только домашняя страница, и она не обрабатывается правильно. Отдельные заголовки из отдельных элементов объединяются вместе. Бинг, похоже, не проиндексировал его. Может быть, Google проиндексировал его, потому что я проиндексировал домашнюю страницу с помощью Google Search Console. Это не приемлемое решение, если мне нужно повторно индексировать вручную каждую новую страницу или после обновления страницы.

Create-React-App: действительно хороший инструмент начальной загрузки, чтобы начать создавать SPA.

Gatsby / React-Static: аналогично Create-React-App, но создает вывод HTML-сборки, а значит, «предварительный рендеринг». Мне еще предстоит поэкспериментировать с этим. Я надеюсь, что это разрешит (1) и (2), так как теперь у меня теперь могут быть разные теги OGP в HTML, которые подаются со статического сервера сайта (S3 / Azure Blobs / Github Pages) вместо того, чтобы их локально изменять после выборки. Я не уверен, что это будет работать. Дополнительное преимущество здесь состоит в том, что, поскольку Gatsby уже предварительно создает во время сборки, пользователь получает лучшую производительность. (Может быть, кто-то, кто испытал это с Гэтсби, может прояснить, или я отредактирую этот ответ после того, как я это сделаю.) Обновление (2/19/2020): Я могу подтвердить, что (1) решается Gatsby.js, но все еще размещается как статический Веб-сайт.

Next.js: Если Gatsby не решит (1) и (2), Next.js будет моим возвратом, чтобы создать полномасштабное приложение SSR. Проблема здесь заключается в том, что теперь мне придется использовать PaaS для размещения сайта (например, Azure Web Apps или AWS ElasticBeanStalk или Heroku) вместо статического сервиса хостинга сайтов (Azure Blob, AWS S3, Github Pages). Это будет немного дороже и немного больше работы по настройке конвейеров CI / CD.

Также см. Эти альтернативы, перечисленные в документах CRA.

Топ-пост этого месяца:  Возможен ли заработок в интернете на партнерских программах
Добавить комментарий