- Text review, changes in react app to fix errors
- I don’t have and OpenFaaS deploment anymore, so the back was moved to something else.
- The source code for the new thing included in the new codesanbox repo.
I decided to start a series of front end projects that I found at DEV.to “9 Projects you can do to become a frontend Master in 2020”. This post is about my own spin-off from the first project listed in that post by Simon Holdorf, a movie search app using React with hooks only, avoiding Class based components.
The fact that the challenge involves using the new hooks feature in React interests me particularly, because I recently revisited React after I learnt it one year and a half ago, then I left front end completely all this time. The base for my spin off comes from Samuel Omole’s tutorial at freecodecamp.org
Movie components are almost identical to the ones
Samuel wrote, but I took a few liberties in the
components. Also I prefer
.jsx extensions for components and
because he goes deeper in the logic behind the app and explains how the
hooks work, it is not my goal to repeat him.
What I do different?
- OMDB API key is not exposed in the React app
OpenFaaSserver-less function acts as proxy to OMDB
- keywords for narrowing the search and limiting number of results:
- title:“movie title”
- type:movie, series, episode
create-react-app is the tool I am more
used to bootstrap React projects, honestly I haven’t tried many others
besides Gatsby. I became a patron at
CodeSandbox so why not use it for this
codesandbox cli made a breeze to export the project I
had already bootstrapped from my laptop to the web editor. You can also
bootstrap your project directly in CodeSandbox and then export to a
Github repository and or publish it to Netlify. Go and check them out!
npm install -g codesandbox codesandbox ./
Also add a
The next component
components/Search.jsx will introduce hooks, the
new React feature that allow to handle state in functional components. I
a long time React developer I very much welcome hooks.
In the Search component the
useState hook takes the initial state as
parameter and returns an array with the current state (similiar to
this.state but does not merge old and new states togheter) and a
function to update the state
setSearchValue in this case, which is the
useEffect is a hook which allows to perform side effects in your
components, like fetching data from OMDB in this app. Other hook is
useReducer which works similar to redux reducers, it accepts state and
action and returns the current state and a dispatch method.
There are a couple of unbreakable rules for using hooks in React:
- Only call hooks at the top level of function components.
- Do not call hooks inside loops, conditions or nested functions.
- Only call hooks from React function components.
You can read more about Hooks in the React docs.
In summary, I will be using hooks over class based components in my current and next React projects, a good thing is that class and function components with hooks mix well, so no heavy refactoring of class components and slow adoption of hooks is a good approach for existing projects.
You can try and explore the code for the working movie app. Be ware! Since this is a demo the server-less function behind is not setup to scale and a heavy load of requests may take it down temporarily.