0:00 Overview of this tutorial 2:10 Create react app w/ typescript template 2:48 Delete redundant files 4:01 Components 6:04 Install & import bootstrap theme from Bootswatch 6:47 Install React Bootstrap 7:03 Header.tsx (Navbar) 9:50 Footer.tsx 12:22 Screens 13:25 Install react-router-dom & set up routing 16:10 Login page 17:20 FormContainer.tsx 19:15 Typescript for children props 22:14 Signup page 23:49 Create states in components using the useState hook 24:40 Input field onChange to set values of states 26:30 Handle form submission in signup page 29:58 Fetch from api/register in the signup page 31:24 History object & typescript 32:20 Testing signup 34:06 Handle form submission in login page 34:44 credentials: 'include' 37:10 useEffect in App.tsx 37:53 Fetch from api/user to get user information 38:41 Set firstName state using retrieved value from the backend 39:50 Pass firstName to HomeScreen 40:27 Dynamically render user's first name on home page 40:58 Run the application 41:44 Resolving issue with delayed state 42:17 Displaying Logout link in the Navbar dynamically 43:43 Handle user logout 45:46 Pass setFirstName function down to Header.tsx 47:49 Recap
Hi thanks for great tutorial, could you please tell that how you set up your VS code environment as I can see you are not using semicolons in TS. thanks Ahmed W.
Hey Ahmed, JS/TS doesn't require semicolon by default as you might be aware, and I didn't have to setup anything for the vscode. I am using an extension called 'Prettier' though, which helps format my code.
Hi For my case, when I try to redirect to new page after sign up : history.push('/dash') It is changing the url and shows the loading screen but the page is not loading, It loads if I just refresh the page. Can you please help me with this issue.
I did a little search and this is what I found: stackoverflow.com/questions/42941708/react-history-push-is-updating-url-but-not-navigating-to-it-in-browser There could be many reasons why that is happening, but my suggestion would be to check how your BrowserRouter is set up in your app.tsx!
0:00 Overview of this tutorial
2:10 Create react app w/ typescript template
2:48 Delete redundant files
4:01 Components
6:04 Install & import bootstrap theme from Bootswatch
6:47 Install React Bootstrap
7:03 Header.tsx (Navbar)
9:50 Footer.tsx
12:22 Screens
13:25 Install react-router-dom & set up routing
16:10 Login page
17:20 FormContainer.tsx
19:15 Typescript for children props
22:14 Signup page
23:49 Create states in components using the useState hook
24:40 Input field onChange to set values of states
26:30 Handle form submission in signup page
29:58 Fetch from api/register in the signup page
31:24 History object & typescript
32:20 Testing signup
34:06 Handle form submission in login page
34:44 credentials: 'include'
37:10 useEffect in App.tsx
37:53 Fetch from api/user to get user information
38:41 Set firstName state using retrieved value from the backend
39:50 Pass firstName to HomeScreen
40:27 Dynamically render user's first name on home page
40:58 Run the application
41:44 Resolving issue with delayed state
42:17 Displaying Logout link in the Navbar dynamically
43:43 Handle user logout
45:46 Pass setFirstName function down to Header.tsx
47:49 Recap
The best video ever! thank you very much!!
Appreciate it!
@ 49:17 react-router changed its objects to
You also need to wrap all your route paths in a
Very Good Video . Finally i learned Login
Thank you, really great and detailed explaination
Can you have create tutorial Golang backend for beginner
Thaank youuuuu
Hi thanks for great tutorial, could you please tell that how you set up your VS code environment as I can see you are not using semicolons in TS.
thanks
Ahmed W.
Hey Ahmed, JS/TS doesn't require semicolon by default as you might be aware, and I didn't have to setup anything for the vscode. I am using an extension called 'Prettier' though, which helps format my code.
Hi
For my case, when I try to redirect to new page after sign up : history.push('/dash')
It is changing the url and shows the loading screen but the page is not loading, It loads if I just refresh the page. Can you please help me with this issue.
I did a little search and this is what I found: stackoverflow.com/questions/42941708/react-history-push-is-updating-url-but-not-navigating-to-it-in-browser
There could be many reasons why that is happening, but my suggestion would be to check how your BrowserRouter is set up in your app.tsx!
@@dhij Hi
Thanks for your reply. I found that was happening for a js file. It works fines for others.
Thank you
FYI: I need course typescript and oop)