It's a separate language built on top of JavaScript.

It's a JavaScript syntax extension provided by React that combines HTML and Javascript.

Introduction to ReactJS and Environment Setup

"hello and welcome to the first lesson of our intro to react course in this lesson we'll be getting set up with the development environment and creating our first react component first of all we'll need to install node.js and npm which stands for node package manager so here you can navigate to nodejs.org and download your version of node.js that's available so for me I have Mac OS so I can select either one of these then if you do not have Visual Studio code you should also install it by going to code.visualstudio.com and you can simply click the download Mac or download Windows or whatever operating system you are on and so once you have both Visual Studio code and node.js installed you can navigate to your file explorer or finder you can simply go to your downloads folder or desktop for me I'll go to my downloads folder and I'll simply click new folder and name it react.js course this is where we'll be doing all the work for this course and so once you have the folder created you can navigate to visual studio code and then you can click open and then you can simply navigate to the folder that you saved it in which is downloads react JS course and then open and then to get started with your react environment you'll need to run a simple command line prompt so for me since I am on Mac I can simply click terminal new terminal [Music] and then once it loads all I have to type is npx create react app and then the name of my app so I'll just name it react this course and as you can see it'll start initiating the create react app process [Music] and softer a few minutes you can see it is created the react.js dash course folder and in it you can see the known modules public folder and Source folder along with some other files that we'll get into later and so to navigate to this folder you'll have to do CD which stands for change directory react is of course and it will change the directory to this path so for a quick rundown of all the files that we have first in the source directory as you can see we have app.css and app.js when creating your react app initially we'll be editing app.js and another folder that is pretty important in a react.js project is node modules so as you can see here you won't be messing around with known modules much if at all in this course all it is is it's your dependencies and so if you navigate to package.json you can see all your dependencies your react Dom react scripts web vitals and then testing libraries and whatnot so essentially you do not need to worry about node modules in the scope of this course as it's just there for the dependencies and nothing else and app.test.js is not necessary for this course so we can forget about that [Music] another file that we can forget about is the report web vitals file and another one that we can also ignore is the setup tests.js file so in app.js you'll be riding in jsx which is a combination of JavaScript and HTML so if you aren't already familiar with HTML and CSS I recommend you check out our course on HTML and CSS and familiarize yourself with that as react has a lot to do with HTML and CSS so if we navigate to the public folder you'll also see the only HTML file that will ever be in react which is index.html and essentially the purpose of this is this div with the ID of root and if you go to index.js as you'll see here you're getting the element by ID as I said which was root and so basically this injects all of your app.js code into the index.html file so that a user can see it so let's get started and run this react application so all you have to do is npm start and it will go ahead and spin up a local version so as you can see here you're greeted with this edit Source slash app.js so let's go ahead and start editing the website so first we can go ahead and delete all of this and we can also delete this class name and so we can simply put a simple H1 tag which is a header hello world save it and then as you can see the website you have hello world so that's all for this lesson in the next lesson we'll be covering some more files and more about react components so I'll see you then"

class ComponentName() { return <h1>Hello World!</h1>; }

function ComponentName { return <h1>Hello World!</h1>; }

component ComponentName() { return <h1>Hello World!</h1>; }

 function ComponentName() { return <h1>Hello World!</h1>; }

Components and Props

"hello and welcome to lesson two of our intro to react course in this lesson we'll learn about react components props State and event handling last time we covered a simple functional component that rendered a hello world message now we're going to dive deeper into what components are and why they're so powerful in specific we're going to be talking about reusable components a component in react is a self-contained piece of code that controls a part of the user interface we can think of components as building blocks of our application it makes our code reusable organized and easier to maintain the most common types of components include navigation bars and Footers so I have app.js open right here so let's create a new component that we can use within our app page so I'll create a new folder inside the source directory called components [Music] and inside that components folder I will create greeting dot Js inside this folder I'll go ahead and import react from react and then I will go ahead and create a function called greeting and make it return an H1 tag that says hello this is my first component now I hope you are doing well and then put a semicolon and then you're going to want to export component like so and so essentially what this component will do when called is it'll output this H1 tag hello this is my first component and I hope you are doing well so let's go ahead and test it out so we can go to app.js we can delete our H1 tag and we can do import reading from opponents slash greeting and then inside here we can simply call it like so and if we run our react app we should be able to see that component in the home page and so it started it on the local server and so we can go to Google Chrome and as you can see it shows the component right here and we can also edit the component to include more than just an H1 and so we can also include a P tag that says this is a short description of this component and to ensure that you can include multiple tags in this return statement you'll want to include fragments which are essentially a greater than and less than sign and then you can copy paste that and put it at the end you can also format the code to make it look neater and as you can see here it shows the P tag so now let's discuss props which is short for properties props allow us to pass data from a parent component to a child's component this way we can reuse components with different data so for example if we go to greeting.js which we are in and if we modify this to take in props into parentheses and then we can go ahead and delete this and we can also delete the fragments so it'll just be one H1 tag we can say hello ops.in and essentially what this will do is it'll access a variable or a prop which is called name that we'll call in the parent component which is app.js and it'll display it so if I were to put set the name to Sid it'll show hello Sid so let's go ahead and test it out we can access props by putting it like this name you can put my name and as you can see It'll show right here and you can create more than one prop if you want you can simply put the fragments back first and you can put hello the time is currently top spot time then you can set the time to 11 32 P.M as you can see here it'll show the time foreign [Music] so far our components have been pretty static but real world applications are usually Dynamic and interactive and that's where State comes in state allows our components to hold data that can change over time and when those change react takes care of updating the component on the screen so the first react hook which we'll be using is the use statehook and so we'll use this in the greeting.js file and so you can simply import it adding a comma here and then the curly braces use state and to use this right above the return statement we can simply do const greeting set reading because you state and we can set it to hello actually and then let's go ahead and delete this and then delete the corresponding time that I added here before and so let's create a button on click I'm going to want to create an arrow function and we'll have more info about Arrow functions down in the description so let's do the set greeting uh welcome you can change reading by clicking the button and so now essentially when you click this button it will change the greeting so let's go ahead and try it and currently the greeting is hello so if I click this it'll change the text to welcome so this is a super basic example of how we can make our components Interactive and so that's it for lesson two you've learned a little bit about components props State and handling events in react for your challenge try creating a new component that accepts props and has its own state see you in the next lesson where we'll dive into more advanced concepts in react"

It allows you to change the state of a class component.

It allows you to create mutable variables.

It allows you to create a state variable and a function to update it.

It allows you to use lifecycle methods in functional components.

Handling Forms and Managing State with Hooks

"[Music] hello everyone welcome to lesson three of our introduction to react course today we'll dive into a very important topic handling form inputs and managing form state so in many web applications we need to handle user inputs may this be in a sign up form in a contact form registration Etc these can come in various forms such as text inputs check boxes radio buttons drop downs and so on then managing the state of these inputs is a crucial part of creating a smooth user experience so we'll start by creating a simple form with one text input and a submit button let's create a new component called userform.js so inside our components folder we can go ahead and create that so as we did with our previous component in the last lesson we just have to import react and then the hook which is use state um react and then we can go ahead and create the component user form and then we'll go ahead and use that react hook we use statehook one more time user oops user name set username do state and then we'll go ahead and leave this blank as an MP string and we can go ahead and create a handle submit function that we'll use for our button so we can go ahead and name it const and they'll submit equals and and then we can go ahead and prevent the default form submission behavior and so essentially how we do this is we type events uh prevent default and this is a good practice when creating forms so I recommend that you put it in all forms that you create so you can go ahead and console log those eight data so you can put form like that and so now that we have our handle submit function created we can go ahead and create a return statement and it will include the function call a label and name input we can set the type as text the value to the username and then we can go ahead and make it so that it calls our react hook [Music] and so we'll go ahead and create the submit button too and it looks like I accidentally console log the wrong thing I meant to put username so now as you see here if we input a name to the heart that's my name and we can simply open the console by going to inspect and clicking console as you can see it console logs my name so this form demonstrates the basics of handling form input in react we control the form's input values using react State and handle form submission with a function that has access to this state handling a single input state is pretty straightforward but what if we have multiple inputs in our form it can get pretty tedious to create a use state for each one so in such cases we can use one new state variable as an object hold all four values so we can go ahead and create update our user form component so let's go ahead and update this use State hook so how we're going to update this is essentially instead of making it blank that blank string we're gonna create we're going to create brackets and we're going to set the username to blank and the email to blank and so essentially what we've done is we've created a state variable form as an object to hold multiple input values so if if we wanted more than just username and email we could input age birthday many more types of inputs and just put them all in here instead of creating multiple use State hooks so we do not need to update our handle submit function for this but we do need to create a new function that will be called whenever an input field changes so we can go ahead and create a handle change events and it will set the form we're going to use the dot notation and so we can essentially do events.target name is [Music] pointed towards event.target.value so the name attribute of the input field that changed is used to determine which field to update so as a consequence of what we just changed we are going to want to modify this on change to handle change and then we can go ahead and create another form input uh and it'll be called email so type text value email change we're gonna one run that same handle change function and so since we're not just handling the state of username we can also change this to form and set form and then we can also change this console log data to form so it looks like I made a mistake in the values which should actually be form.email and form dot username since as you can see in the form hook we're creating username and email and we're gonna go ahead and want to create name like so and now we can go ahead and put my name and as well as my email and as you can see it console logs both the name and the email so that's it for lesson three we've covered handling form inputs managing form State and handling multiple inputs for your challenge try to create a form with more fields and Implement a reset button to clear all Fields as always the best way to learn is by doing so see you in the next lesson where we'll be exploring handling lists and keys in react foreign [Music]"

<Link route="/new-route">New Route</Link>

<Route path="/new-route">New Route</Route>

<Navigate to="/new-route">New Route</Navigate>

Navigation using React Router

foreign and welcome back to our introduction to react course today in lesson 4 we're going to learn about routing and react router by the end of this lesson you'll be able to create multiple pages and navigate between them in your react app so for a quick background on what routing is exactly it's the ability to move between different parts of an application when a user enters a URL or clicks an element link or button within the application react router is a powerful routing Library built on top of react which helps in adding new screens and flows to the application so to get started with react router we'll need to install a package called react router Dom and we'll simply do this by doing npm install react Dash router dashed off in our terminal once that's installed we can start by importing the necessary components from react router Dom so first really enclose everything in a curly brace and we'll go ahead and import browser router as router we'll import route routes uh link all from react router Dom now inside our source folder we're gonna go ahead and create two new pages so our first page can be called home.js and our second page can go ahead about.js and so we're going to go ahead and create a simple page for the about section and so it's it's going to be his basic function we're going to go ahead and return an H2 value that says about then in the home one will do the same thing [Music] [Music] but now that we have both of those pages created we can go ahead and go back to app.js in app.js we're going to want to wrap everything inside a router tag so first let's go ahead and type router then we'll enclose everything in a div and then a nav component so let's go ahead and write that then we're gonna write an unordered list for the navigation bar and then I forgot to wrap everything in parentheses so we're just going to go ahead and drag all of this into the parentheses and delete that semicolon and so once we have that unordered list we can go ahead and create multiple list items or Allies and inside those allies we're going to go ahead and create links for each page that we want to link to so for the first one we can go ahead and create home and inside the unordered list we're going to go ahead and create another one which is going to be about and then outside of the nav component we're going to go ahead and create a routes component and wrap both of our routes inside this routes component when you are creating routes you're going to want to use this routes component first and then route and then put your path so slash slash it should match and then element you can go ahead and use your element that you made previously and we're going to go ahead and do the same thing for the about page and so once we have all this code we can go ahead and run it by running npm start [Music] and then one thing that I forgot to do on both of the pages is add an export Default about and Export default home so that the application knows that these are components that we can use in this react application and so once that's done as you can see it's compiled successfully and we can go ahead and refresh this page and you can see home which we are on right now and about will take us to this tag now as a challenge I want you to edit both about and home and add some more elements to this when you're adding more elements be sure to add the fragments surrounding your elements so that you can create multiple elements inside your react page so that's it for this lesson you've learned how to create a simple multi-page application using react router be sure to play around with the code and maybe try adding more pages and links and see how everything connects

Fetching Data with React

"hello everyone welcome back to our introduction to react course today in lesson 5 we're going to learn how to fetch data from an API using react this is a common task in many web applications to fetch data and react allows you to do this in a pretty simple way so to get started we're going to import the necessary hooks from react so the first hook that we'll need is use effect and the second one that we'll need is use State and we'll import them from react now inside our function component we're going to declare a new state variable data using the use State hook so we can simply do set data and then set it to null because there is currently no data being stored and now we'll need to use our use effect hook which we can simply do so and so to use our use effect hook we need a input Fetch and then a URL so for testing purposes we have a URL that will fetch a few sample blog titles and so now we have the URL in there we can simply convert the response to a Json format by simply doing then parentheses response Arrow response.json then we can update our data state with the received Json data so we can do this by doing another dot then data are Json data and we can set the data to our Json data and so to fix this we're just going to delete those two and simply put an empty array and that completes the use effect hook now to display it in our application we'll go inside these fragments and create a div inside this div we're going to be mapping through our posts so we can simply put an H1 tag called posts for the page then we can map through it by doing data and then the and and operator to make sure that data exists post comma index then we can simply display another div [Music] and inside this div will be the post title and to fix this we have one too many parentheses so now if we run this code it should work as expected so let's go ahead and run npm start and as you can see here it displays all the posts see which number each post is we can simply use our index variable right here and we can display it like so so this will show zero one and so on and it's as easy as that that's how you fetch data from an API in a react application there's many ways to fetch data and react including axios and some other packages that you can use other than a use effect hook but use effect is one of the most beginner friendly ways to learn how to fetch data from an API so in the next lesson we'll be working on a final project that incorporates everything we've learned so far in this react course foreign [Music]"

Final Project: Dog Gallery

"hello everyone welcome to the final project of our introduction to react course today we're putting all of our learned Concepts into practice we're going to build a dog image gallery using react this Gallery will display images fetched from an external API the dog API we will create different pages within our app and set up navigation between them using react router you'll also manage the application state with use State and use effect here are a few tips before you get started one remember to break down your application into components think about which components you might need such as an image gallery component and a dog image component two use the dog API to fetch images this involves making an HTTP request in your react app think back to lesson 5 and how we fetch data from an external link tip number three is set up your routes using react router each route will correspond to a different page in your application your final application should have at least two pages one for the image gallery and one about page the image gallery should display a list of dog images fetched from the dog API remember to take it step by step and refer back to previous lessons if you need to and most importantly have fun building your application good luck and I can't wait to see what you create the complete code for this project is available in the description below feel free to check it out if you're stuck or want to compare Your solution foreign [Music]"

React enables developers to create reusable UI components, promoting code efficiency and readability. Learn the basics of how to use React and deploy a project at the end.

Introduction to React.js

Brief Overview

Content Covered

Curriculum Overview

Help Desk

Check out some FAQ's in case you would like further information.

Support Our Mission