React tutorial for beginners ⚛️

hey what's going on everybody it's your bro hope you're doing well and in today's video I'm going to show you everything you need to know to get started working with reactjs so why don't you go ahead and sit back relax

and enjoy the show react is a JavaScript library not framework that's used to easily build and arrange user interfaces for web

applications react focuses on building a web application using these things called components a component is a self-contained section of code that functions as as a reusable building block think of Legos you could say a

Lego is similar to react component each Lego represents a section of reusable JavaScript and HTML code we can build a diarama or other complicated structure from these Legos if we use enough of

them and in the correct places react uses a syntax extension of JavaScript known as jsx meaning JavaScript XML jsx allows you to write HTML like code

within your JavaScript files react also utilizes a virtual Dom it's a lightweight version of the real Dom of a web page we can keep track of any changes made to the virtual Dom and only

apply that specific change to the real Dom without needing to refresh the entire web page only that specific section this reduces rendering performance overhead before we do begin you will need to know JavaScript since

react is a JavaScript library everything up to arrays classes objects and es6 feature such as Arrow functions will be necessary HTML will also be mandatory

since our react components involve rendering HTML elements and applying CSS I do have full free courses on my YouTube channel on these topics if you need to catch up or you need a refresher so that's a quick overview of react

we'll move on to the installation instructions next we're going to download nodejs from this URL nodejs.org node.js is a backend JavaScript runtime

environment it executes JavaScript code outside of a web browser we're mostly interested in the node package manager that comes with it let's download the

latest version of node.js open it when the download is complete select next read the license agreement yes I did read it that fast

next select a destination folder I'll keep it as is you can define a custom setup but that's outside of the scope of this tutorial series we'll press next we'll

skip tools for Native modules press next and install then finish you'll also need a text editor I

recommend vs code since you've made it this far in my web development series I'm assuming you already have one downloaded which you can get from this site code dovisual studio.com and select

the correct download for your operating system within VSS code I'm going to create a project folder let's go to explore open folder just for convenience

I'll place my project folder on my desktop I'll create a new folder I'll name mine website then we will select this

folder we're going to need to open up command prompt if you're using Windows or terminal if you're on Mac you can also do this within vs code go to the

hamburger menu up top terminal new terminal we within our website folder we will type the command npm meaning node package

manager create vit at latest meaning latest version V's a development server it's a modern replacement to create react app

which is now outdated hit enter we'll need a name for this project a common naming convention for a user's

first react project is my react app that's a common name that you'll see enter select a framework using the arrow keys we can select whatever framework we

would like to use we will select react hit enter are we going to use typescript or JavaScript we'll stick with plain JavaScript all right here are the last

few commands and they are given to us we'll change the directory to our react app CD meaning change directory my react

app and that's the name of the folder where our project is located npm install that is the second

command the last command is npm runev to start the development server npm runev all right so our web server is

found at this address let's copy it then open up a web browser let's paste that address and here we are within our development server this is a sample

project that's given to us it even includes this little counter hey this is future bro I was editing this video and I totally forgot to mention how you can restart the server

if you close out of it all you got to do is open up a terminal let's go to terminal new terminal we have to be sure that we're within our application folder I'm going to change my directory by

typing CD the name of the folder my react app then npm run Dev to start the development

server and let's refresh that yep it seems like it's working so yes I forgot to mention that that is all I'm quickly going to cover the project structure of our react

application we'll begin with the node modules folder this folder contains external libraries and packages that our project relies on a few of which are

build tools utility libraries routing libraries just to name a few we won't be spending any time directly in this folder but you should still be aware what it's for if it just contains

external libraries and packages that our project relies on next we have the public folder the public folder contains any public assets one of which in here

is a vit image it should be this image right here this folder can contain public fonts images videos they're not bundled during the final output they're

typically available via a URL just to demonstrate I'm going to delete this image file and see what happens yep and that logo is gone so my

v logo was a public asset via a URL and let's put that back then we have the source folder we'll spend 99% of our time within the

source folder we have an assets folder that can contain images and videos the assets folder is very similar to the public folder but files within the assets folder are bundled during the

final output public assets are not and they're generally available via a URL my re act image is within the assets folder

currently we have a main jsx file remember that jsx is Javascript XML in a way this functions as our main Javascript file react works with

components we're adding a single component an app component which we are importing so let's take a look at our app component the app component in this example you could say is the root

component we have two different stylesheets a stylesheet for app and we have an index CSS stylesheet this is the main CSS file for our application we're

importing this file from our main jsx file right here so that's the source folder then we have an index HTML file this is the main entry point into our

program within the body of our document we have a development with an ID of root as well as a script to our main jsx file a few other things you should know about

is this package Json file Json file files are structured in key value pairs this file contains metadata about our project such as the project name the

version number what build we're using we're using vit and the react version number just to name a few all right everybody so in just a moment we will be creating our first react component we

already do have one component that is app right now this is serving as a sample project for us then we are importing app to main jsx this is our

main J s x file think of it as the main JavaScript file we are creating a root element and including our app component within our app component we do have a

function delete everything within this function that should eliminate our sample project and we no longer need these Imports we can delete them

too but you do want to keep this export statement components can have dedicated stylesheets which you can see here for app CSS we are going to delete this because we no longer need

it we do have an app component that's going to serve as the root we will add other components to our app component our app component ties them all together to create a new component go to your

Source folder we're going to rightclick then go to new file we will create a component for a header the extension is

jsx because it's a JavaScript XML file we will be working with function based components we will create a function

with the name of header do pay attention to the capitalization then we would like to export this component so we can import it elsewhere at the end of this file

type export default the name of the component header within our header function we can write a combination of

JavaScript and HTML all we're going to do within this function is return something return parentheses semicolon within the return

statement you can write pure HTML I will create a header element so react components they're only capable of returning a single element but you can place children elements

within within our header element I will create an H1 element with text of my website just to be sure everything is

working let's save I'm holding contrl s on Windows we will go to our app component then import the header component So within app we will type the

statement import the name of the component header from a location that location is

going to be do SL header.

jsx we can now use this header component within our app component we will also be returning something so we will need a return statement return parentheses

semicolon what are we going to return I would like to use my header component so to add a component we need a set of angle brackets then type the name of the component

header like this they're a pair of two and the second one is closed that's why we have a forward slash preceding it we now have a header component you can

shorten the syntax as well take your component end it with the forward slash that also works too it's a shorthand way of writing the same thing let's head back to our header component We'll add a

few more elements after our H1 element let's create a navigation element then within the navigation element we'll create an unordered

list within the unordered list we'll create a few list items the first will be home these are list items you would

typically see for a navigation bar home about services and contact we now have our unordered list

I'll enclose our list items within anchor tags to make them hyperlinks a hre equals I don't want these to go anywhere I'm just going to leave these empty I'll add

a pound sign and then be sure to close these anchor tags we'll place our text within the anchor tag so they are now hyperlinks

okay let's do that for the other list items there we are then after my navigation element I will add a horizontal rule to make it look nice okay there is our header component

we no longer need to work with this header component we do have some styling already applied those Styles can be found within index.css if you would like to start fresh and eliminate all of

these Styles you can delete everything from here then you do have HTML with no CSS in a future video I'll show you various ways in which we can apply CSS

to a react component but for now we'll just keep this the same our head element is now complete we will create a new element for a footer again go to our

source folder right click go to new file footer.

jsx we are creating a function based component it's a function that's going to return a footer

component then at the end of our script we will export default the name of the component footer so that we we can import it elsewhere our footer is going

to return something so we need a return statement then within the set of parentheses we can return a single element we will return a footer

element but remember you can place children elements within an element it still only counts as one then so what do we want to do for our

footer I'll include a paragraph element within the paragraph element I'm going to add a copyright symbol to add a copyright Mark Type ampersand copy semi

call in then afterwards I'll add your website name all right now we need to import

this footer going back to our app component we will import footer from footer.

jsx then I would like to include a footer component after the header now pay attention to this we're returning two

components we have this warning we only have the capability of returning a single component that's how our return statements are designed jsx elements

must be wrapped in an enclosing tag do you want a jsx fragment so since we only have the capability of returning a single enclosing tag we're we're going to enclose our components with what's

known as a fragment it's just an empty set of anle brackets so we will enclose all components within a

fragment and that should work we have our footer component following our header component we have our header and our footer let's make a few

more changes to our footer I'm going to zoom out a little bit within our return statement we can insert some Javas script to insert some

JavaScript you need a set of curly braces I will create a new date object this is some JavaScript code

new date parentheses I would just like the year I will follow this object with get full year method let's save and take

a look so I'm filming this video near the end of 2023 your web application should return the current year when ever you're watching this all right our footer component is now

done I'm going to create a component for a unordered list to sandwich between our header and our footer I'll create a component for food we will go to our

source folder create a new file this component will be food.

jsx again we are creating a function based component with the name of food then we will export this component

when we're done export default food be sure to add a return statement before we add anything to the return statement I will create some

JavaScript variables so normally if you're adding JavaScript code within the return statement you need a set of curly braces but outside of the return

statement you don't I will create two JavaScript constants const food one pick some food for me I will pick an

orange let's make that Capital all right then let's create a second food variable food 2 for me will be a

banana within the return statement we can utilize these constants what do we want to return exactly I will return an unordered

list we'll have a few list items three to be exact my first list item I'll just add some text I'll add an

apple just to be sure that everything is working let's import this food component from our app component again we need an import

statement import food from food. jsx we

can now use the food component we will add that after the header we will add food then here is our first list item an

apple okay let's head back to our food component for our second list item I will add food one that's our constant now pay attention to this if I type food

one well we're literally printing the text food one since we're within our return statement I would like to include some JavaScript code we're including a

JavaScript variable so I need to enclose this variable within a set of curly braces because we're within the return statement and now now my second list item is an orange then let's include

food 2 but I'm going to add one more thing food 2 however I'm going to use the builtin 2 uppercase method just to

demonstrate that we can use JavaScript functions all right and there is our unordered list we have an apple orange and a banana so these components are now complete and the cool thing about react

as well is that we can keep on reusing these components if we would like I would like a couple food components so I will just paste another component we now have two food components or even three

or four you can rearrange these components however you would like by rearranging them we can change the feel and style of our web application for demonstration

purposes I will put our footer on the top that doesn't make any sense but I just want to demonstrate so our footer is now on the top followed by the header

then the food component or maybe I would like the food component on top we now have our food component footer component then our header

component all right everybody that is an introduction to react react is all about reusing components a component is a small section of code that can include

JavaScript and HTML your function will return that code and make it reusable and that is your introduction to react