We will start from beginning to actually building a few applications.You will learn all the logic and practice behind React in different modules, and as we advance through the course we will be increasing the difficulty. Since I believe that the best way to fully learn is by coding, after each section we will put everything in practice with some course projects, and after you have a strong base of React we will journey into REDUX, the most beloved state manager.
Starting with React & Redux: Build modern apps (2nd edition)
30h 13m 51s
English
Paid
To sum everything up, you will learn in this course:
- The very basics of React.How toy install and run it.How to create different types of components.
- Learn the tools React provides, just like State and React Lifecycles to handle you application.
- Work with events and use them in a real life scenario and the importance of props to handle the application
- How to use React Router to navigate through pages and create transition with React Transition Group
- How to do typechecking with React Proptypes
- Learn how to use the Redux cycle properly and handle the information that flows in your entire application
- We will learn the importance of middlewares.
- Much more of course...
About the Author: Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 220 lessons
0:00
/ #1: Welcome !!
All Course Lessons (220)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome !! Demo | 01:48 | |
| 2 | Project overview | 04:05 | |
| 3 | IDE | 01:13 | |
| 4 | Installing NODE and Using a CLI | 11:58 | |
| 5 | The bundle | 05:58 | |
| 6 | Starting with the code | 09:07 | |
| 7 | JSX behind the scenes | 09:10 | |
| 8 | Importing components | 08:26 | |
| 9 | Types of components | 05:31 | |
| 10 | Adding styles | 10:20 | |
| 11 | Events | 11:40 | |
| 12 | The STATE | 15:05 | |
| 13 | Using Props | 10:46 | |
| 14 | Using props 2 | 14:04 | |
| 15 | Props to class | 06:02 | |
| 16 | Childrens | 03:43 | |
| 17 | More with styles | 06:59 | |
| 18 | Styles plugins | 06:35 | |
| 19 | Filtering the news | 15:04 | |
| 20 | Installing routes | 05:38 | |
| 21 | How it works and creating components | 07:21 | |
| 22 | Using routes | 06:28 | |
| 23 | Linking | 10:53 | |
| 24 | Working with params | 06:50 | |
| 25 | Other features from react router | 07:19 | |
| 26 | Switch | 03:51 | |
| 27 | Redirections | 06:55 | |
| 28 | 404 and WITHROUTER | 09:57 | |
| 29 | Getting ready | 11:15 | |
| 30 | Adding header and banner | 15:57 | |
| 31 | Bringing the HOME list | 10:42 | |
| 32 | Creating the artist detailed view | 18:42 | |
| 33 | Component lifecycles | 07:22 | |
| 34 | Component lifecycles 2 | 19:27 | |
| 35 | Conditional rendering | 10:24 | |
| 36 | Pure components | 08:30 | |
| 37 | Adjacent elements | 05:44 | |
| 38 | HOC''s | 08:48 | |
| 39 | HOC''s Continued | 13:37 | |
| 40 | Using transitions | 17:29 | |
| 41 | Using transitions 2 | 08:56 | |
| 42 | Transitions group | 11:51 | |
| 43 | CSS Transitions | 15:44 | |
| 44 | Proptypes | 10:23 | |
| 45 | Proptypes 2 | 08:28 | |
| 46 | Controlled components | 07:59 | |
| 47 | installation and setup | 08:49 | |
| 48 | Routes, Footer and header | 09:30 | |
| 49 | Adding a slider | 20:05 | |
| 50 | Adding subs | 19:36 | |
| 51 | Adding subs...continued | 10:08 | |
| 52 | Home blocks | 13:26 | |
| 53 | Adding a poll | 14:59 | |
| 54 | Finishing the poll | 06:13 | |
| 55 | Adding the teams section | 14:43 | |
| 56 | Finishing the teams section | 08:55 | |
| 57 | Creating the team view | 13:27 | |
| 58 | Redux introduction | 08:37 | |
| 59 | Creating a Store | 07:54 | |
| 60 | The redux flow | 05:56 | |
| 61 | Combining reducers | 06:35 | |
| 62 | Creating a valid reducer | 07:32 | |
| 63 | Creating an action | 04:44 | |
| 64 | MapStateToProps and connect | 12:44 | |
| 65 | MapDispatchToProps | 05:48 | |
| 66 | Types | 07:58 | |
| 67 | Using middleware | 07:45 | |
| 68 | Installations | 06:59 | |
| 69 | Adding Redux | 14:10 | |
| 70 | Getting home data | 16:46 | |
| 71 | Latest news component | 07:06 | |
| 72 | Other news section | 08:57 | |
| 73 | Articles page | 16:06 | |
| 74 | Adding likes component | 12:33 | |
| 75 | Finishing the likes | 08:59 | |
| 76 | Clearing data | 04:46 | |
| 77 | Introduction to hooks | 01:50 | |
| 78 | UseState | 13:54 | |
| 79 | UseState 2 | 13:51 | |
| 80 | UseEffect | 16:43 | |
| 81 | UseReducer | 12:28 | |
| 82 | Preparing the app for the context | 10:00 | |
| 83 | Context and UseContext | 15:30 | |
| 84 | Introduction | 01:37 | |
| 85 | Windows Users: Installing Node JS | 08:04 | |
| 86 | Mac Users: Install Node JS | 01:54 | |
| 87 | Runing the Boilerplate: Create React App | 05:01 | |
| 88 | Bundle | 03:08 | |
| 89 | Getting Started | 03:24 | |
| 90 | Imports and render | 05:46 | |
| 91 | Project structure | 03:42 | |
| 92 | Exporting components | 07:08 | |
| 93 | Type of components | 06:25 | |
| 94 | Adding some Style | 08:16 | |
| 95 | Synthetic Events | 09:21 | |
| 96 | ES6 Constructor | 08:18 | |
| 97 | Using React State | 04:07 | |
| 98 | Changing State | 04:33 | |
| 99 | Changing State 2 | 04:57 | |
| 100 | Working with Props | 05:50 | |
| 101 | Working with Props 2 | 05:33 | |
| 102 | Working with Props 3 | 07:48 | |
| 103 | Working with Props 4 | 07:54 | |
| 104 | Filter the news | 07:52 | |
| 105 | Filter the news 2 | 06:49 | |
| 106 | Conclusions | 02:17 | |
| 107 | Introduction to React Router | 04:17 | |
| 108 | Router Process | 02:40 | |
| 109 | Setting up Routes | 07:05 | |
| 110 | Using Routes | 06:20 | |
| 111 | Linking | 03:50 | |
| 112 | Params | 08:20 | |
| 113 | More on React Router | 09:18 | |
| 114 | Setup and installation | 05:48 | |
| 115 | Creating the Routes | 07:26 | |
| 116 | Adding a banner | 12:23 | |
| 117 | Fetching the list | 10:09 | |
| 118 | Showing the list | 10:52 | |
| 119 | Styling the list | 03:57 | |
| 120 | Creating the detail | 10:48 | |
| 121 | Showing the bio | 05:45 | |
| 122 | Styling the bio | 05:11 | |
| 123 | Album List | 10:37 | |
| 124 | Component Lifecycles | 09:16 | |
| 125 | Component Lifecycles 2 | 06:58 | |
| 126 | Component Lifecycles 3 | 04:07 | |
| 127 | Transitions | 04:23 | |
| 128 | Transition enter | 07:51 | |
| 129 | Transition leave and appear | 06:44 | |
| 130 | Transition from variables | 06:53 | |
| 131 | Transition imports | 09:24 | |
| 132 | Proptypes intro | 02:43 | |
| 133 | Using Proptypes | 06:30 | |
| 134 | More on Proptypes | 09:27 | |
| 135 | Using Refs | 05:27 | |
| 136 | Controlled Components | 06:15 | |
| 137 | Uncontrolled Component | 05:11 | |
| 138 | INTRO | 03:51 | |
| 139 | Installation | 06:56 | |
| 140 | Setting up Routes | 07:58 | |
| 141 | Adding header and footer | 03:17 | |
| 142 | Styling header and footer | 09:23 | |
| 143 | Slider | 09:14 | |
| 144 | Slider 2 | 09:58 | |
| 145 | Slider styles | 04:36 | |
| 146 | Subscribe component | 13:58 | |
| 147 | Saving subscribers | 05:53 | |
| 148 | Handling errors | 12:21 | |
| 149 | Styling subscribers | 04:10 | |
| 150 | Home blocks | 10:35 | |
| 151 | Showing the blocks | 04:55 | |
| 152 | Styling the blocks | 12:45 | |
| 153 | Creating the poll | 12:13 | |
| 154 | Creating the poll 2 | 08:32 | |
| 155 | Adding Hits | 06:54 | |
| 156 | Styling the poll | 03:59 | |
| 157 | Getting the Teams | 11:12 | |
| 158 | Adding effects to the teams | 08:14 | |
| 159 | Filtering teams | 12:58 | |
| 160 | Styling teams | 05:38 | |
| 161 | Rendering team details | 10:54 | |
| 162 | Rendering team details 2 | 04:47 | |
| 163 | Styling the detail | 08:50 | |
| 164 | Intro to Redux | 02:45 | |
| 165 | Connecting Redux | 08:39 | |
| 166 | Action creators and Reducers | 04:13 | |
| 167 | Reducers | 05:25 | |
| 168 | Reducers 2 | 08:16 | |
| 169 | Action creators | 04:59 | |
| 170 | Connecting | 13:54 | |
| 171 | Containers | 04:31 | |
| 172 | Setting up | 05:58 | |
| 173 | Creating components | 13:19 | |
| 174 | Creating search | 06:04 | |
| 175 | Setting up Redux | 05:20 | |
| 176 | Binding actions | 11:26 | |
| 177 | Requests and Middleware | 10:37 | |
| 178 | Redux promise | 04:58 | |
| 179 | Adding the reducer | 02:48 | |
| 180 | Showing results | 11:43 | |
| 181 | Creating the list | 08:32 | |
| 182 | Creating the detail | 09:23 | |
| 183 | Adding reducers | 07:28 | |
| 184 | Fixing state | 05:41 | |
| 185 | Fixing state 2 | 03:20 | |
| 186 | Car detail view | 08:40 | |
| 187 | Clearing state | 06:00 | |
| 188 | Installing | 05:33 | |
| 189 | Setting up redux | 04:38 | |
| 190 | Setting up routes | 03:54 | |
| 191 | Header and Footer | 03:56 | |
| 192 | Header and Footer Styles | 06:10 | |
| 193 | Home - Latest News | 09:45 | |
| 194 | Home - Latest news - Store Data | 10:47 | |
| 195 | Home - Latest News - JSX | 06:43 | |
| 196 | Home -Latest News - Style | 06:03 | |
| 197 | Home - Fetching other news | 09:06 | |
| 198 | Home - Rendering other news | 08:02 | |
| 199 | Home - Styling other news | 10:22 | |
| 200 | Home - Fetching Gallery | 09:07 | |
| 201 | Home - Render Gallery JSX | 08:58 | |
| 202 | Home - Styling Gallery | 04:09 | |
| 203 | News - Fetching article | 14:47 | |
| 204 | News - Render Article JSX | 07:58 | |
| 205 | News - Styling article | 06:48 | |
| 206 | Gallery - Fetching data | 10:17 | |
| 207 | Gallery - Render JSX | 11:00 | |
| 208 | Gallery - Adding styles | 04:04 | |
| 209 | Likes & Dislikes widget | 09:44 | |
| 210 | Likes & Dislikes widget 2 | 05:28 | |
| 211 | Likes & Dislikes widget 3 | 10:12 | |
| 212 | Likes & Dislikes widget 4 | 02:35 | |
| 213 | Likes & Dislikes - Styles | 05:33 | |
| 214 | Using and Index for types - convention | 10:04 | |
| 215 | Intro and setup | 08:08 | |
| 216 | Adding form elements | 06:53 | |
| 217 | Validation | 08:13 | |
| 218 | Validation 2 | 05:30 | |
| 219 | Submitting Form | 08:46 | |
| 220 | Form on success | 06:53 |
Unlock unlimited learning
Get instant access to all 219 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 1y agoReact Simplified - Bonus Project
By: Web Dev Simplified (Kyle Cook)What if I told you that by the end of this course, you could independently build an advanced job board project ?5h 8m -
Updated 2y agoComplete React Developer in 2023 (w/ Redux, Hooks, GraphQL)
By: Udemy, Zero To MasteryBecome a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.39h 24m -
Updated 2y agoThe essential guide to Firebase with React.
By: UdemyCreate modern app using modern technologies. Do you want to create web applications with Firebase and React ?. This is the course for you.31h 20m
Frequently asked questions
What prerequisites should I have before taking this course?
Before enrolling in this course, it is beneficial to have a basic understanding of JavaScript, as the course covers React and Redux, which are JavaScript libraries and frameworks. Familiarity with web development fundamentals like HTML and CSS will also be helpful since the course involves building applications with these technologies.
What projects will I build during the course?
Throughout the course, you will engage in several practical projects that involve building applications from scratch. Early lessons focus on setting up an environment, using JSX, and managing state and props. As you progress, you'll work on projects like filtering news, creating artist detailed views, and implementing features like transitions and polls. These projects are designed to reinforce the concepts taught in each module.
Who is the intended audience for this course?
This course is designed for individuals who want to learn how to build modern web applications using React and Redux. It is suitable for both beginners who are new to React and developers who have some experience with JavaScript and want to deepen their understanding of state management and component-based architecture.
How does this course compare in depth and scope to other React courses?
This course offers a comprehensive approach by starting with the basics of React and gradually introducing more complex topics like Redux for state management. With 220 lessons, it covers a wide range of topics, from setting up the development environment to advanced concepts like higher-order components and CSS transitions, providing a thorough understanding of both React and Redux.
What specific tools and platforms will I learn to use in this course?
The course includes lessons on using various tools and platforms essential for React development. You will learn to install Node.js and use a command line interface (CLI) for managing your development environment. Additionally, the course covers integrating a code editor (IDE) and utilizing plugins for styling components effectively.
What topics are not covered in this course?
While the course covers a wide range of React and Redux topics, it does not delve into backend development or server-side rendering. The focus is on the frontend aspects of application development, specifically using React for building user interfaces and Redux for managing application state.
How much time should I expect to commit to this course?
The course consists of 220 lessons and is designed to be thorough, progressing from basic to more advanced concepts. The actual time commitment will depend on your prior experience and the pace at which you wish to work through the material. It is recommended to set aside consistent, focused study time each week to fully engage with the lessons and projects.