Anastasia Stefanuk
Category: Design Tips, Development
Businesses need an online presence in this day and age, which can easily be achieved by maintaining a business website. Platforms such as WordPress provide easy-to-use tools for building websites. You can also find a react developer to build your website for you.
Why use WordPress?
According to builtWith, 34% of the Internet use WordPress and WordPress technologies. WordPress also ranks among the top 10 most used and preferred platforms for developers. WordPress offers highly customizable tools and websites. With over 50,000 plugins and 3,500 licensed-themes available in the market, WordPress is a platform that offers numerous advantages to its users.
WordPress provides tools that can be used by all kinds of users. Development and coding background are not necessary. The platform and its tools are user-friendly and intuitive. The numerous templates make building a website easy and convenient, and the multitude plugins enhance it even more.
Having a WordPress blog or website is also more cost-effective to build and maintain. It is self-contained but has a global reach. Everything you need is there for you to use. WordPress sites also have the advantage of being SEO-ready. Its tools and plugins enhance the SEO of your content and website.
Users have the freedom to use any of WordPress’ numerous tools to tailor a website to their needs. Various other tools, such as react-native tools or react front end development, can also be used in tandem with WordPress.
Why build React JS interface for WordPress?
Javascript is the top programming language selected by professional developers, and ranks among the top 10 most loved and wanted programming language by developers and other users. Of the numerous Javascript libraries out in the market, React JS is among the top 5 most commonly used technology and is the 2nd most loved and wanted Javascript framework. React native is indeed popular that its websites such as Airbnb, Netflix, Dropbox, and Facebook are using it. React JS indeed proves to be the best JS framework currently available.
React Web Development and WordPress
React JS works in the backend of the WordPress Gutenberg editor release. React JS presents a rapid and API-powered interface, purely of Javascript, with their release of Calypso. React enables WordPress users to build mobile, web applications, and UI using declarative components.
React web development delivers:
- code component reusability
- ease of use
- immutable rendering for better resource utilization
Combining React JS and WordPress ensures that users and developers have access and can utilize a broad range of tools in building their react front end.
React JS Guide: Create WordPress Themes
Great examples of WordPress themes created using React web development tools are React, PressGrid, Frontify, Anadama, BeesWax, WReact, Foxhound and Blackhawk. But how do we create WordPress themes and React JS interfaces for WordPress?
Aside from learning React JS and features, what are the steps you can take to learn how to create a WordPress theme?
Steps
Michael Soriano provides a detailed step-by-step WordPress with react js guide on how to create WordPress themes using React JS. Outlined below are the key steps and highlights.
Prerequisites:
- Nodejs + npm
- Git bash
- Local WordPress environment
Step 1. Setup a basic React-based WordPress theme.
Here, you can use tools such as create-react-wptheme. This tool enables users to easily access the core functions, hooks, actions, filters, and others to build your website. This will serve as the base of your theme.
Assuming that you have the prerequisite tools downloaded and set up, you can run Git Bash in within the themes directory. The terminal will be what we use to install create-react-wptheme.
Once the terminal opens, type in the following command: (reacttheme will serve as the name of the theme we are building)
npx create-react-wptheme reacttheme
If this is successful, the terminal will show the following message:
Success! Created reacttheme at [location of themes folder]
The installation will create a root folder containing a “react-src” folder, which is where all uncompiled code will be located
Step 2. Download and setup remaining theme files.
Our current theme is still incomplete. We still need to download and install files that will turn it into a valid WordPress theme.
To do this, go back to the terminal and type in the following commands:
cd reactheme/react-src
npm run wpstart
The commands will redirect you into the react-src folder and run wpstart. This will then install the css and dependent files to make our theme a valid WordPress theme.
To confirm this, you can proceed to your browser and look into the wp-admin > themes location. Here, you will see that with the addition of hte files we have downloaded, we can now view and modify our theme.
Step 3. Activate your theme.
The next step is activating our theme. This step enables WordPress to use the theme that we have just installed. You can do this by clicking the “Activate” button in the card for the theme we have just downloaded.
You will then be redirected to the theme. A message will be visible:
“Please restart the NodeJS watcher now.”
This means that we should run wpstart again to complete the setup of the chosen theme. To do this, go back to the terminal and run the following code:
npm run wpstart
Once the process is completed, a new browser will open. This page will show the theme we have downloaded as a base for the WordPress theme that we will be creating.
Step 4. Run your build
With our base complete, we can now customize this theme to our liking. To start this process, go back to the terminal and run the following code:
npm run wpbuild
You will then be able to see an outline of the files in the build folder and its root folder. It will also indicate that the build folder is ready to be deployed.
If you go back and refresh the theme page, you now see a bunch of code lines. This means that the code of our base theme is now available for customization. You can use any editor that you are comfortable with to edit and customize this theme.
Things to Note
- Having run wpstart, you are now in development mode. This means that changes to the react-src directory will be recompiled. Changes will be instantly reflected and cause your theme to be refreshed.
- Files found in the root folders, namely the files and folders outside of the react-srce directory should not be edited. These folders hold the files and folders needed to correctly run WordPress and React.
- Learning React JS and its tools will help you better refine and customize your site using the numerous React JS tools.
Convenience is Key
WordPress makes building websites easy for ordinary users. Its tools enable us to create the best websites and themes best suited to our needs and preferences. Creating WordPress websites and themes is made more convenient with the integration of React JS technologies.
If you find doing it yourself cumbersome, you can also seek the help of professionals to do the work for you. React JS developers are the ones best equipped to shoulder the task for you. Do your research, and you can find a react developer teams dedicated to creating the best website for your needs.
