
Set up a React project from scratch by creating boilerplate code with Emmet, loading the React, dom, and babel libraries via script tags, and rendering jsx into a dom root.
Learn how babel interprets and transpiles ES6 and JSX into plain JavaScript for React, enabling browser compatibility and seamless rendering with React DOM.
Practice building stateless functional components by creating seven color components that render each color in an h1 tag, reinforcing React concepts, muscle memory, and component composition.
Learn how to create class components in React with ES6 classes, including syntax, extends React.Component, the render method, and rendering shapes such as circle, square, and rectangle.
Learn to create complex components by composing stateless functional and class components, building a color spectrum and shapes example that renders a single complex component in React.
Create stateless functional components to build a friendly component with an avatar, username, and get connected component, using placeholder divs for icons.
Learn how to access and modify object properties in JavaScript using dot notation and bracket notation, handle invalid variable names, and understand when to quote property names.
Refactor the color spectrum into a single props-driven color component, consolidating seven components and demonstrating a dry, reusable approach with color and name props, rendering to the dom.
Practice with props across stateless functional and class components by rendering name, age, and a profile image via props using Reactdom.render to pass values.
Practice passing props from parents to children in stateless functional components by wiring first name, last name, and profile through a full name component and validating prop reception.
Leverage props to render multiple friendly cards in a React app by passing name and avatar url from parent to child, and adjust styling for spacing and centering.
Discover functional programming in JavaScript, focusing on pure functions and higher-order functions, and learn to replace loops with the filter method for weather data.
Learn how the map method in JavaScript transforms every array element by applying a callback, a higher-order function, and by contrasting it with filter, for loops, and pure functions.
Explore the map higher order function, transforming arrays via chained map calls to double numbers, add one, and convert greetings to uppercase, then apply shift to trim the array.
Transform a JavaScript array into JSX using map to render a dynamic React list, and apply unique keys (id) to each item for efficient updates.
Refactor the component to render the siblings array by applying the map method directly in the return statement, transforming items into JSX without predeclared variables, and verifying zero warnings.
Filter the siblings array to include only females, then map to render each female's name to the DOM using a class component approach.
Welcome to Hello React. This is aimed towards those who are new to JavaScript development and while you may not have mastered JavaScript you want to learn more about using the React library. React has a steep learning curve for new developers. If you have found yourself quickly overwhelmed by the React Docs or other React tutorials then this is the course for you. This isn't the only React course you should take but it should be your first.
If you are an experienced developer. This course is too easy for you. Please don't take it. This course is for people who are new to programming. This isn't for experienced coders changing from one coding language to another or for experienced JavaScript developers looking to pick up a new framework.
Here is what I will provide for you:
A React course you can actually finish. A React course you can actually understand. A React course that moves step by step with no steps skipped.
Reviews. Lot's of reviews.
Challenges. Lot's of challenges.
Mini-projects. Lot's of mini-projects.
This course assumes a light knowledge of HTML, CSS and JavaScript. However, if you have been using any of those technologies for at least a couple months you will be in good shape for this course.
To steal the words from Zoolander. This is a React course for "those who don't code good."
Here is why this course stands out:
This will be the slowest moving React course you will find.
This will focus on the basic fundamentals that could be of great help in future React courses you might take or understanding the React Docs.
This is not a "zero to hero" course. Those don't really work. This is a "zero to 20mph" kind of course.
I will take for granted as little as possible in teaching sections and reinforcing what we have learned.
This isn't a code along course alone. Through lots of challenges and repetition you will be able to take everything we learn and build with it. You won't wide up with an elaborate project for your portfolio that you don't understand.
I will filter through and synthesize large and complex React concepts and break them down to a practical beginner level.
We will build slow, but you will understand what we are doing.
We aren't going to build one big app but many smaller applications where you learn key concepts.
Repetition, Repetition, Repetition. We will repeat things a lot.
My first attempt to learn React was when I had been coding for just about six months. I bought several books and paid for several online subscriptions but those resources quickly reached a level that I found myself just typing in the code I was seeing without any comprehension in regards to what was going on or how I could replicate this myself.
Even the docs went over my head and so did many of the use cases. I spent hours and hours trying to sort through material that would allow me to get a hold of concepts at my level. I couldn't, so I gave up.
I want to spare you the hours and hours of research you might invest only to hit constant dead ends and have material presented to you with too much assumed knowledge.
That's why I created this course for you!
It's time to say "Hello World" in React!