This week in my coding bootcamp we have been getting comfortable using React. Thus, I will be writing an outline of the main concepts I’ve learned, taken notes on, and need to remember for my systems check tomorrow. Before doing so I’m really getting a kick out of using AI to generate dope React logos. You are welcome.
Concepts I need to know:
- JSX: A syntax extension for JavaScript, JSX allows you to write HTML-like code within your JavaScript code. It simplifies the process of rendering elements on the page.
2. Props: Short for properties, props allow you to pass data from a parent component to a child component.
3. Mapping over elements: The .map() function lets you iterate over an array and return a new array, creating a component for each element you iterate over.
4. useState: A React Hook that allows you to manage state in functional components. It provides a getter and setter function for updating and referencing state values. Make sure to import useState in the top of your file like this.
import React, { useState } from 'react';5. Defining methods to change state: Create functions within your component that can be called to modify the state using the setter function provided by useState.
const [*getter goes here*, *setter goes here*] = useState(null)6. Closure functions: Functions that capture variables from their parent scope, enabling the use of those variables within the child function.
7. React application flow: Understand when a page re-renders and how React components communicate with each other.
To build your application, follow this workflow:
- Examine the provided logic and data.
- Create the JSX structure for your app, focusing on appearance rather than functionality or state.
- Break down your JSX into smaller components.
- Use .map() to eliminate repetition in your components, especially when rendering lists.
- Implement state management using useState to create getter and setter functions.
- Pass the necessary methods to the appropriate child components.
- Ensure that your methods receive the correct arguments by utilizing closure functions.
- Continuously debug your code and refactor as needed.
As you work through this process, remember to stay patient and persistent. Many times a walk helped me reset and refresh. React, like any framework, may seem daunting at first, but with practice and determination, you’ll soon become more comfortable and confident in your skills. Especially since we now have Youtube, AI, and a plethora of other resources on the web. Happy coding!
4/6/23
Conor Jay Chepenik
P.S I got to stop eating Wendys for lunch. I appreciate the never frozen beef but the rest of the food is seed oil dog crap.
