React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps. In this article, we’ll look at some tips and tricks to make building apps with React easier.
Use React Hooks In Functional Components
Hooks make React function components smart. Without hooks, all we can use function components to display data. That’s why they were also called stateless components. With hooks, they have their own internal state and methods, which make them much more useful.
For instance, we can write components with hooks as follows:
import React from "react";
export default function App() {
const [count, setCount] = React.useState(0);
return (
<div className="App">
<button onClick={() => setCount(count + 1)}>Increment</button>
<p>{count}</p>
</div>
);
}
In the code above, we have the built-in React useState
hook which lets us change the count
state with the setCount
function.
We call setCount
with an argument to update the value as we did with the onClick
handler.
It looks simple. We don’t have to reference this
as we do with class components, so we don’t have call bind
to set the right this
as we do with class components.
It’s just much cleaner to work with. We can also write our own hooks to update data our way.
Function components don’t have access to lifecycle methods, so this is the way to make smart function components.
Use The React Context API For Passing Props
The React context API lets us pass data between unrelated components. With function components we can use the createContext
method to create a context. We can use the returned component to wrap around our components which we want to share data between.
Then we can pass any data that we want between them. The communication is still one way. Data is passed from context provider to consumer.
For instance, we can write the following code to pass data between them:
import React from "react";
const CountContext = React.createContext(0);
function Count() {
const count = React.useContext(CountContext);
return <p>{count}</p>;
}
export default function App() {
const [count, setCount] = React.useState(0);
return (
<CountContext.Provider value={count}>
<div className="App">
<button onClick={() => setCount(count + 1)}>Increment</button>
<Count />
</div>
</CountContext.Provider>
);
}
In the code above, we created a React with React.createContext
so that we can share data with the Count
component.
We use the CountContext.Provider
component to wrap it around everything. Then we pass in the count
variable into as the value of the value
prop, which will share it with any component that calls React.useContext
and is inside the CountContext.Provider
component.
Then in Count
, we call React.useContext
with our CountContext
passed in. Therefore, the count
will be passed from App
in Count
via the value
prop and rendered in Count
.
Therefore, when we click the Increment, then the count
value will increase.
Styled Components
One benefit of using React is it’s very easy to set CSS values in JS. Therefore, it’s very easy to make styled-components with CSS inside components, making them self contained.
We can use the style-components
library to make styled-components easily. It comes with template tags that turns CSS strings we pass in into a component.
For instance, we can write the following:
import React from "react";
import styled from "styled-components";
const Div = styled.div`
background: ${props => (props.primary ? "green" : "white")};
color: ${props => props.color};
margin: 1em;
padding: 0.25em 1em;
border: 2px solid green;
`;
export default function App() {
return (
<div className="App">
<Div background="green" color="white" primary={true}>
foo
</Div>
</div>
);
}
In the code above, we have the props
in the template string, which are props that we pass in when we use the component. style.div
is a template tag. Template tags are functions that take in a template string and return some objects on our choice.
In this case, we return a styled component. style.div
returns a div with the types that we hard code or set according to props.
Then when we reference Div
in App
, we’ll see a green box with white text as we specified with the color
prop. Since we specified that the value of the primary
prop is true
, style-component
will set the background color to green.
Conclusion
The hooks API makes React components cleaner and easier to understand. It lets us make function components smart. We also don’t have to worry about the value of this
or lifecycle hooks any more.
The context API is useful for sharing data between 2 components, regardless of their relationship. We can use the useContext
hook to do the sharing.
Finally, the styled-components
library comes with template tags to let us make styled-components with ease.