
Break a complex subject into small lessons to help you learn quickly and save time, with every lesson followed by a quiz to track progress and build confidence.
explore the importance of components in React user interfaces, showing how main menu, side menu, and page components divide a page into reusable elements that simplify development and reduce bugs.
Learn React from an instructor with more than 20 years of software development experience in high-tech companies, freelancing, startups, and extensive teaching.
Master the React concept and build a single page application by completing sections, lessons, quizzes, exercises, and a final project to reinforce learning.
Pass text as props to a greeting component to render dynamic messages, reuse one component with different text values using a text key and curly braces.
Create a React example using a person component to render multiple people by passing name and age, styling with className and basic CSS like padding, border, and shadow.
Finish this section by learning what a component is, how to create it, and use props; explore next generation javascript used in the next section; note next action is optional.
Explore the rest operator in JavaScript, using three dots to collect function arguments into an array. Compare rest with spread to understand their distinct roles.
Set up React projects, learn JSX, create class-based components, and manage props, events, and state to distinguish stateless and stateful components.
Learn how to pass a function as a prop from a parent to a child component in React, and trigger it from a button click to execute a handler.
Discover two debugging tools for a React application: COM dev tools to inspect and debug JavaScript state and props, and another tool called yakked death tools for additional debugging.
Learn styling in React by mastering component-based approaches and exploring dynamic styling techniques to apply scalable, effective styles in your apps.
This lesson relates to react-scripts versions which are 2.0.0 and above
react-scripts version appears in package.json
This lesson relates to react-scripts versions which are before 2.0.0
react-scripts version appears in package.json
Learn React in a better way demonstrates rendering a list and removing an item by index using splice, updating state to keep the data and the view in sync.
Learn how to render lists in React by giving each item a unique key derived from its id. This prevents warnings and supports correct state updates when removing items.
Explore mounting as the first-time creation of a component, and see how the constructor and props fit into the component lifecycle.
Learners discover how to pass information through the router using location.search as a query string, supply two arguments, and consume them to reflect changes in the page.
Explore routing to non-existent paths, such as child 3, and learn how a not found component and not found page handle undefined routes with styling.
Learn the third way to pass props via router render. See how the name prop updates child 5 using a render, demonstrating props as you’re used to.
Learn React by building three projects—tic tac toe game, a generic and easy to use foam, and authentication—so you master concepts and solve challenges on your own.
Build a tic tac toe game in React, with a playable board, animation, placing X and O, detecting wins, and restarting games; emphasizes component structure and correct functionality over styling.
Finish the project by integrating learned concepts to build self-made apps and create a single-page application, from tic tac toe to authentication, using your phone as needed.
You’re here because you know HTML\CSS\JavaScript and you want to move forward to popular and advanced technology. You’re here because you are react BEGINNER and you have a mission : you want to learn React from scratch in a better way : step by step so you will master its main concepts and build Single Page Applications using React
I am here because i can help you accomplish your mission. I have B.s.c + M.s.c in mechanical engineering . I have been doing software applications for more than 20 years in the Hi - Tec industry and i have a lot of teaching experience. You can trust me and my teaching methods . I had learned many many technologies in the past (check my LinkedIn profile) and i know exactly what is needed to learn and how.
Check what students say about my course :
"This was one of the best courses I have ever taken. The pace and explanations were incredibly easy to follow. Everything important about React was covered and Nathan explained every little detail so well that anyone can understand it and gain a good understanding. I have learned a lot from this course, and I hope that Nathan will add others in the future."
"I love it so far I will drop a review midway through :) from my experience coming from a developer bootcamp this way of learning is much more natural and effective! To be honest, I took two other react courses both of them lecture style, and I don't feel like I got enough from the time I put in, they were both about 30 hours long with sparse assignments I felt like a zombie just typing along. I feel like I'm learning a lot! Most importantly I feel like my retention level and understanding are finally getting somewhere and I can actually apply the things I learn."
"Nathan describes very very well, i got many javascript courses at Udemy, but Nathan explaines better them others."
In this 4.5 hours course i teach React in a better way then other courses :
- Every complicated concept is broken to few small EASY to grasp concepts
- Every lesson is FOCUSED on one subject only
- Lesson are SHORT, typically less than five minutes, so you can stay focused throughout it
- You have FEEDBACK after every lesson via the Quiz \ Exercise
- You will feel PROGRESS after every lesson via your correct solution of Quiz \ Exercise
- I do not believe in one project which last the whole course , because in my vast experience its much better to learn using small isolated samples . In this way you learn and master CONCEPTS which will allow you to do many projects , not just one that the lecturer did. Also small isolated code samples are better when you come back to the course to clarify specific concept (try to do this with one big project which last the whole course ...)
- Overall you will SAVE TIME in this course compare to other courses
The course cover the following concepts :
Component (stateless \ stateful)
Next generation JavaScript
React project setup
JSX
State
Props
Events
Debugging
Unidirectional data flow
Styling
Rendering list and using keys
Component Life Cycle 16.3
Routing using react-router
Single Page Application