State is the data a component maintains. Props are immutable so state is a way to change data.You can pass state to another child component through props. Events in react are written in camel case and are passed functions inside curly brackets.

<button onClick={()=>{console.log("Event Handling in React")}}>Click Me</button>

Changing state is where the magic happens. With conditional rendering there’s many ways to do the same thing.

useContext Hook

The “useContext” hook helps pass data down multiple components/layers deep. It becomes useful when you pair it with either the useState or useReducer hooks. The point of useContext is to avoid prop drilling, which is here you pass props down multiple levels to child and grandchild components.

May want to take swap the normal “useReducer” hook for the “useImmerReducer” hook from the “use-immer” library. Wrap the necessary part of your app in a dispatch context provider and state context provider. Dispatch action and consume the state where necessary.

Forms in React

When it comes to forms and react you’re really going to want to understand state and read up on the React docs on forms. Unlike Vanilla JavaScript that waits until the end of form being completed and submitted, React will constantly keep track of data in state on every keystroke of the input fields. State is the single source of truth. A text area is self-closing in react.

You can get a hold of the value in an input with the help of useRef or better yet, with two-way-binding of state via useState or useReducer.

Forms are submitted with an “onSubmit” handler function that prevents the default html form submit.

Formik is an optional library to use that takes the pain out of react forms.

Separating Concerns

So you want to separate concerns to prevent scrolling throughout your code. It’s pretty common to put your UI or presentational stuff (receiving props/displaying props) separate from your business logic (managing state). There’s lots of names for this concept like smart/dumb components and container components. This concept of separating concerns is less of a thing with a library like redux or the context API, (useContext hook).

More Advanced

Some more advanced topics to go over in React include error boundaries, render props, higher order components, react-router, react lazy, memo, and suspense.

Event Handling

Use CamelCase similar to class versus className: onClick, onSubmit, onMouseOver, onMouseEnter

Images in React

CSS Tricks article here.

Conditionally Rendering

A hook like “useReducer” or “useState” to manage the state and then conditionally render a component or a “className.”

Here is an article.

Mobile Nav In React

Another example of how we have to re-learn the react way of doing everything. Brian Design video here (not a great channel). Brian also has a video with three desktop variations here and a drop down menu here.

Animations in React

What is the difference between React-Transition-Group, React Spring and React Motion and React Framer Motion? The latter three are full blown animation libraries and react-transition-group is a simple way to apply CSS transitions when a component mounts or unmounts.

Framer motion is relatively straightforward to use. I received an error with React Transition Group that forced me to look into Framer motion and now that I know it I don’t think I am going back. The error was: “findDomNode is deprecated in strict mode” and checkout this thread here for more information.

Media Queries and Responsive Design in React

Just use CSS with media queries.

Could also use something like:

const showButton = () => {
  if (window.innerWidth <= 960) {
    setButton(false)
  } else {
    setButton(true)
  }
}

useEffect(() => {
  showButton()
}, [])

window.addEventListener("resize", showButton)

Animate on Scroll in React

AOS library: Traversy has a tutorial. Easy to implement, can do with just CSS and JS with react?

We can still use things like window.addEventListener to listener to ScrollY and stuff like that in React.

Can also use the context API to create a Scroll Observer and Size Observer context files to track the window width and scroll position to help with animations. See the How I built a software agency website with Next.js + Tailwind CSS (in nature) from devaslife.

Again, framer motion mentioned above is easy enough.

Conditionally Adding CSS classes in React

A lot of conditional rendering in React is to show or not show a component. But if you want to conditionally add a CSS class you can do that as well.

The concept of adding CSS classes like “active” or “is-visible” to apply different CSS is essentially the same in React, you just manage the state via the useState hook to manage the specific condition and a function to update the state as needed.

const [navbar, setNavbar] = useState(false)

And then some function:

const changeBackground = () => {
  if (window.scrollY >= 80) {
    setNavbar(true)
  } else {
    setNavbar(false)
  }
}

window.addEventListener("scroll", changeBackground)

Then in your JSX you just render the “className” conditionally using a template literal and a ternary (something like isOpen ? “this-class” : “that-class”).

className={navbar ? "navbar active" : "navbar"}

//CSS

.navbar{
  background-color: transparent;
}

.navbar.active {
  background-color: blueviolet;
}

This tutorial here from Brian Design is quick and shows overview.

Other Examples:

className={props.className}

className={"inline-block " + (state.playing ? "animate-spin" : "")}