Starting the second phase of school marks an exciting and an emotional roller coaster again. I was anxious as we transitioned into the next phase. I did not feel 100% ready. The question is, will I ever feel ready? Flatiron has given me enough material to be a master of the craft, very grateful for that. However I do not feel like a master of that phase 1. I was not satisfied with my own skills. I do know, however, that the only way to master anything is time and practice over and over again. I have come to the realization that I may have been too hard on myself on not being a master for 3 weeks. I will definitely use this as a motivation to be a better coder in the future, and I will try not to be too hard on myself and knowing I will have plenty of time to practice after the school ends. As the second phase starts, I welcomed it with a better mindset, knowing that mastering takes time. I entered the second phase with excitement and anxiety as I was not at all familiar with React beforehand. Here are some of the things I have learned in the first week of phase 2.

React

React is a popular JavaScript library developed by Facebook for building user interfaces, also known as “UI”. It allows developers to create reusable UI components that efficiently update and render as data changes. React is a library that renders UI using components, and everything the user sees in their web applications can be broken down into components. This allows it to enhance performance and user experience. React is widely used for both web and mobile app development.

Components

Components, according to the React website, are isolated pieces of UI, and is a JavaScript function that you can use to add dynamic HTML. The developer can make components made up of a single button or a header, or a sidebar, or the body, or even the whole web page. Components are this amazing broken down structure, that can be reused and nested, that lets you organize the data flow.

How are components linked to each other?

Components are stored in separate “js” or “jsx” files. For React to know that they are all interconnected to each other, they need to know each other's presence, by “import” and “export” components. You can do that with simple steps:

1. Make a new file for one component, under the component folder ex: “ComponentName.js”
2. Export your component from that file, by writing: “export default ComponentName”.
3. Import that file to where it is going to be used, most of the time it gets imported on the parent file

• A file can only have one default export, but it can have numerous named exports!
• Parent file name is “Parent.js”, and needs access to the component
• In “Parent.js”, we will write “import ComponentName from “./components”

How do components communicate with each other?

Components communicate with each other using props. A parent component can pass information to its child or children by giving them props. Props are equivalent to HTML attributes attached to tags. Props can be dynamic information, the values can be string, objects, arrays or functions.
Example:

Value: <div value="Header"> .... </div>
Array: <ComponentName value={[1, 2, 3, 4, 5]} />
Object: <ComponentName2 value={{key1: value1, key2: value2}} /> 
Function: <button onClick={handleClick}> .. </button>

For more information visit my source website
Sources: https://react.dev/