REACT


Web Development

Updated May 2nd, 2021

UseContext helps pass data down multiple components/layers deep. The real power comes when combining with useReducer and creating a dispatch context provider and state context provider.

ES7 React Snippets VSCode extension (author: )

React dev tools chrome extension is worth it as well.

Pass props in main.js or app.js or parent component and take in props as parameter in the component where using. Props is an object so you can use destructuring in the receiving component as well, (so you can just use color instead of props.color is you receive {color} as parameter in component instead of props)

React.propTypes is a thing (need to import from ‘prop-types’) but…TS

Component.defaultProps is a thing

StyledComponents is a popular package. Inline styles can be used as well.

Events with onClick, and onSubmit

Can pass onClick as a prop

Create a list with map array method

UseState. Don’t use . push and mutate

Can Install react-icons library instead of font-awesome cdn in index.

In this example project state is passed down and actions are passed up. We also saw with onClick that runs onDelete props going from main to tasks to task component so two layers deep.

Delete functionality leverages .filter () taskid != To I’d you are deleting)

Toggle reminder with side border using map function and conditional className using back ticks and ternary.

E.currentTarget.check returns true or false for checkbox.

Using the spread operator doesn’t mutate state and you can pass the second parameter as an alternative to .push() – confirm this because seems better than .concat() or what?

Adding/hiding input form with button is cool.

Build static assets out with NPM.run build in folder because build. Try serve package to test out locally on basic HTML server.

Work on mock backend. Tool/package called json-server to create mock rest API with our own data. Create a server script. Creates odd for you like a db so you don’t have to. Rewatch 1:25 or so to see his useEffect function. He pulls out asynch fetchTasks function and places below so he can use it later somewhere else.

Weird key error when he had a key? He uses the index to get rid of the error. He was missing an I in I’d in the dummy data.

Delete task with simple fetch delete request.

Add task with API

Update task with API using PUT fetch request.

Routing with Router from react-router-dom. New footer Component. Brings in BrowserRouter and Route. Wraps everything in Router tags and can now use route tags with paths..used exact keyword. Used render attribute on Route tag. Kind of Wonky.

Brought in Link and swapped out a tags and hrefs.

To hide button on about page component brought into Header component UseLocation from react-router-dom which allows you to look at the route you are currently on. Above the return in a Header Create a constant name location and set it to use location. Wrap button code in curly brackets and say location.pathName === ‘/’ && Buttoncode

Traversy Media Create-React-App Teardown

Delete index.css (breaks app until you delete the code that imports the file from index.js)

Delete logo.SVG (This also breaks the app until you delete the code that imports it in app.js. You need to delete both the import statement and all the code in the main div)

Replace App.css with some core CSS code to reset margin and font

Create an h1 that says app

Create a source folder if there isn’t one already and create a components folder.

Random From 5 Hour React Course from FCC (a bit outdated now in 2021)

YouTube tiles are a good example of components.

Conditional rendering

Functional versus class-based components. Every one now using functional.

You need this.props when using class-based components

It’s good practice converting a function component to a class component and then functional to class. Or just avoid class-based?

How do you do convert functional to class?

Extends React.Component

drop the parentheses ()

under the curly bracket render() {}

more code into the curly brackets

add this.props if applicable

State

State is the data a component maintains.

Props are immutable so state is a way to change data. State originally could only be added to class-based components but now functional components can handle state too.

Add state to a class-based component using constructor method and make a call to super()

This.state is always equal to an object

You can pass state to another child component through props

Change state using setState() and react will auto update

Events in react are in camel case and pass functions into curly brackets

Learn more about events at ReactJS.org/docs/events.html #supportedevents

Changing state is where the magic happens

You never want to modify the original version of state (Author used the metaphor of changing your clothes).

Bind the class method that uses setState to class

this.handleClick = this.handleClick.bind(this)

Some lifecycle methods

With conditional rendering there’s many ways to do the same thing

You can render nothing if false using the double ampersand operator &&. This simplifies the ternary operator where false is returning null.

component did mount is a lifestyle method It’s like a hook in our react component that allows us to run some kind of code immediately after when component first mounts to the DOM. It’s common uses to get data from somewhere so the component can do what is supposed to do. Usually grab some data from an API using fetch or axios. The author used fetch with the CORS-enabled Star Wars API and can be found at SWAPI.com.

It’s important to know promises when you’re going to use fetch or axios to revive data from API.

How do you get the data from an API onto the screen? You’re going to save it into state.

You’re going to want to have a loading spinner just in case the API is slow or the user’s internet is slow. You do this by using a boolean onLoading

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. Formik is an optional library to use that takes the pain out of react forms.

Separating Concerns

So you want to separate concerns for organization and to prevent scrolling throughout your code. It’s pretty common to put your UI or presentational stuff (receiving props/display) 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 context API. The author’s boot camp recently dropped redux for the context API.

Some future topics to go over in React include air boundaries, Render props, higher order components, react router, react hooks, react lazy, memo, and suspense.

Random Notes

I’m writing this on like May 6th 2021. I have learned a lot about HTML and CSS and JavaScript and just finished building a MongoDB driven express application that is server-side rendered. Now I look at react and it’s pretty much a whole different way of building! I feel like I can kind of takes everything we’ve I’ve learned and is like “yeah that’s not helpful we’re going to do it this way instead.” In the case of this MongoDB driven express app we literally rebuild a front end in React That is pretty much the exact same thing we just built with EJS templates.

Event Handling

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

Images in React

CSS Tricks article here.

Conditionally Rendering

Here is an article.

Mobile Nav In React

Another example of how we have to re-learn the react way of doing everything. Video here. Brian has a video with three desktop variations here and a drop down menu here.

Animations in React

What is the difference between ReactTransitionGroup, 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.

Media Queries and Responsive Design in React

React responsive library (useMediaQuery)

Animate on Scroll in React

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

Popping classes in React

The concept of adding CSS classes like “active” or “is-visible” to apply different CSS is essentially the same in React, you just use state via hook like useState to manage the specific condition (isOpen, isRevealed, etc.) and a function to update the state as needed. In your JSX you just render classname conditionally using ternary (something like isOpen ? “this-class” : “that-class”). We can still use things like window.addEventListener to listener to ScrollY and stuff like that in React.

This tutorial here is quick and shows overview.

Brian Design

Dude has some badass sites built in React

Random

A note on an angular it’s popular and enterprise businesses and it uses stricter code. There’s a steeper learning curve than react or vue. You’ll see code like NG new my app and angular also has a CLI. Angular is good for testing and they have like four different files for one component.


Top