Abdu's Garden

React - the JS framework

5 min read

Resource

React quick start guide React Navigation

Components

All visible parts of a page, such as buttons, inputs, and even entire pages. These are reusable functions that return a markup used to describe a DOM element. But not HTML, they return JSX which is JS in disguise… Example: creating a button.

function MyButton() {
  return (
    <button>I&apos;m a button</button>
    //&apos; is the escape char for an apostrephe
  );
}

Nesting it in another component:

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton /> // Here our function that returns a button component is nested in this component.
    </div>
  );
}

React component names must always start with a capital letter, while HTML tags must be lowercase.

JSX attributes are written in camelCase for example <button class="ugh"> becomes <button className="ugh">. The benefit is that JSX allows dynamic JS values in the elements seamlessly using curly braces {}. Each component returns a single parent component, so to bundle them together use empty components known as ReactFragments.

<>
<Header/>
<Main/>
</>

Using Components

Since they’re reusable elements living in their own files, you’ll need to import and export them when in need. For example:

function Greeting() {
  return <h1>&quot;I swear by my pretty floral bonnet, I will end you.&quot;</h1>;
}
export default Greeting;

Styles

In React, you specify a CSS class with className. It works the same way as the HTML class attribute. For example: <img className="avatar" /> this adds the avatar class to this image component and simply write the CSS in your style sheet.

Props (as in properties)

Used to pass data into a component.

  1. Create a name on the component. For example, <Greeting text={'sup}
  2. Use prop by passing it to a function as an argument and take it from the component:
function Greeting(props){
	return <h1>{props.text}</h1>
}

Can also access children props of components in other components. This promotes ReactComposition

Key props

Used to identify components uniquely for doing things like using map functions. Example: <Component key={'1}> these keys are either unique number or string. Sometimes the index from the map function is good enough.

Rendering

React knows how to render by using a vertual DOM VDOM.

Steps

  1. On state change → update the VDOM
  2. React checks diffs to find changes
  3. React uses a process called ReactReconcilliation to update the real DOM with the changes.

Event Handling

Handle the various events that happen. The common ones are:

  1. onClick
  2. onSubmit
  3. onChange Similar to plain JS…

Alerting a user

Add the onClick prop to a button (or other component) then set that prop to a function that will handle the alert and show it to the user.

Managing Data

React maintains a State of the app at any given time and its our job to utilize that. However, JS variables (let and const) can’t be used because the prohibit re-rendering. So in React, we use:

  • useState()
  • useReducer()
const [likes, setLikes] = useState(0) //starting value, "likes"

The likes is the state var and setLikes is the function that updates that variable.

function Likes(){
	const [likes, setLikes] = useState(0) //starting value, "likes"
	const handleClick = () => {
		setClicks(likes + 1)
	}
	return(
		<button onClick={handleClick}>
		Likes:{likes}
		</button>
	)
}

Controlled components use state value to have predictable behavior.

React Purity

Can be summarized as “Same component with the same input should produce the same output”.

Effects

Refers to code that reaches out of our React code to interact with the browser API or perhaps make requests to a server.

Context

When needing to pass props down the chain of nested components, instead of passing the prop down one step at a time through components that don’t need it, we use ReactContext. This lets us Jump the data where it needs to go.

  1. Create context
const AppContext = createContext()
  1. Wrap Provider component
<AppContext.Provider>
	  <App/>
</AppContext.Provider>
  1. Put data on value prop:
<AppContext.Provider value="Bob"
  1. Get data with useContext
function Title(){
	const text = useContext(AppContext)
	return <h1>{text}</h1>
}

Portals

Suspense

Error Boundaries

Screens (React Native)

A React Screen is not a specific concept in React itself. Instead a “screen” refers to a distinct view or page within a mobile application.

In React Navigation, a screen represents a route in a navigator. It is typically defined using the Stack.Screen component and contains the following elements:

  1. A unique name to identify the screen
  2. A component prop that specifies the React component to render for that screen
  3. Optional configuration settings, such as the title to display in the header

Here’s a basic example of how a screen is defined in React Navigation:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{title: 'Welcome'}}
/>

Screens in React Navigation receive a navigation prop, which provides methods for navigating between different screens in the app. This allows developers to create a seamless navigation experience for users.

The react-native-screens library provides native primitives to represent screens instead of plain React Native View components. This approach offers better operating system behavior and improved performance for screen transitions.

Graph View