Full React Tutorial #1 - Introduction
React is a Javascript library that we use to create interactive websites and use interfaces. it makes it
really simple to create something called a single page application or an SBa for short now by single page.
the server only ever needs to send a single Html page to the browser for the website to run fully. react
takes over and manages the whole website in the browser, including any kind of website data or user
interactivity, such as click events. you will learn all of the fundamentals of react from using state the
react router how and where to fetch data and how to use react hooks like you state and use effect as
well as creating a custom hook as well.. By the end of this course, you're going to be in a good place to
start making your own react applications now before you do start I. would suggest that you at least know
Html and CSs because we 're going to use this to basically create templates for our different react
components.. if you want to see the code for a specific lesson, you have to select that lesson from the
branch drop down right here. For example, to see lesson 10 code click on this branch, and you 're going
to see all of the code right here. in the next video, we will go ahead and create our first react
application..
Full React Tutorial #2 - Creating a React Application
There 's a few different ways to get started with react, but the easiest way is to use a tool called create
react app.. This is a command line tool which generates a star to react project for us and it comes fully
baked. Then with all of the setup and config that we need like babble and webpack. Now we need those
to compile our react code and Jsx later into production ready Javascript. to do this you need a modern
version of node installed on your computer ideally version 5. 2 or above.. This is the starter project
created by create react app.. This is where all of our project dependencies live. all of our react code is
injected into this one file right here inside this div with an id of root again you probably wo n't come in
here much but if we do n't worry. I 'm going to show you how we edit things later on all right. the source
folder is where most of your code is written all of the different components and the index. JS file is what
kickstarts our app and by the way react. strict mode that means that react does additional checks during
development and it gives us warnings down in the console if there are any warnings to reports all right
so that 's the source folder again we'll come back to all of this later on..
This is the starter project and this right here. This content is coming from that app. JS component. We
very very briefly saw and it 's all been injected into that one single Html file inside the public folder. this
is a live reload server meaning if we make a change to our code inside this app component. For example,
if we then save it it's then going to auto refresh. In the browser. the node modules folder is huge in file
size and it contains the react. JS library and many other Javascript. dependencies as well. if you
download a react project like from Github, then this node modules. folder is not present right here when
you download it so if you do download them you have to run NpM install down here in the terminal
before you do anything else. Next up, We 're going to take a look at components including this one right
here..
Full React Tutorial #4 - Dynamic Values in Templates
React will convert the data type that we use to a string before it outputs it to the browser. The only thing
we can't output are boolean values or objects, so for example if I try to create another constant called
person and set it equal to an object. curly braces so for example I could write any kind of JavaScript
statement inside these curly braces that returns a valid value either a string a number or an array.
, Another thing we can do in jsx is use these dynamic values as attribute values in element tags. At the
moment things like this might seem a little bit pointless, but later on when you start to work with
dynamic data, it becomes very very useful for example you might have a list of blog titles from a
database and each blog title must be a link.
Full React Tutorial #5 - Multiple Components
A component is a function that returns a JSX template and is exported at the bottom of the file. In React
applications, components are structured in a way that creates a component tree. To begin, let's create a
navbar component that will sit inside our root app component. The navbar is a template for the navbar,
and we're exporting this function at the bottom. To create a new blog, type /create. Note that currently,
this may not work as we have not set up multiple pages yet. We will work on this later in the course. To
import the navbar component, use import Navbar from './Navbar';. Then, nest it inside the root div like
this: <Navbar /> Instead of the h1 tag, use the Home component by inserting it as a tag like this: <Home
/>. This will display the content on the page.
Full React Tutorial #6 - Adding Styles
React takes all styles and adds them to the head of the webpage. This approach will be taken for this
project. Having separate CSS files for different components is mainly for organizational purposes. Every
element is targeted with an asterisk, and we remove the margin, apply a font family, and set a text color.
For the Navbar, we set the margin of its anchor tags and gave them padding. When hovering over links,
we made those links turn a ready color. Inline styling is done with dynamic values, which consist of an
object with key-value pairs. For the style attribute within the set of curly braces, the JavaScript object is
inserted.
Full React Tutorial #7 - Click Events
In this tutorial, we are going to learn about click events. Click events are when a user clicks on something
and we can react to these events by running some code.We can create a function and assign it to an
element so that it fires when a user clicks on it. When we name a function, we normally use parentheses
and pass in the name, for example yoshi, but if we do this, it will automatically invoke the function right
away.If we want to pass in an argument instead, we have to wrap the function inside an anonymous
function, like we will do with the handle click again function:const handleClickAgain = () => { // code to
handle the click event}The event parameter is automatically passed to the function as the first
parameter when an event occurs. Here is an example:const handleClick = (event) => {
console.log(event);}We can use the event parameter inside our custom function just like any other
parameter.
Full React Tutorial #8 - Using State (useState hook)
In order for this to work, we have to make the value reactive so that when it changes, React detects it
and re-renders the template where we output the value. To do this in React, we use something called a
hook, and that hook is called `useState()`. `useState()` is a function from the React library. The way we do
this is by giving this state an initial value. For example, `Mario`. Now we want to store this in some kind
of value. We use array destructuring to grab two values that this hook returns to us. First of all, the first
value is this initial value. The value can be anything; it can be an array, an object, a number, or a string.
const [name, setName] = useState("Mario"); Set age and we'll set it equal to `useState()` again, and we
React is a Javascript library that we use to create interactive websites and use interfaces. it makes it
really simple to create something called a single page application or an SBa for short now by single page.
the server only ever needs to send a single Html page to the browser for the website to run fully. react
takes over and manages the whole website in the browser, including any kind of website data or user
interactivity, such as click events. you will learn all of the fundamentals of react from using state the
react router how and where to fetch data and how to use react hooks like you state and use effect as
well as creating a custom hook as well.. By the end of this course, you're going to be in a good place to
start making your own react applications now before you do start I. would suggest that you at least know
Html and CSs because we 're going to use this to basically create templates for our different react
components.. if you want to see the code for a specific lesson, you have to select that lesson from the
branch drop down right here. For example, to see lesson 10 code click on this branch, and you 're going
to see all of the code right here. in the next video, we will go ahead and create our first react
application..
Full React Tutorial #2 - Creating a React Application
There 's a few different ways to get started with react, but the easiest way is to use a tool called create
react app.. This is a command line tool which generates a star to react project for us and it comes fully
baked. Then with all of the setup and config that we need like babble and webpack. Now we need those
to compile our react code and Jsx later into production ready Javascript. to do this you need a modern
version of node installed on your computer ideally version 5. 2 or above.. This is the starter project
created by create react app.. This is where all of our project dependencies live. all of our react code is
injected into this one file right here inside this div with an id of root again you probably wo n't come in
here much but if we do n't worry. I 'm going to show you how we edit things later on all right. the source
folder is where most of your code is written all of the different components and the index. JS file is what
kickstarts our app and by the way react. strict mode that means that react does additional checks during
development and it gives us warnings down in the console if there are any warnings to reports all right
so that 's the source folder again we'll come back to all of this later on..
This is the starter project and this right here. This content is coming from that app. JS component. We
very very briefly saw and it 's all been injected into that one single Html file inside the public folder. this
is a live reload server meaning if we make a change to our code inside this app component. For example,
if we then save it it's then going to auto refresh. In the browser. the node modules folder is huge in file
size and it contains the react. JS library and many other Javascript. dependencies as well. if you
download a react project like from Github, then this node modules. folder is not present right here when
you download it so if you do download them you have to run NpM install down here in the terminal
before you do anything else. Next up, We 're going to take a look at components including this one right
here..
Full React Tutorial #4 - Dynamic Values in Templates
React will convert the data type that we use to a string before it outputs it to the browser. The only thing
we can't output are boolean values or objects, so for example if I try to create another constant called
person and set it equal to an object. curly braces so for example I could write any kind of JavaScript
statement inside these curly braces that returns a valid value either a string a number or an array.
, Another thing we can do in jsx is use these dynamic values as attribute values in element tags. At the
moment things like this might seem a little bit pointless, but later on when you start to work with
dynamic data, it becomes very very useful for example you might have a list of blog titles from a
database and each blog title must be a link.
Full React Tutorial #5 - Multiple Components
A component is a function that returns a JSX template and is exported at the bottom of the file. In React
applications, components are structured in a way that creates a component tree. To begin, let's create a
navbar component that will sit inside our root app component. The navbar is a template for the navbar,
and we're exporting this function at the bottom. To create a new blog, type /create. Note that currently,
this may not work as we have not set up multiple pages yet. We will work on this later in the course. To
import the navbar component, use import Navbar from './Navbar';. Then, nest it inside the root div like
this: <Navbar /> Instead of the h1 tag, use the Home component by inserting it as a tag like this: <Home
/>. This will display the content on the page.
Full React Tutorial #6 - Adding Styles
React takes all styles and adds them to the head of the webpage. This approach will be taken for this
project. Having separate CSS files for different components is mainly for organizational purposes. Every
element is targeted with an asterisk, and we remove the margin, apply a font family, and set a text color.
For the Navbar, we set the margin of its anchor tags and gave them padding. When hovering over links,
we made those links turn a ready color. Inline styling is done with dynamic values, which consist of an
object with key-value pairs. For the style attribute within the set of curly braces, the JavaScript object is
inserted.
Full React Tutorial #7 - Click Events
In this tutorial, we are going to learn about click events. Click events are when a user clicks on something
and we can react to these events by running some code.We can create a function and assign it to an
element so that it fires when a user clicks on it. When we name a function, we normally use parentheses
and pass in the name, for example yoshi, but if we do this, it will automatically invoke the function right
away.If we want to pass in an argument instead, we have to wrap the function inside an anonymous
function, like we will do with the handle click again function:const handleClickAgain = () => { // code to
handle the click event}The event parameter is automatically passed to the function as the first
parameter when an event occurs. Here is an example:const handleClick = (event) => {
console.log(event);}We can use the event parameter inside our custom function just like any other
parameter.
Full React Tutorial #8 - Using State (useState hook)
In order for this to work, we have to make the value reactive so that when it changes, React detects it
and re-renders the template where we output the value. To do this in React, we use something called a
hook, and that hook is called `useState()`. `useState()` is a function from the React library. The way we do
this is by giving this state an initial value. For example, `Mario`. Now we want to store this in some kind
of value. We use array destructuring to grab two values that this hook returns to us. First of all, the first
value is this initial value. The value can be anything; it can be an array, an object, a number, or a string.
const [name, setName] = useState("Mario"); Set age and we'll set it equal to `useState()` again, and we
