Hi, I'm jser.
One thing I love about React is its simplicity on mental model - we can just pretend that React re-renders everything on every state change.
But of course React itself is far from simple, React team is doing a great job in hiding the complexity for most use cases, yet people like me still get confused time to time.
I think this results from the huge gap between knowing how to work with React and knowing how React works.
And I'm creating this course to fill the gap.
There are already quite a few React courses out there, I know.
DDIR(Deeper Dive Into React) is not a course that teaches you how to use React since that is already covered by React.dev, rather it is an interactive journey to help you understand React internals by diving deeper.
With this course, you will have a much deeper understanding of React, by understanding the caveats, the trade-offs, and the design decisions behind React, I believe you will be able to write better React code.
Good question! Maybe not.
I'm not gonna trick you into this course because honestly it contains quite advanced topics and might not be suitable for everyone. It also requires effort to complete.
Give it a try at following random React quiz to see if you would like to know why. If you want to know and are determined to learn, then this course might be good for you.
function A() {console.log(2);return null;}function App() {const [_state, setState] = useState(false);console.log(1);return (<><buttononClick={() => {console.log("click");setState(true);}}data-testid="action">click me</button><A /></>);}const root = createRoot(document.getElementById("root"));root.render(<App />);(async function () {const action = await screen.findByTestId("action");fireEvent.click(action);await wait(100);fireEvent.click(action);await wait(100);fireEvent.click(action);click the button 3 times})();
function A() {console.log(2);return null;}function App() {const [_state, setState] = useState(false);console.log(1);return (<><buttononClick={() => {console.log("click");setState(true);}}data-testid="action">click me</button><A /></>);}const root = createRoot(document.getElementById("root"));root.render(<App />);(async function () {const action = await screen.findByTestId("action");fireEvent.click(action);await wait(100);fireEvent.click(action);await wait(100);fireEvent.click(action);click the button 3 times})();
click on the console.log lines to input your answer.
In this course you'll find lots of demos, videos, coding challenges and tools that make the learning process fun and engaging.
Below is a sneak peak of the curriculum, check out the available modules to get a better idea.
I'm still working on them, but you can sign up to get notified when it's ready.
Would you like to share this course with your friends? 😳