Free Udemy Courses

React Web Development || Become a React Developer

PUBLISHER :- Abd Alwahab

LANGUAGE :- English

PRIZE :- 16.33$ 0$

React Web Development || Become a React Developer


  • Anyone Who Wants to Learn React
  • Web Designers
  • Angular Developers


  • Basics JavaScript
  • HTML / CSS


  • Learn React
  • Build Web Applications With React
  • Learn Redux
  • Learn Hooks
  • Utilize Node REST API using React


Hi && welcome to the React Web Development, the course that will take you from a beginner react developer all the way to become an advanced react developer. in this course we are going to learn react by building real world applications and its completely a project base so there is no time wasted on unnecessary content,

what we are going to learn:-


in the first section we are going to spend some time learning about the es6 or the next generation of javascript because its will be the main tool that we are going to use in react.


in the second section  we are going to learn about react it self and this include basic react topics things like rendering list and conditional rendering and learn about component and props and jsx and pass data between components and so much more

02-react router

in this section we are going to learn about react router in deeps and understand how to create different pages and also how to deal with the url of the browser and display content depend on the urls and so much more.

03-react forms

in this section we are going to learn about forms, this section has two different part, the first one will be about basic forms in react and how can forms effect other parts of the website, the second parts will be about advanced forms things like fields, custom validation and more.

03-consuming APIs

in this section we are going to master the idea of deal and consuming APIs in react, we are going to build 3 applications that covers only the APIs which is one of the most important skill that you should have as react developer.

if( you !== happy) {

you will get a refund;

} else {

you will master react and get hired today;



  • 14 sections • 236 lectures • 24h 38m total length

4 lectures • 21minIntroduction

  • What Make This Course Unique?Preview00:58
  • What and Why React?Preview08:41
  • How and Where React?04:15
  • What Should I Learn (important) ?06:55

20 lectures • 2hr 12minEs6 Guide

  • IntroPreview01:23
  • install create react app09:07
  • generate our first project02:46
  • general overview on the project11:15
  • let and const09:32
  • arrow function06:36
  • import and export part 108:22
  • import and export part 205:22
  • render content in the web browser07:02
  • array methods map08:46
  • array methods filter07:09
  • array methods find02:46
  • objects in es611:24
  • arrays and objects in one example07:58
  • template literals05:17
  • the ternary operator04:44
  • task to finish10:35
  • spread in ES605:13
  • rest in ES606:26
  • Next Steps After ES600:13

17 lectures • 1hr 37minRender List With React

  • 00-what we are going to build and create our proejct03:04
  • 01-delete no need files04:47
  • 02-create the data that we want to show10:57
  • Note About The Data That we Created00:19
  • 03-create the main files for the app07:22
  • 04-reander content to the user05:11
  • 05-what extensions do I use05:00
  • 06-our first component03:48
  • 07-use our data that we create04:45
  • 08-redner jsx in the web browser05:02
  • 09-write some css code05:58
  • 10-add the courseItem component05:12
  • 11-uses props to pass data07:00
  • 12-show data and style the courseItem10:19
  • 13-add UX to the app04:36
  • 14-conditional rendering in react09:04
  • 15-final touchs and the next steps04:20

19 lectures • 2hr 12minReact Router in Real World Example

  • 00-what we are going to build03:32
  • 01-add the needed markup10:57
  • 02-style the markup the we added12:30
  • 03-steps to follow when using react router04:51
  • 04-define some routes09:05
  • 05-the switch component10:01
  • 06-more about the exact06:41
  • 07-replace any a with a NavLink07:46
  • 08-different between Link and NavLink04:44
  • 09-control the url with the to04:50
  • 10-make the title as a Link06:45
  • 11-create the CourseDetaild component04:26
  • 12-pass paramters to the urls with react router05:10
  • 13-fetch the right course using thr id05:43
  • 14-add the html for the course details06:59
  • 15-style the course details04:48
  • 16-style the course details part 208:56
  • 17-style the course details part 311:55
  • 18-real examples about the react router02:30

20 lectures • 2hr 11minReact Forms Part 1

  • 00-what we are going to build05:57
  • 01-intro to the state mamgment tools06:51
  • 02-our first class base component05:27
  • 03-the constructor function and the state08:18
  • 04-review our code03:28
  • 05-add the input markup08:53
  • 06-get the value from the input07:27
  • 07-control input and uncontroled input07:59
  • 08-filter courses08:01
  • 09-other way for filter with react07:19
  • 10-get the code back03:36
  • 11-conditional rending in react10:38
  • 12-sort courses demo02:09
  • 13-add the select input07:05
  • 14-get the value from the select input08:22
  • 15-sort function07:31
  • 16-more about lodash03:39
  • 17-style the select input05:19
  • 18-refactor our code part 106:04
  • 19-refactor our code part 207:02

19 lectures • 1hr 32minReact Forms Part 2

  • 00-what we are going to build04:53
  • 01-why you should a package for form creation in react07:06
  • 02-what packages can I use05:26
  • 03-create the sign and the login component02:20
  • 04-our first step in formik09:27
  • 05-the Formik Component03:13
  • 06-the signup function03:06
  • 07-render input to the user09:49
  • 08-get the vlaues from the form05:01
  • 09-basic style to our form08:07
  • 10-review to formik code03:57
  • 11-start with Login02:16
  • 12-create a validation schema04:09
  • 13-the Formik Component02:57
  • 14-render Field from Formik05:08
  • 15-errors from Formik02:51
  • 16-custom error with touched02:25
  • 17-style our Login Form04:37
  • 18-get the login values from the ofrm05:14

4 lectures • 18minAPIs in Theory

  • 00-API in Theroy intro03:52
  • 01-what dose Enpoint and API key mean05:11
  • 02-types of request in APIs03:20
  • 03-what do we need to make a request05:30

13 lectures • 1hr 14minLet’s Build an API Project

  • 00-what we are going to build02:39
  • 01-think about our component04:33
  • 02-fill out the two components that we created06:46
  • 03-APIs in Action08:16
  • 04- the componentDidMount mdthod07:51
  • 05-making our first request06:49
  • 06-show the data that we got back06:23
  • 07-store the data in the state05:14
  • 08-render a PhotoItem component05:35
  • 09-add the markup the we need02:34
  • 10-show real info in the markup06:13
  • 11-style the application06:16
  • 12-let us read some important tips04:48

29 lectures • 2hr 42minIntermediate APIs Project

  • 00-what we are going to build02:48
  • 01-create our project01:09
  • 02-get everything ready02:39
  • 03-create our first two component04:17
  • 04-add the componentDidMount method04:23
  • 05-ready the unsplash api05:10
  • 06-get the data from the api08:19
  • 07-render PhotoItem component07:02
  • 08-add the needed markup06:26
  • 09-show real info on the screen06:48
  • 10-define our routes07:05
  • 11-turn the username to a link03:56
  • 12-get the username from the url06:37
  • 13-get the userinfo from the api05:06
  • 14-refactor the api calling09:44
  • 15-add the markup for the userinfo component07:36
  • 16-show user info part 105:24
  • show user info part 205:33
  • show user info part 305:25
  • show user info part 405:47
  • 20-style the userinfo component08:39
  • 21-add the photoForm component04:09
  • 22-add our select input to the form04:33
  • 23-sort photos array05:24
  • 24-sort photos using our select input04:33
  • 25-quick code review06:00
  • 26-style our photos component05:26
  • 27-add more style06:58
  • 28-finish the application04:34

21 lectures • 2hr 13minAdvanced API Project || Build Authentication System

  • 00-intro and what we are going to build06:10
  • 01-a deeper look on the code04:57
  • 02-what is a baseURL and what I can do with it?05:19
  • 03-make our first post request07:35
  • 04-what info should I send to the API?06:46
  • 05-send the user to the api07:24
  • 06-final touches and async and await04:24
  • 07-finish the login03:50
  • 08-setup mongoDB in the cloud15:49
  • 09-connect the API to Our React App04:57
  • 10-SignUp a User05:29
  • 11-Login a User01:42
  • 12-fix the cors error07:11
  • 13-works with json web token07:40
  • 14-what we can do with json web token?08:01
  • 15-Display the name of the user07:09
  • 16-fix some erros05:21
  • 17-add some conditional rendring02:40
  • 18-add the logout route05:31
  • 19-finish the logout component10:03
  • 20-next steps in this course04:41

37 lectures • 3hr 56minRedux With React

  • 00-what we are going to build04:24
  • 01-why to use redux05:47
  • 02-intro to store-action-reducers06:00
  • 03-how redux works10:18
  • 04-imporant note about reducers04:48
  • 05-create our project01:59
  • 06-install the need pakcges05:00
  • 07-setup the actions and the reducers03:51
  • 08-setup the store04:14
  • 09-create the first reducers04:23
  • 10-create the init state05:59
  • 11-combine our reducers03:25
  • 12-connect react component to redux10:17
  • 13-access the data in our store03:50
  • 14-render the list of courses05:52
  • 15-add the courseform component06:05
  • 16-create our searchCourses action07:57
  • 17-get the actions from redux08:44
  • 18-get our actions to work with the reducers08:12
  • 19-filter our courses05:13
  • 20-create the navbar10:38
  • 21-finish the navbar04:34
  • 22-create the savedList reducers05:18
  • 23-create the saved actions05:12
  • 24-fire the addItem action05:56
  • 25-add the item to the savedList06:42
  • 26-render the saved array items09:32
  • 27-style the SaveItem component08:47
  • 28-fire the removeItem action03:16
  • 29-remove item from saved07:29
  • 30-the saved counter05:12
  • 31-add the icon insted of text07:22
  • 32-conditional rendering with actions07:45
  • 33-show the detalis for any courses part 106:06
  • 34-show the detalis for any courses part 210:32
  • 35-conditional rendering with redux agian07:16
  • 36-final touches on the app07:59

11 lectures • 1hr 14minAdvanced Redux With React

  • 00-what we are going to build and create the project01:58
  • 01-setup redux03:52
  • 02-create our reducer04:52
  • 03-connect a react component to redux06:53
  • 04-setup the api10:01
  • 05-create the fetch data action08:38
  • 06-calling the action06:16
  • 07-using redux thunk11:56
  • 08-modify our reducer03:41
  • 09-show the imgaes on the screen09:37
  • 10-final talk about redux06:03

19 lectures • 2hr 37minReact Testing

  • 00-intro to testing09:05
  • 01-install and setup some tools10:43
  • 02-create our test files09:21
  • 03-prpear our test files10:15
  • 04-write our first test13:13
  • 05-test complex jsx code11:44
  • 06-advanced snapshot testing11:02
  • 07-more about advanced snapshot10:46
  • 08-test react router12:17
  • 09-test the navbar and best practies08:35
  • 10-intro tp test stateful component05:38
  • 11-get the component state in testing04:52
  • 12-test components functions06:51
  • 13-another example about testing functions03:51
  • 14-snapshot testing with stateful component02:50
  • 15-redux-react testing06:30
  • 16-get the component ready to test07:42
  • 17-test the react-redux component06:53
  • 18-finish the react-redux testing05:10

3 lectures • 21min11-Better Code Writer

  • 00-install eslint and setup it08:11
  • 01-use eslint in our project05:23
  • 02-a note about async/await07:25


Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also
  • Deno
Back to top button

Adblock Detected

Please consider supporting us by disabling your ad blocker