CodePamoja
CodePamoja means "Code Together" in Swahili. We are a group of passionate developers in The Netherlands and Kenya working together in virtual teams, transferring the latest software development skills to each other.
A JavaScript library for building user interfaces
Introduction
What is React?
- A JavaScript Library
- Components-Based
- For building user-interfaces
- It is using a virtual dom
Virtual DOM
Virtual DOM
The virtual DOM is a representation of the actual DOM. It's a pattern to change the actual DOM in a smart and fast way.
JSX
JSX
- Preprocessor for writing XML in your JavaScript
- React can be used without JSX, but it is recommended to use it for writing readable code
React with JSX
React without JSX
Components
Function components
vs
Class components
How to write a component
From version 16.8.0 it doesn't really matter if you use a class or functional component, but it is recommended to write functional components.
Before version 16.8.0 it depends if you only need props or if you need the state, props and lifecycle methods.
Whether a component is a class or a function that uses Hooks is an implementation detail of that component. In the longer term, we expect Hooks to be the primary way people write React components. [source: https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both]
We have no plans to deprecate classes. ..... But if the React community embraces Hooks, it doesn’t make sense to have two different recommended ways to write components. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code. This is why Hooks represent our vision for the future of React. [source: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889#f7df]
Functional Components
Functional component
- Just a JavaScript function
- Has access to props
- Returns JSX (return statement is required)
- Can have access to state & lifecycle methods via hooks
When to use?
Functional components
Since version 16.8.0 they are almost equal to class based components, so it doesn't matter.
Before version 16.8.0 if you only need props.
Class Components
Class based component
- A JavaScript class that extends React.Component
- The render method is required
- Has access to state, props and component methods
- Has access to lifecylce hooks, which will help to hook into the mounting and updating of a React Component.
When to use?
Class based components
Since version 16.8.0 they are almost equal to functional components, so it doesn't matter.
Before version 16.8.0 if you need the state, props and lifecycle methods.
Render
Rendering elements
An element is the smallest building block in react. Components are created by one ore multiple elements.
Rendering elements
This is the minimum what you need to start with React. A React element and an element inside the DOM to render your element.
Rendering elements
React Elements are immutable. Once created, you can't change its children or attributes.
Updating elements
You can only update the UI to create a new element and pass it to the ReactDOM.render()
React only updates what is necessary by comparing what is changed in the desired state.
Rendering components
A React component is a collection of one or more elements.
Rendering components
Render a React Component in the DOM via ReactDOM.render()
Rendering components
It is recommended to make one App component as a wrapper for multiple child components.
Resources
Props
Props
Props are values that will be passed through components from outside. They are read-only and should not be modified inside the component!
Props
Props
If you want to do something with a prop value and modify it, use a pure function.
Pure function
A pure function always respects it's inputs and will return always the same result for the same inputs.
Pure functions are testable!
All React components must act like pure functions with respect to their props.
Impure function
A impure function will always return a different result because it will change one or more values that are brought into the function.
Resources
State
for functional components
useState
With the useState method you can use and change the state of a functional component.
Hooks are introduced in React 16.8.0 and make it possible for functional components to access the state (and more).
useState
- The count variable will contain the state.
- setCount is the method to change the state and trigger a re-render of the component.
useEffect
The useEffect hook will be called during the mounting and destroying process
Class component
Functional
component
useState & useEffect
Pro's
- Multiple states
- States can be multiple types. For example a string, int, object, array, boolean
- We can access the state in a simple functional component
- We can trigger methods when a component is done rendering or updating.
useState & useEffect
Cons
- You can only use it in functional component
State
for class components
Internal memory for data inside a class based component.
Use the state only when things will be updated later. If it does not need to be updated, just use the props to get the data via a parent component.
State
The state needs to be defined in the constructor.
Define your state
Use this.setState() to update the local state of your component inside the componentDidMount event.
setState()
This will not trigger a re-render
This will trigger a re-render
React will batch multiple setState() calls into a single update for performance.
setState()
setState()
But since this.state and this.props are updated asynchronously, so we can't ensure to have them available at the same time.
Resources
Context
a global state
A global state for data inside a React application, where every component can get their data from and send data to.
Context
createContext
Context Consumer
Context Provider
Example
Lifecycle methods
are only available in class based components
Lifecycle methods
First method that will be called, before the mounting starts
constructor
If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.
Call super(props) in order to have access to this.props
Mounting process
The only required method for class based components. Will perform the rendering of the component in the DOM.
render
A good place to:
Return the elements or content via JSX
Will be called when the component is rendered to the DOM
componentDidMount
A good place to:
call setTimeout, setInterval, fetch and setState
Will be called when the state or props are updated
componentDidUpdate
A good place to:
do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
When the component is removed from the DOM
Unmounting
Is called before a component will be removed from the DOM
componentWillUnmount
A good place use:
clearInterval, cancel subscriptions
Example
Resources
Events
Events
Events
And passing arguments to event handlers
Resources
Routing
Routing
For routing we use react-router-dom
Views
Routing
Links
Resources
React
By CodePamoja
React
Introduction into React training
