Create a Wordpress Website using React 🔥 | Wordpress RESTFUL API with React w/ Frontity

Key Takeaways

hi everyone in this video we're going to create a wordpress website using react yes you're here right we're going to use reacts with wordpress in the nicest way possible so we're going to use front disease framework which is just a built-in completely standalone framework that's going to allow you to use wordpress as a back end that you can consume data from then in the other hand you can use react to render this data into the browser using your regular reacts node.js application and node.js server just serving this react application and you can pretty much use any react library any react technology you already use with your wordpress so that's a cool way and finally has been around for a couple of months right now and a lot of people are just loving it and you know me just whenever you find or whatever pretty much you find reacts you're gonna find me and wordpress who doesn't know wordpress everybody just knows wordpress goes crazy about wordpress the whole world is shifted because of wordpress so this is actually a fact that wordpress is just like the leading cms on the world right now and it's just like never stopping it keeps growing so we have to use represent that place it's free open source and all that kind of stuff so you can go ahead and use it so we're going to be using this wordpress user friendly and there's actually a couple of demos you can go and check but the basic idea is actually since wordpress version i guess 4.7 there is actually a restful api exposed from wordpress server so you can go in and point into this wordpress server then you can go ahead and use it that way so you can just go ahead and point it there you can get a json response and that's how you react you're going to get the data from response so you can still go ahead and use your wordpress as like a content editor as you know putting pages there dynamically putting pages using posts or even going using the crazy amount of plugins available in wordpress store and you can use it as a normal backend as a normal wordpress website in the other hand you can grab revix code you set up reacts projects using finity and you can consume this restful api using pharmacy's available api and you can render that data all using react you can use redux style components css and js many many other things without the need to write any single line of php or anything of that sort you know me i'm not a big fan of php i really like reacts and how it does things and optionated stuff so that makes sense so here are actually going to be using it with wordpress um i hope you guys already know how to know or pretty much how to set up wordpress because i'm not going to go into much details on how to set up and put running a fully running wordpress website and just like serve it out using nginx and apache or something like that i'm just going to go through how to set up front of the first right here so if we go back to the docs i'm gonna find uh pretty well made up documentation in here so go to getting started you're gonna find like what requirements you have to have like a wordpress installation you can either ways have it like you know start from wordpress.com if you already got a free website there still can do the job perfectly or in the other hand if you have it somewhere like uh your localhost or just like your regular website you still can be using that as well and of course you're going to be in node.js so make sure to have a we're running node.js so if they do uh node v i got node.js version 12. you know you can have all this one that doesn't really matter but yeah you got the points so this is pretty much what you need an installation of npm or mpx and that's that's pretty much all you have got to do okay so let's go ahead and install foreign here and the basic stuff you don't pretty much need to install it so you can have just go ahead and use mpx i'm going to do mpx frontie they can go create they can provide it whatever projects name you want to have okay so let's go ahead and have a project name i'm going to say um so reacts i was going to do like fun to see react or something okay i'm gonna go ahead and do that real quick it's gonna go like graph fantasy for us it's gonna load that and of course it's gonna go start the installation for us so the mind takes a couple of seconds two minutes to get started so the skill is gonna ask you a couple of questions like what theme you need to be installed because foreign here has a couple of themes that already can get you started but you don't have to get a bare minimum of stuff you could have a theme but of course you can go and install a quick start like start from scratch with ferny with no theme but i really recommend getting some of your theme it's going to help you a lot to understand how friendly actually works and how how it handles data and state and all that kind of stuff so i'm going to choose mars theme this is the basic most recommended theme i'm going to go and choose that and finally here cli is going to go and install for us set up a kangaroo json and start all the themes and all the dependencies for us so i've got to wait a couple of minutes for this so there you go first has started the project successfully we can go ahead and see uh the project so we can do cd what we named it friday dash 3x so lots of projects it's just a normal node.js reacts projects basically so let's go ahead and open up this using our code editor in here and i'm going to use vsco so of course it depends on what code you want so this vs code going to do the job so this is basically the project that finally started up for us which is pretty basic project has vector json has a couple of like scripts to start development server and stuff and there are a couple of differences these installed like finally friendly core wp source so these are official packages for front end that are going to help you build that for example this one's gonna allow you to fetch data from the like wordpress your wordpress's website uh restful api so this one has like the basic api to do so there's a tiny router html to react to render your like wordpress contents which comes as html of course to react safely and mars theme which is just basically the theme we're gonna be using right here and then a couple of stuff in here you can go ahead and check out so the basic structure here there's actually a packages and inside of packages you're gonna find your theme you can have multiple themes but you can have like multiple themes which means multiple folders in here each one has its own and you can switch themes by firing a settings and if you take a look on this friday settings.js so this is the main settings file for your friendly projects so it tells it pretty much to do everything this one is actually your redux store states basically if you're familiar with that like what is the title of the website the description uh this one packages like what packages are currently installed are being used by furnace core and this one's like for example this mars theme installed um if you take a look come down here there's tiny router and there's html to react which we've reviewed before and there's also wp source and this is basically the most important part in here to check out is actually this url has to point somewhere and this currently is actually pointing to test.firing.org which basically means is actually just a test wordpress server already like set it up by finally itself and this just has like a wordpress server just to get you started and work with like whatever is actually available there but to use your own custom wordpress server here you have to provide the url in here either from localhost or from like uh you know a domain name if you have this one hosted somewhere and yeah that's that's basically where it is and here for example you got mars theme there's a couple of settings like the menu you want to show up the urls that i want to go through and all that sort of stuff so yeah there's actually depends on the theme but we're going to cover all of that and try to explain this a bit by bit while we go forward so right now this is actually how it works if you take a look on the mars theme there's actually src there's components which has basically all the components you need and if you open up anything for example this index um this this one is just like an export for the mars theme and how it does being exported this is the main entry point but if you go into like the index.js for a theme so it's creating here it's basically a normal reacts just going like imports reacts i have a theme function just a function of components it has props here and it returns like a gsx component so it returns like a fragment component there's a title component head component head container main switch and this place is doing some routing and yada yada so that's basically what it is just like a basic component and this is actually the power of what i'm saying about building react application alongside wordpress so you use pretty much the wordpress's restful api then you can grab the data from wordpress and you can render it directly using reacts you beloved technologies beloved libraries and all that sort of stuff that sounds absolutely amazing for me if it doesn't amaze you that much i'm super excited to use that in my personal projects so yeah that one looks absolutely amazing and super super stunning so this is basically what a project looks like if you got firing just to get started you can go ahead and like customize whatever files and you can even go in and delete that and just start from scratch you can even do though uh do that but i don't really recommend that because a theme gonna give you like a just a push-up to a quick configuration that you can do and mars them in here it's just like a minimal theme so you're not gonna have a lot of add-ons and all that kind of stuff but just like get a bare minimum setup so you can go ahead and get started so let me show you how the theme looks like and how to open up so we can open up a terminal real quick we got everything in sunscreen so you know monuments already exist so if we go back to the packs of json we got the scripts so dev is actually for starting a development web pack development server basically and there is actually build to build this for production and server to start a node.js server to start and serve this production ready application so all we need is going to use yarn or npm whatever doesn't really matter i'm going to do a vr and dev and this one just starts like a server started it's going to be listed on 3000 ports and it's going to start that server somewhere so let's go ahead and put up this um it's going to start it on 3 000 so we have got to wait for this a bit to get started i basically are underneath us neither this and yeah so we got we've got to wait for this to a bit to start like the webpack development server there you go it already is started so if we go back there you go so that's the theme and how it looks like it's looking just a pretty basic theme doesn't really do a lot of stuff here it only renders some a couple of posts if you click on it it's going to take you to the post page with images and all that contents that you want to dynamically change of course so that's that's basically what it is so yeah that looks absolutely amazing your nature there's actually a category going on as close to the links change which is pretty pretty great there's travel there's about us you can check about them and it takes you actually to the link and it does fetch from the wordpress server so right now the server is actually fetching the data from is actually this server that is auto pre-configured for us which is like test.45.org so try to go to this uh let's go and see what goes inside of that so you're basically going to get like a wordpress if you take a look on webalizer it already has like wordpress in here and it uses basically wordpress with php so that's that's a regular wordpress website and this one this is actually you can have this as your own website then you can create another website that it takes the api takes actually the same data from this website but renders it in a different way so this one is going to be used like a database or a backhand and it's going to use the restful api you grab the data and it's going to it's using reacts on this particular website using friendly this is absolutely amazing and this can open up a lot of possibilities and how you can manage um like reacts with wordpress and how wordpress can be used in the future so that is that is crazily awesome so right now as i said this is being used as a test but the main challenge and the main idea is actually want to use your own custom wordpress website so this is pretty clear so how we can go ahead and set up our wordpress website i'm pretty sure a lot of you does already know how to set up a wordpress website and i'm not going to go into details on how to fully set up a website but i'm just going to give you some trips and tricks on how to get a website up and running and how to sign up in genex to actually do the proper routing for actually wordpress to work properly with the front knee or with like the react application otherwise it would just like fail when you without the right configuration so yeah so right now we got some decent website that's gonna work on aaa port if they see that so this is basically the website currently uses like wordpress i already created accounts and got some stuff set up on it so uh so that's that's basically what's going on in this website it's pretty pretty basic nothing too crazy or something like that okay so how we can go and use this website right now if you got a website already run in all you've got to do just basically what you've got to do is just go back here and you can change this link with localhost a8 and you are basically done so you're going to see all the magic going to happen and all the stuff going to work perfectly but in the other hand if you have a website or a wordpress website you need to set up one first so let's go and see how we can go ahead and create our wordpress website okay so i'm going to create i'm going to go back here i'm going to create a make directory in here and make it or name this as my wordpress websites i'm gonna do wordpress i'm gonna make okay i'm gonna make this um i'm gonna need a wordpress website indeed so i'm gonna cd into this real quick so this is actually just an empty directory right now let's go ahead and download all you've got to do just go back to wordpress.org and download the content or the best way which i love pretty much a lot is actually using the the cli called wordpress cli just wp dash cli and this cli can be installed of course and you've got to go and check out the guide and how to install this so let me get you and show you uh how to install that so wp cli and you can go and check out wpcli.org so basically in here has all the actual instructions on how to install that so you can use curl and you can use php then you can just copy it into the user local bin wordpress and voila you got everything signed up so you can go and check out this how to do it i'm not going to go into the details on how to set up that so you can go and use this you can do website like wp cli then download so this basically um yeah it's not called wpc align here the alias should be wp so you go to go ahead and do download uh it's not registered so you have to do core download sorry and this one's going to download the most recent um versions cruising 5.7 is the most recent one english us and this one has been downloaded dls you're going to find all the wordpress php files there and the whole setup goes right underneath there now how we can go and do like the configuration so using wp so you can do config then you can provide the db name for example um like wordpress um you have got a couple of other things like db uh user so you can say for example roots then you can see db pass and you can you know set up your password root or something um so [Music] config create one mallet using w3 config pd's is it uh so access denied to them to the database pretty much so yeah i've got you've got to go and choose the right password for this to work so after doing that just choosing the right password it's going to give you that actually the configuration rights and you're going to got everything working correctly so now configured it works with the database and everything all you've got to do next is go ahead and use wp then you can do core install that you can provide for example the url of the website that you want in our case you're gonna have http localhost a8 i'm gonna have the title to be wordpress website for example and i guess we're gonna have some um uh i guess it's uh it's wordpress username let me go and check out what it is so wordpress db which means your username password is okay but not able to select wordpress db okay cancel x whatever database it is yeah basically because they didn't chose the right name for it to work so i just like fix that real quick just change the name of database and here what it has to be is like wp then admin so this is actually the admin or the username you want so i'm gonna do just like that's wp then say email so i'm going to say um it's going to be user okay let's go ahead and choose my email real quick in here gmail.com and last but only using the wp password so you can choose whatever we're gonna choose one two three four five six seven eight nine zero and that should um that should make it work so a known parameter and it should be admin so this one is add me password i mean email and um what is that so it's admin user okay i'm bad here so let me just fix that real quick and there you go so wordpress is already installed for me but you should get like wordpress installed successfully and all of that is done so the installation wordpress right now is completed or you've got to do the last thing it's actually set up in genex or apache actually it depends on what you like but i love ingenious this pretty simple server and you go ahead and configure that to points into the curve directory so you want to configure to point to this directory like wordpress website and make this directory as like the website you know root so whenever you go into port a8 it's going to just redirect you to this directory to use the index.php so that's exactly what i want to do right here um we can go ahead and do that real quick i'm going to go ahead and open up a new tab and um in fact i guess okay let's go ahead and continue in just a single time but i want to change the font right here so we can go back to cd so the place where the configuration is actually etc and genex take a look there's actually a couple of folders so the folder interested the most adds actually sites available so this point into like what type of website are available there's actually default and wordpress conf now i'm interested in default i don't care about this one it's actually different configuration so the default is actually currently being used by default from nginx server so it's going to do this i'm going to use sudo nano default to make sure to use cdo because this is actually a write protected otherwise you won't be able to um okay just like mistake we introduce myself password so let me just see here and there you go so we got here and this is actually the configuration that works perfectly for the nginx and make sure um yeah probably just make sure to go ahead and use that particular configuration like what i mean by this configuration let me walk you through that so there's actually a list listing and this is actually what part you want to listing for the second one is actually the roots so this is where you have to point this is actually the most important part so you have to point this to your wordpress uh installation directory so the directory that you have just or like installed wordpress on so you have to point this and you have to use the absolute passwords in your home slam premise source cheetos and wordpress core and this is where you have it basically here index what indexes he uses just sub domains error logs and this one this this location forward slash this one's gonna also gonna just like uh do a proper redirection for parameters and all of us chris and it uses ease rs and args so make sure to do use that to do a proper parameter um and queries for wordpress to work fine and the last one in here is actually wordpress json and these is actually very mandatory otherwise wp json or restful api that is exported from wordpress won't work for you so make sure to go ahead and like use that do location wordpress json and rewrite this into this particular url so like he tests this and just like do you know perfectly rewrite this so he he recognizes this and wordpress can pretty much provide you with risk for api if you don't do this if you don't like enable permalinks um just it's gonna not gonna work for you so make sure to do that and all the rest just like all the rest down here is pretty much just like optional but yeah it's really good to use it so you can just point guess and css this should already been done by default by ingenix but yeah make sure you go and use that as well like the favicon and robust file for like seos and all that so that's basically the configuration that you need for nginx i'd just like to show you that real quick you can go ahead and use it i'm not going to as i said before i'm not going to just like go ahead and set up wordpress ingenius all for all the sudden from start to finish but that should make the job for you easier to actually understand if you face up any issues with that okay and the last thing of just like putting this configuration it should be all you have to do just do sudo system ctl for system control and you can go ahead and do like uh in genex or i guess you have to do restart and gnx and this one should restart nginx server and it should like use the new configuration here so you can do a cdo system ctl status for nginx and you can check out the status of in genex such as c currently running and like what is the process id or the pid and so yeah everything is working fine and we see like nginx has been started and it's currently running fine so there's no issues or no configuration errors cool so that's basically all you have to do to configure wordpress just a quick work around on how wordpress should be configured in that particular parts so let's go and go back in here and let me show you my wordpress website so i already did i am going to the wordpress website so it's pretty basic so this is basically we're going to be using to grab this data so if we go into wp json and wp v2 post so this is the url you're basically all you have to point is wp json this is where the restful api is going to work and first thing here we already got a json response from that so clearly this response is just like an array for all the posts that are available inside of like uh pretty much our wordpress's website so our wordpress website the database and everything the api is going to fetch you for that and you use all the query parameters and everything is pretty much available wordpress is going to be available throughout this restful api so you can go ahead and use it the same way as it is so yeah that's that's actually the best way and the proper ways to go ahead and handle that and that's why frontify is using this really nice feature from wordpress to make reacts available for wordpress theme creation or website creation pretty cool right now we got wordpress setup we got the server running we understood how to restful api is working from wordpress aside and yeah so the time here is actually to go back into our folder or our projects so this is actually the project this is frontifies projects if you take a look on the deep this is actually the settings and you have to change this to localhost 8000 just to change that you probably need to go ahead and just like restart the server um most of the times the settings will just take effects but restarting is always a good idea so yeah you got the points because you're going to start this and dev server is going to start up okay so um yeah there you go we got the startup take a look localhost 3000. yeah we got all the other posts are cleared out and we got hello word welcome to wordpress this is the edit post it's actually the first post and this has been created by me today so you got about us you got some about us page working on home nature travel japan whatever here is actually going on so uh yeah pretty cool looking absolutely amazing and you'll have to do if you want to just lock out other posts in fact this one is actually rendering and returning the dnr from the network we refresh that i'm going to take a look that this one indeed so let me uh i guess i can zoom in here i'm not sure so you can take a look this is actually like requesting localhost a8 which is where our wordpress server is running on we got wp json restore api and it gets the post and it gets some parameters like page one and which author it is and it gets the data if we take a look at our preview we got the post here we got like the slug we got post content which is rendered on html pretty cool we got like the days we got the link modified all the info you would pretty much get from a wordpress website and this is only needed to actually render that properly click on it you can take you to this wordpress website so let me just go back right here and if you take a look on post we got only hello world right now and what it did for the settings to work is actually they changed uh i think reading i guess permalinks yeah so permalinks in here changed it from plane which is just basically gonna it should use only ids to fetch the theater if you're familiar with wordpress hope you guys are because this is uh i'm not going to explain a lot of that but post name in here is going to use slugs of the actual posts likes are unique identifiers for a particular post of a particular web page well that's what's going to be used in here to fetch the dna that's what i chose i saved the settings and that's why here i've been able to like go for example about us it goes inside like about dash us this is actually the slack of this about us page and it's being used in here by frontify so that's that's that's pretty cool as far as i can tell uh from about us page and that is actually looking absolutely great okay so it gets the post it gets to everything if we try go ahead and add another post for example we can um so let's go ahead and do i'll just add a new post i'm not really familiar with a lot of wordpress but new post from frontief i i think fancy yeah sorry it's not french fly so this is actually the post you got categories whatever um there's no category forward so you can use that um yeah so you can drag and drop you can you can go ahead and add in images so let me um so media library media library is there's any available images already i hope so i don't i don't see that so uh yeah whatever so we're gonna publish this i'm gonna publish it to public no tags uh so no pose from fantasy this is actually the slang has been created for us so if we go back refresh we're going to get to the new post and in fact it's actually being ordered by dates so that's pretty good go inside of it we got the post uh the other in here so we are getting this right in the perfect way let me zoom in a bit for you guys to see so let's look in absolute grace whatever post you add it gets added whatever content you add it gets added if you want to add multiple pages you can go to like for example about us in here if he clicks on it takes you to a specific page and all that sort of stuff looking absolutely great now let's go ahead i'm going to try to actually customize this landing page i'm going to change this then the page from showing posts uh of like the current post into creating our custom landing page just a quick one to exactly see how quantity framework works out so i'm going to close in the settings and that's going to close in everything so i'm going to go inside of mars theme i'm going to go inside of components i'm going to create a new components getting this um home page all right i'm going to create a folder so they're going to be in index.jsx this is the entry point for our index like home page my components pretty much so i'm gonna use react real quick in here so i'm gonna import react i'm gonna export a function this one is going to be um home page so it's going to have a couple of props and all that stuff and you know the prompts in here can be used uh like what fundraising can be providing like the store and the stage because friendly inside of it's like behind the scenes it's gonna handle the state using redox so you're gonna have to implement your redux store yourself now foreign is gonna give you all of that inside of like out of the box and you don't have to worry about state management and all that all you have to do just consume the state and put into the state or push into the store then retrieve basically that's all you have got to do because pharmacy wants you to actually take the simplest way and simplest approach to create uh wordpress websites and you know as it possibly could so that's what's going on right here okay so let me kind of check um how post is being rendered i guess there's a couple of stuff let me copy this container and i'm gonna put it on top i don't like it puts in the bottom so starting here is i guess it's imported from uh front seat so it's going to use from the team then import styled from quantity and we should get started it's actually the style components so yeah if you're familiar with style component that's basically what it is in here there's container and there is style so i'm going to return container i'm going to return a title and uh we'll come to quantity [Music] or something i don't know just whatever it should make the job uh working so if we go into the index.js if you see before we already got some switching and some routine working on so this switch component is going to do some writing for us it's a custom-made switch component which it basically checks so the main idea behind this one is actually checking for a when prop that's going to be provided to the children so screw this in here each child is component or each component is pretty much here is having a problem is called when and this prop is actually just a boolean so if this one is true this component is going to be rendered otherwise it's going to be just like completely hidden so and and of course it's not only using that using actually the cascading is actually using the order so if loading is actually true and it's actually being rendered first and it list is true too so loading is gonna just you know be calm on top of that and it's gonna render on top of the list so the list won't show up and loading will show up so you can take this as just like pages on top of each other's and this one is going to take effect over the others because it's in on the top so that's that's basically what it is going on on the switch there so that's what i want to have my components right there so it's going to have um home page components i want it on the top because i want this to be the toughest one and let's have it just right underneath loading because loading is actually you know needs to be on the top i'm going to have one i'm going to check data is home so this this boolean in here this property is going to provide it by friendly so friendly does some checking on behalf of that so if it is actually home page like which means landing page which means just a forward slash like that so it's gonna puts true to this property otherwise we'll be false as the other properties do so if you go and save that and you go back here um some new pose from friendly i don't need this if you go back there you go so we got our home page is taking effect and we got in facts welcome to friendly working fine right how sweet is that it's just as simple as this to add this home page and to make it actually work on friday looking absolutely great already now if you take a look on the front end here so you can add pretty much go back into the home page you can do pretty much whatever you can do whatever style user reacts you can you can have all sorts of stuff and in fact if you go back right here screws in here how data fetching is being done is actually against data there's states source gets and it provides it with the current link which could be the current um you know states link or something like that or on the post link and this one is going to fetch it from the word process server restful api and it's going to return the data so if you go back in here you can do like console log data okay dinner so if we go into the browser here we should get some dna being logged in into the browser it takes a couple of times quickly to update the server and there you go got data so it's being rendered as the proxy you've got targets objects in here and there you go so this is actually the data we get by just like rendering or requiring from the home page we got items which is basically like what type of posts we got already like new posts and whatever uh like query got link is home is fetching is archive is ready and we got the type of this this particular page which is post which is like the default type used across any wordpress website pretty much um there's total pages and and all that stuff so this is actually what it gets and this is being fetched from wordpress itself so you can fetch as well the data of the wordpress website uh as well that's actually as as it goes on so let's go into like the about us page so if you take a look uh on the bios page so let me go and check um so i believe the border space is going to be like contained inside of that inside of the post so the post is going to handle any type of post so is post type yeah so the page is going to be his post type and it's going to render that too right here so this is actually going to take care of rendering any web page you provided so as soon as it gets the data from the server then it you know you can just like take the data from that state that has been pushed into so later on you can go ahead and render that right beneath right here and it does danger reset in your html to set the in html that is being you know get seen from pretty much the server and all that stuff and it uses like dna is ready which is just like a loading mechanism provided by fantasy just to check if the data is actually loaded and everything so we can render stuff otherwise just gonna like put null and render nothing so that's basically what it is so if you take a look on the data that is being fetched by the posts in here just by doing console log data and we can cancel on the actual data is being fetched because this one this post data is actually provided getting from source then it uses data type which is basically posed and it gets data id to get and select that particular post without particular id so let's go ahead and just like put that data and see what actually has underneath so we can just fully understand exactly how the api works and what it does behind the scenes okay so let's go ahead check out this so this is actually the proxy uh for the data so we're gonna go to a page for example about us so if we take a look um into that there so it's listening here this one takes a bit of time to show up on the console why because this is actually a proxy and actually sending it into finally to get the data if you're asking why because this is actually using some server side rendering it's not actually like a client stuff so yeah it has to do with this way to uh properly work so we might need to refresh that because debugging sometimes gets uh throttled and it doesn't properly work from that side so um so if you go back screws in here it already has been printed for us this theater so you got the dna and the dna so it basically has this type of thing the id which is the post id and all of that but um if we go in and check out this we got about us which is having an idea of sex and having having that so this is this is basically what it gets as the dna there just like what is the link what is the id of the current page and all that just to get it from the server now later what it does it basically goes and just does post and it grabs that data from the post so if you go ahead and put it post instead so this one is going to get the post dnf from the state because this state.router link is going to be used to fetch the data so this get function or get method is going to fetches the data from this particular browse from you know wordpress's server then it populates it automatically into like state source so say those stores actually like the main um api source where all the api data is going to be saved in it's actually inside of that so that's uh that's the place you want to check out so if you take a look and we already got some dna guards author we got contents the current contest is being rendered the title uh we got modified dates we got status if it's published or not and we got like is it rendered or pretty much what title is being rendered and the type which is page currently uh so yeah that's uh that's basically what's going on in here and that's how he's actually being handling that dnf engine and how it's being handling it and grabbing it from like wordpress's servers now let's try to go ahead and change a bit of the website's design because right now it just looks a pretty minimal ugly website with just like a blue header and some you know navigation like links in here that's not really started or something so you might want to just do something good and just like if you want to customize this fully just this theme and take it from the ground up and make you your own website while you can do so if you are already familiar with like style components and pretty much uh reacts css a bit of css that's all you pretty much need so if you go to the index this is where the full page is being rendered so if you're wondering where the full page is this is where it is actually got the title we got the head this one is actually being used from the header or like head friendly so this one's going to be put inside of the head indeed and here the head container so add the head to the site it's basically what it does now we got the main and this is where it gets you know rendered so uh that's that's basically all you have gonna do so you all have to go to back into the header and this is where you got the header we got some navigation links we got the mobile menu if it needs to be rendered in case if it needs to be rendered so is mobile menu just like uh is open so this one uses some responsive design to check if it is or not and just render some hamburger menu and all that and got some description we got some title and we got some style link and got some container so if this is actually the containers clearly see you got color box sizing of this and where is that so got some colors and border radius got some styled mobile menu container nav if you go back into um index.js we got header container and take a look on this yeah this is where the color is so we might need to go ahead and change this color uh i don't know you can go and customize this however you want as i said before and yeah it became red which is perfectly horrible but anyway so uh yeah so this is basically how if you want to just go ahead and customize this if you want it completely white it doesn't matter you can have this but this one it won't work it won't even show up completely back that would look a bit better um okay we're programmers we're dark people so we might want to do that as well so we got about us here um yeah we might we might just go in and play with some navigation links if you want to uh there's main in here which does a background image of a linear gradient i don't know what's that's being used but i guess this is the main part in here um if you go so there is there's perfectly some content stage friendly description this is where the description is being held up so finally the description i guess yeah okay so you can do welcome to our website if you want to edit up the description i guess this will be taking effect i'm not sure yeah there you go so we got welcome to our website this is where the description is test front of the blog you can change that to so awesome website if you want to change that too there you go one websome or awesome website i can't even spell that sorry and we got welcome to our website we've got the description everything actually is pretty much held up on the stage so you see this states it pretty much represents the main stage for that projects for your own projects so if you're familiar with redux you can take this as your own states pretty much store so this is the initial store from where it gets started where it gets the initial state so he gets that he puts friendly puts the url the current url uh he puts the title puts the description and everything on that's that will lay your own on the inside of the like pretty much the application you got this state then you can access so this pretty much is going to be the store so you can do state of rna and whatever and you can use that in fact since this is actually a redox thing you can go ahead and use it the same way with redox you can create selectors you can use reselects if you're familiar with that as well you can use dispatch dispatch that but it already has its own exported functions to do so so you're not going to have a lot to worry about that to or how how you're pretty much going to be able to do it okay so that is looking good so far so good if you want to just go ahead and customize the navigation um yeah you can do so there is some media occurs in here for responsive design line height in here so border bottom you can we can go ahead and change this i guess if there's there is any fun size we can change okay fun size yes there is so we might want to increase this by 1.1 am why not i'm gonna make this a bit better bigger uh there you go so we got some bigger stuff going on and we got the borders a bit bigger as well so yeah looking good you can go ahead and take this just tear it down and customize it however you want and yeah so yeah if you want like something like this we want a video where we can tear this down and create our own theme and use everything well we can do that just let me know in the comments if you really like this idea if you really like fantasy and how ideas just combine and react with you know wordpress and get all that dns the back end and all that kind of stuff i will be very very happy and glad to make something like this for you guys to quickly understand and get into the ship right here so yeah that's that's pretty good let's go ahead and try to go ahead and build this into production and see what it does exactly in a production place so all i'm going to do i'm going to just going to choose go back on json we got finally then build to build that then we can survey so if we try to do yarn build so this one will build us the projects and we'll build like the static project with the server-side rendering for us and everything so just like provide you with a full project that you can go in and serve node.js server from so after the build actually done we got a folder here for the build and this is pretty much all you need so the full website the whole website you've gotta need is actually inside of this folder so it's basically the build there's analyze some html files and there's a static so your static files in here you're standing javascript on because it does some static site rendering as well so yeah we gathered that and got the server this is actually the main entry point for the file so it's going to start up a node.js server it's going to serve all the static react javascript files and css files and html files throughout this server so you don't have to worry about anything or rather than just like getting this data or getting this pretty much folder uh your javascripts and your server.js into your hosting whatever you are like a hosting or you can use netifly or verso with that to deploy it then you can just install the server pointing to this file boom that's all you need in that case in here all we have to do is just go and run yarn serve to start like a server it's going to start hosting it on the 3000 and in fact it's going to have the same server but this time it's going to be running on production which means we're going to have a fully minified code running on production so if we go back run a new server other than that so we're going to run 3 000 again we're going to get the same website i said before still works but this one it's not going to be the same as the other because this one is a production based website it only gets the javascript files and it does it here on like it does some ssr it does some static site rendering plus it also has some client side rendering as well so it's actually the both or i'm going to say three words combined together really joyful words just having it all combined user friendly and the power of wordpress so that's pretty much it guys for today's i hope you guys actually enjoyed this idea and i really like like wordpress and i like reacts a lot so just combining this for me it's going to open up a lot of opportunities in front of what creates like a quick website personal website or anything like that it's like a freelance website maybe why not looks pretty similar and i really love the idea we love the api and i really really like ssr for seo makes sense right so thanks for watching that's before i hope you guys really enjoy this kind of tutorials and you know like if you really want more stories like this enjoy wordpress this kind of stuff combined with react let me know i'll be very very happy to give you more guides of that and just be productive on what we can create next yeah so as i said before thanks for watching see you all in the next one [Music] [Music] [Music] you