REACT: The Basics!

What's up SE nerds! I'm back with a new post as I advance my skills throughout the bootcamp. This time I will be explaining the basics of what you'll need to know to master JS REACT!

I will start by explaining a wireframe. A wireframe is the blueprint or the skeleton layout of your App or website. This will be important for staying organized and making sure your work functions correctly. The wireframe is made up of 4 main "components" (pun intended!) => a 'Header', 'Side or Nav(igation) Bar', the 'Body or Main Content Area', and the 'Footer'. Each of these will be filled out using UI (user interface) components that represent elements that design the App or site to make it more user-friendly. These can include logos, search bars and buttons. if you're feeling a little confused at this point, the image below is an example of how all of this comes together.

Here, you can see the 'Header' and 'Sidebar' as main wireframe components, and the 'logo' and 'Nav Links' are UI components that compliment the wireframe.

The next things you'll need to know about are props and state. Props are how components communicate with each other. They work by accessing html elements from react. They typically pass down from parent component to child component. They check the child component to see if props are different before re-rendering, if they are the same, it won't re-render. I have an example of this below.

In this example, 'ParentComponent' passes the prop 'message' to the 'ChildComponent'.

This makes it so that the 'ChildComponent' receives and will display 'message'.

The next important element you'll need to know is 'state'. State represents data that is managed by a component that can be updated based on user interaction like API responses or any dynamic changes. State lives in a component and only that component can change it. A component can choose what state passes down to. in state, the parent component always re-renders. Here's an example below.

In this example,'useState' is usedto create a variable called 'newName'. This is initialized with the name received by the props. The field allows you to change 'newName' and it's updated value.

One more thing to keep in mind about React, is how to pass a child component to a parent. The simple answer is with callback functions passed as props. For instance, when you click a button (submit), the child component invokes the callback. The callback then updates the parent component's state or basically trigger an action based on the information passed. Here's an example below:

In this example, the 'ParentComponent' defines the callback function 'handleChildClick' and then passes it as a prop called 'onClick' to the 'ChildComponent'. The rest of this will be posted below:

This part shows how the 'ChildComponent' invokes the callback 'onClick' passed from the parent when the button is clicked, then passing a message back to the parent.