Overview
In this article, we will learn how to get started with frontity. If you have good knowledge about WordPress and React, then you should start with Frontity development which is an open-source framework and it enables you to create a frontend for a headless WordPress site based on React. It receives the data via WordPress REST-API to generate HTML displayed in the frontend, which you can configure and style according to your requirements.
Introduction:
To get started with frontity, firstly you need to install WordPress locally on a web server, or else you can use the site hosted on wordpress.com
After the installation of WordPress, you need to install Node.js. If you have not installed it earlier in your system, then install it from Node Js and along with it npm and npx will also be installed.
It is necessary for running frontity commands during the setup and development of the project in frontity.
To check whether Node.js is installed in your system, open your terminal and run the following commands:-
node -v npm -v
Frontity setup – Theme setup
To create a new Frontity project let’s say “frontity-project” with a single command, run the below command in your terminal:
npx frontity create frontity-project
After creating the project, you need to choose among 2 Default themes i.e “Mars Theme” and “TwentyTwenty Theme”.
After Selecting the theme you need to change the directory with:
cd frontity-project
Now you are good to start a development server:
npx frontity dev
How to add custom style in frontity
We can also add a custom stylesheet in frontity project and for that, you need to create your stylesheet as given below:
Now include this custom CSS “style.css” in the src/index.js file.
import { Global, css } from "frontity";
import customStyle from "../assets/css/style.css";
const App = ({ state }) => {
return (
<>
<Global styles={css(customStyle)} />
</>
);
};
export default connect(App);
How to Style Css in Js
With the help of Javascript, you can style the components in each page, with much less code and also it loads the minimum CSS required for each page which helps in improving the overall performance.
import { styled } from "frontity";
render(
<DescriptionContent>Blog On Frontity</DescriptionContent>
)
const DescriptionContent = styled.p`
font-size:14px;
Line-height:20px;
color:#000;
`;
How to use Image and Background Image
Add Image:
You can add an image to your project by importing the image in the src/index.js file.
import Link from "./link";
import logo from "../assets/images/logo.png";
const App = ({ state }) => {
return (
<>
<Head>
...
</Head>
<Body>
<StyledLink link="/">
<img src={logo} alt="logo"/>
</StyledLink>
</Body>
</>
);
};
export default connect(App);Add Background Image:
We can use background images in our project by adding background properties in styled “Css in Js”.
import { styled } from "frontity";
import bannerImage from "../assets/images/banner.jpg";
const App = ({ state }) => {
return (
<>
<Head>
...
</Head>
<Body>
...
<Banner>
...
</Banner>
...
</Body>
</>
);
};
export default connect(App);
const Banner = styled.div`
background:url(${bannerImage}) no-repeat center / cover;
width:100%;
height:500px;
`;
Conclusion
I hope this article will give you a better understanding of how to use React Native and WordPress together with the help of Frontity Framework. Stay connected to know more about Frontity.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
