분류 Reactjs

Frontity - WordPress 용 React 프레임 워크

컨텐츠 정보

  • 조회 75 (작성일 )

본문

Frontity는 WordPress 및 React를 사용하여 번개처럼 빠른 웹 사이트를 만드는 가장 쉬운 방법입니다. 오픈 소스이며 무료로 사용할 수 있습니다.


https://frontity.org/


Frontity의 작동 원리 


헤드리스 WordPress 사이트 및 블로그를 위한 서버 측 동적 프레임 워크


Wordpress-Window-1.svg 

WordPress는 콘텐츠를 만들고 관리하기 위한 헤드리스 CMS로 사용됩니다.

API-File.svg 

WordPress REST-API를 사용하면 콘텐츠를 검색하고 최종 HTML을 생성 할 수 있습니다.

Node-Window.svg 

React로 빌드 된 Frontity 앱은 콘텐츠를 제공하고 Node.js 서버에서 별도로 실행됩니다.


WordPress + React가 쉬워졌습니다. 


Frontity는 WordPress와 원활하게 연결되므로 웹 사이트 또는 블로그 구축에 집중할 수 있습니다. 복잡한 구성은 개발자에게 맡기지 않으며 학습해야 하는 개념의 수는 최소화됩니다.


1. 프로젝트 만들기

  1. npx frontity create my-app

    ✔ Creating package.json.
    ✔ Creating frontity.settings.js.
    ✔ Cloning @frontity/mars-theme.
    ✔ Installing dependencies.

    Frontity project created!

    Run cd my-app && npx frontity dev and have fun! 🎉

  2. cd my-app


2. Frontity를 WordPress 사이트에 연결

// frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { url: "https://frontity.org/" }, }, } ], }; 


3. 테마 설정 및 스타일 지정


import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `; 


4. 어디서나 배포


deployment-asset.png?w=768&ssl=1