Getting Started With React And GraphQL

hey guys this is Sebastian again from coding the smart way comm and today in this new tutorial you will learn how to use react and graph QL and to do so we will be using a library which is called Apollo react Apollo and this library is Weibull in the latest version which is 2.1 and with that new version a lot of new features have been added to react Apollo which are now making it very easy to make use of graph QL in your react application so today you will learn how to use the new query component for example which makes it very easy to connect until your graphic you are back and and yeah that is what we will be doing so just follow along and enjoy it so to get started with react and graphically and well the first thing we need to do of course is to setup a new react project and the easiest way to do so is to use a script which is called great - react - app which is way below on github if you take a look here at the URL github comm a slash face book slash great - react - app and this script can be used to initiate set up a new new standard react project and that is exactly what we are going to do in this first step and the cool thing about the script here ills if you scroll little bit down you can see it here in the quick overview section of the documentation you can use it directly without the need of installing it on your local machine it can be executed with the npx command which is a Weibull on your system if you have the latest one of the latest version of note and NPM installed so by using the MPX command you can execute that script directly and that is what we are going to do now so I'm switching over to you the terminal and here I'm typing in MPX and then followed by the script name which is great - react - app and then followed by the name of the project I would like to create and the name I'm using here is react - a graph QL so hitting return you can see it's already running it's downloading the react project then fetching all the dependencies of the packages which are needed by react and installing it all into a newly created folder and this command is running as you can see here it takes just a few seconds to complete so now you can see it's ready and it already gives me the next step so I know I can change into that newly created project folder and then I can use yarn or NPM to start up the development web server so let me use NPM here and then I need to say NPM start hit return and you can see it's starting up the development web server it's bringing up the browser loading on the project here which is running on port 3000 on my local machine and you can see it here it's printing out the greeting welcome to react to get started edit also see fjs and safe to reload so what we have here is the life reloading development web server so it you can keep it running in the background make your changes to the code and the live reloading development web service making sure that the content presented on the browser is reloaded automatically so that you can see changes made to your source code directly in the browser without the need to manually reloading anything here so now you can see we are ready the project is being set up and now we can move on and install in the next step a few dependencies to use the project because we would like to use the reactor power library so we need to install dependencies so to install the needed dependencies I'm switching back to you with the terminal stopping the webserver here for a moment and then using the NPM tool here within the project folder to install the dependencies and the command I need to execute here is NPN with the option install and then followed by a list of package names and first of all I'm adding the package Apollo - boost next react - Paulo and cert the graph QL - tech package and finally graph QL itself hitting return and you can see now the installation process is being executed it's downloading the packages including additional dependencies installing all that into the node underscore modules folder within my project folder and it's running and will take some seconds to complete and once it is complete we can move on and make use of the react Apollo library within our project so here we are the installation process has been finished successfully the needed packages have been added as you can see here and next I'm starting up my code editor which is Visual Studio code of course you feel free to use any other code editor if you like I'm using Visual Studio code here and to start it here and to open the current folder I'm just typing in code and dot for the current folder and then hitting return and then Visual Studio code is starting up with the project folder I'm located here in opened up in Visual Studio code you can see it here so that's my project setup we have the note underscore modules folder a Weibull here at the place where all the dependencies are installed into you then we have the public folder and we have CS / C folder and within the SSV folder you can find the main implementation parts of our application and that's exactly the place where we are going to start to adapt and add code in the following steps so the first thing I'd like to do here in my project is to open up Epcot jas from here within my SOC folder so here can see that's the default code which is a Weibull here and in order to be able to access the graph QL service from the reactor plication the first step I need to complete here in my application is to create an instance of Apollo client because Apollo client is it's the thing I'm using to connect to my graph to our back-end and this is done here in F dot J's and to do so I'm adding first of all an another impulse taekman tear and I'm importing Apollo client from the Apollo boost package like so and with Apollo client a Weibull here in app dot J's I can now create an instance and this is done on the following way so Const client and this equals new Apollo clients I'm calling the class constructor here and the constructor is expecting to get a configuration object and the configuration object needs to contain one property and zealously you are I property here and this is a place where I need to assign a string which is a UI of my graph QL endpoint so I need to include a semicolon here and of course I have no graph QL endpoint a Weibull so far so we know we need to talk about how we can create or get an graph QL endpoint we can use here for our sample application because we do need the uri string here so let's talk about the different options you have to set up a graph QL back-end we can then use together with our react application so of course there are multiple options just to name a few the first option is to use the Apollo server package here from the Apollo project to create a graph QL server together with for example no chance and Express so you can use it as a middleware in your Express server and then set up a server on your own if you would like to use that way you can take a look at our policy ver introduction tutorial here at coding system at wacom here you have a full introduction of how to set up a power serve ER and to configure Apollo server and then implement your back-end using that library another option else to use the Express - graph QL library which is a similar library which can be used together with node.js and Express and the Express - graph QL library is acting as a middleware again and it's working a slightly different and Apollo server but it's another option and if you would like to go this way and use Express graph QL you can also find a tutorial on coding this mod wacom hits the tutorial creating a graph QL server with no GS and Express here can find the full video our tutorial on how to set up a server by using that library there is another option which is a lot easier if you just want to set up your graphic you out back-end for force a sample application and for testing purposes and that's a polar Launchpad Apollo launch pad is an online service where you can create your server directly here in the browser so you do not need to implement it on your local machine you can set it up here in the browser and I have already implemented here a sample graph QL server which is giving you access to console stator and this is a Weibull here in bio is this ul you can find it as a link in the description of this tutorial and this this graph QL server which is implemented here using the launchpad service is Weibo and can be used and for example I can show you here as simple queries that's the all courses query I can execute it here just test if my server is working and you can see we are getting back data which is containing the oil causes property and then just listing some online courses here with properties like ID title also description topic and you were out and that is the data we are going to use together with our react application so for the first steps here in this tutorial I'm using this graph QL server which is implemented here with Apollo launch pad and here you can see it's printing out the graph QL endpoint that's the string we can just copy it from here go back to you will studio code and then I can insert the value here for the UI property and that's exactly that endpoint string so that is all what is needed so was that code in place Apollo client we are creating an instance of Apollo client and the pollak line is connecting to our graph QL back-end which is implemented using the Apollo Launchpad service in the browser so there is no additional server running on your local machine so having established on the connection to the graph QL endpoint with this code the next step now is to connect at the instance of Apollo client we have a label here in client to our react application and today so I'm first of all deleting the default implementation of the app component here which is printing or outputting the HTML code which we earlier saw on the browser and first launching the application that is not needed instead I'm adding now another import statement and to connect the instance of Apollo client to our react application we do need the Apollo provider class which is a Weibull in react - Apollo ok like so and now of course need to add the implementation of app component once again and the way we do need it and let me implement it in the following way like so and the JSX code which is needed here is first making use of the Apollo provider element so let's use Apollo provider here and then we are using the attribute client and passing in was curly braces our instance of Apollo client so that is a most important step to connect adhere to our react application of course we need to close the Apollo provider element here and within that for Apolo provider element we can include additional JSX code which is used to hot put maybe a headline first so I'm using a div element here and within the div element I'm using an h2 tag to output a headline text and that is my first Apollo react application like so okay so now let's check the result again in the browser and you can see the default content which has been outputted before from the default read project as gun because we've deleted everything from the implementation of that component and instead only happened my first Apollo react application is printed out here in the browser so now our application is ready we have established the connection to the back end to the graphical back end which is provided by Apollo launch pad and then connected that back end connection to a react application now we're ready to go we can now enhance our react application to actually request data and then provide the data to the user here in the browser so that would be the next step and to do so we are creating a new component in our application so let's go back here to visual studio code and to add a new component I'm adding that component here in the SRC folder I'm saying add file here and the name of that file should be conscious dot J s so the course is not cause J as let me rename it to cause us dot Jaso k like so so we are introducing a conscious component here in our application and of course as file is empty its newly created so we start with the implementation that react component from scratch in that empty five year now so to start with the implementation here in that file we first need to import a few things so we need to import react from react next I need to import query from the react - Paulo package then I need to import gql from the graph QL - tech library and then of course we need to implement the component so the component is named causes ok like so and finally we need to make sure that courses is exported here as a default export so that it can be later used in other component files here in my project so we are exporting it by default s courses like so ok now of course I need to include the implementation here in courses and the first thing I'm now doing here is to make use of the new career component from the react Apollo library to actually execute a query to my back-end and the way it is done is by including query as an element here with the attribute query and crew gets assigned as an expression so in curly braces the graph QL query and to include graph QL query language here actually I need to use a GQ tag I've imported so like so and then using tactics here to include it as a multi-line string like so and now I'm able to include the graph QL query right inside this element here so because I'd like to retrieve a list of all away but causes I'm once again using s seen before here's you know the Apollo launch pad the all causes query and I'm requesting the following attributes here for every single call CID the title also [Music] description topic URL ok like so let's close the query element here and the next thing now is the curry is executed and then I need to include a callback method here which is then invoked if once the query is executed and then I can include the logic I'd like to implement in that callback method but before doing so let's includes a closing pure attempt here so that this element is opening and closing correctly and now within our bad query element I'm able to include the callback function I'd like to use and we do it in the following way here as in function without name and I'm expanding the list of parameters here so we have loading arrow and data okay then the function body and the first thing I now need to check is if loading so if the crew result is not yet available but it's loading I'd like to return the following JSX code here just to print out an information to the users that the loading is taking place so I'm printing out the text loading like so the next case is if in error hands are cured I'd like to inform the user as well so in that case I'm returning again just the following information arrow and I'm closing the paragraph element here okay and of course the most important case is when the data is available and I'd like to output the data to the user so that is a cert case and that is what is handled if it is not loading and if no error is a cured so the way I can output everything as by returning what we're getting back from the call of data or causes - map I'm using the map method here - I - right through the list of returned causes and passing in a callback method which is then executed for every single cause and that list and this method is again containing the properties which I am extracting here Rd title author description like so topic ul okay like so and then in the body I'm returning that Jane has X code here and forever sing across element in the first temp now I'm printing out div element which gets assigned a unique key here was a key attribute and this is what we are having a Weibull in our deep because ideas containing the unique identifier for everything of course so I'm using that div element here and let's close it and within that div element I'm using a paragraph again to include the following expression was it which is printing out just a title and see also information so don't assign curly braces title by dollar sign curly braces authors so this is inserting the value of title and inserting the value of author here in my string I'm printing out okay closing the string and finally closing P element here so this should be all including a semicolon here so this code should do the job so let's check it out so to be actually able to see the output which is coming from our causes component we first of all of course in dt2 included in the main application component which is app and here I'm importing now courses from our arm file where it is implemented which is courses now it's a Weibull and i can make use of that component here in my JSX code and for included here as the only element in my top development so cause us in that way so let's check it at the browser and as you can see we are not getting back what is expected instead we're getting a syntax error which is saying unexpected name all causes and it's highlighting here's the line and the quail code in the source code and you can see here so let's correct it it's a Weibull here in Casas dot j s and this is the place which is highlighted and the reason is all causes krory else included here directly in the graph QL string and this is not correct because all the queries needs to be embedded in in opening and closing curly braces like we saw before when executing the on console query in the Apollo launch pad user interface and we need to include that here as well so opening curly braces closing curly braces and embedding all courses just inside those pair of curly braces okay so let's check it again and you can see now we are getting back what is expected we are getting a list of courses just with the title information and was the name of the author so this is obviously working so so far on the output of course information like title and author is done directly in courses component and in the next step we're going to introduce a new component to our project which is called just cause and this component should then contain the code which is needed to output one single coil and then we can make use of that component here within courses dot J s and first to implement that component we of course need to add again a new fungal to the project this time it's called cost dot J s okay and then we need to empty implementation here first because we are we are going to implement a new react component here we need to part react from the react main library and then let's let's implement cause and now cause gets the current cause information which with all the properties we need to output here via a component property so we have props as an parameter here and claim like so and of course I need to export course here so that I can make make use of course in causes component later on ok like so and to output one sing a course let's include another div element here again the key attribute is used and the value which it is assigned the key is again the idea of the current course which is now available in props dot cos da tardy and then I'm outputting just as seen before here and causes dr. J s so I can copy and past it here so this paragraph element but this time title is not a Weibull directly instead we need two accesses with our props dot title and the same as about for the author information its props dot course dot Asura like so okay now let's go back to Coruscant j/s to the top and then I'm adding the import statement here for our course component so import course from course okay like so and then I can replace it here so everything which is included here inside of the map handler so let's remove it here let's remove the list of extracted parameters here as well instead we are just expecting to get the current course as an object and I'm using here inside the callback handler I'm using the cost component to output the course and I need to pass it in by a component property which is called course and I assign here with curly braces as our current course so okay so on the server is still running in the background so I can switch back to the browser and you can see the output has not changed it's basically the same as before it's outputting the title and the author information for everything of course but this time we know the output is not coming from causes component instead it's coming from the course component which is embedded here for every single course in the list we are getting back from or graphically all beckoned okay so to further complete our application in the first in the next step we are adding the bootstrap library because what we saw so far in the Brahmas our output is not looking very nice so we will be using some bootstrap CSS classes to make our output look a little bit nicer and to do so we first need to install the bootstrap for library and today so I'm opening up here in Visual Studio code the integrated terminal and you can do so from the View menu and then select the menu item integrated terminal and then the integrated terminal is opening up here and you are located by default in the project folder and to install bootstrap library we can use the node package manager again so NPM is the command and then we using the option install and then followed by the package name which is bootstrap okay so we're turn and now you can see it's running again downloading bootstrap installing it into the node underscore modules folder of our application and once it is completed we are able to import the bootstrap CSS file into our project so that we then can apply bootstrap CSS classes to our HTML output okay here we are you can sit here bootstrap 4.10 has been installed successfully and now I can open up index dot JSON the following important statement here to import the bootstrap CSS file so import from node underscore modules in bootstrap dist / CSS / and the fire we would like to import here is boot boot scrap dot MnDOT a CSS like so okay now it's Weibull and we can make use of bootstraps CSS classes first in constant je s so that's where every single cause is outputted and so far we have been using the following JSX code here and now we are going to enhance it a little bit to make the output for every course look nicer so I'm going to remove those three lines of code here and start over again with embedding development here and this time we are going to assign a CSS class here which is called cart and you need just to remember that in react you need not to use class you need instead use class name as the attribute and that is what we're doing here and then I'm including some inline styling as well so I'm assigning a width of let's say 100 percent and I'm using a margin to the top so much on top of about 10 pixels are things that should be sufficient okay so it's closest if element here and within that div element I'm using another different element this time I'm assigning a class of card - body again a bootstrap class so and within that card body section I'm including first from now outputting see the information of that cause and I'm starting first was including the title as a headline so I'm using h5 element here assigning a class of God - title like so and outputting here was in that h h5 element outputting was curly braces this value which is avaible and props dot cross dot title like so okay next I'm using an h6 element here class name is cart - subtitle and m/v - - - at a margin to the bottom and I'm using the class text - muted looks so and it's very I'd like to print out here as in h6 element is a Weibull and props dot cost dot officer okay so next else a paragraph was class name of car - text and value as props dot course not just scratching like so okay and finally i'd like to include a link to the courses website as well so i'm using anchor tech here and I'm assigning the following value to Z H ref attribute here which is a label and props dot cost or ul and of course I need to asana classes here as well starting with card - link okay that's sufficient only that class here and closing this anchor element here and including the text go to cross okay let's so and checking the result in the browser again you can see the output else now looking much better we have the list of courses now presented at bootstrap as bootstrap card elements we have that link here available so you can click on the link and it takes you to G courses website and now we can make some final final enhancements to our application and maybe include a top navigation bar so that the application looks a little bit more professional and to do so we are going back to amp tortillas in Visual Studio code and add as a necessary code changes here so first of all to use the top-level development here I'm assigning a class a bootstrap class which is called container like so and then here inside that div element I'm using another day another nav element to includes a navigation bar area and therefore I need to assign the following classes here navbar Neph or dark and BG - primary to display you know in a bluish color ok let's close that Neff element here and within the Neph element I'm including just man kortek here was class name Neff or - Brent like so and it's pointing to the current website and the text should be displayed here react and ref QL sample application flex so okay Rhett underneath the nav element here I'm adding another div element here just you include the output which is coming from the courses component inside of that div section here which I'm going to close here okay so let's say fit going back to the browser and now I can see it's looking again better now we have the navigation bar area here on top we have it centered because the container class are supplied and now you're getting back the list of courses which is coming from our graph QL back and by using the Apollo react library so so this one's about stem from coding this man without common sense will be very much for watching if you do enjoy my videos please don't forget to subscribe to my channel on youtube please also don't forget to visit my website at coding the smart way calm and I hope very much to see you in one of my next videos so stay tuned and bye you

Channel: CodingTheSmartWay.com

Views: 55,024

Keywords: React and GraphQL, GraphQL React Tutorial, React Apollo, React Apollo 2.1, Apollo Query, React Apollo Query Component, GraphQL, Learn GraphQL, Learn GraphQL and React, Apollo GraphQL and React, Apollo Launchpad, GraphQL Front-end, GraphQL Web Application, GraphQL Client, Web Development

Id: 5evJqX5i1zE

Length: 42min 20sec (2540 seconds)

Published: Sun Apr 22 2018