Mentor Léo: Dynamic javascript webapp using React (Week 2/Day 5)

Work from anywhere, be a developer

This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥ https://mentorleo.co

See the story of the project on medium

Connecting all the dots

You learnt React components, props, states. You learnt to call an API. How about plugging those 2 together ?

We could see Labels (or skills or whatever name you used for these components) as checkboxes: if they are activated we will search for this skill in the jobs API, otherwise we don’t search for it.

Requesting the awesome

Forget the XmlHttpRequest. It’s not a clean way to handle Ajax. In week 1 I just wanted you to see that you could do so much stuff in native javascript, and that modern libraries are built on this native javascript (and on top of other libraries as well).

Install superagent to handle Ajax without the hassle:

npm i --save superagent

(“npm i” is an alias for “npm install”)

You’ll need to install the package below as well to use jsonp, to bypass the CORS issues we have when fetching the Github API:

Read the documentation on how to use it. Edit your old code that fetches jobs using superagent ;)

Keep an App state

Let’s build something simple that works. We’ll talk another day about communication patterns in React (flux, redux, etc).

Here, we want to connect the Labels with the JobList. Right now you may have architectured your app like this:

| — Root
| — — — Avatar
| — — — Labels (or Skills or whatever)
| — — — JobList

In order to be reusable, the Label component shouldn’t know about JobList. Remember that we kept the state of the Labels inside them ? Well, now we’ll deport that state in the common parent of Labels and JobList: Root.

Now, you have to delete the state inside the Label component. The activation/deactivation is now handled by the prop “activated” instead of the local state, and Label should call the callback “onToggle” instead of updating its state. Your turn, update the Label (or Skills) component !

The JobList component

Allright, you must have noticed I used a JobList component in my Root component. Time to implement it ;)

This components takes only one props: an array of strings representing the technologies we want to filter the job offers on.

Step 1.

Create your component, and create a function called “fetchJobs”. This function takes no arguments, and its goal is contained in the name of the function :p

Create a variable in fetchJobs whose goal is to transform an array of skills to a string delimited by “+”, where skills are lowercase. If you don’t understand why, read the API again.

['HTML', 'CSS', 'Javascript'] -> 'html+css+javascript'

If you have troubles visualizing how to do, break down the complex problem by simpler subproblems:

1. ['HTML', 'CSS', 'Javascript'] -> ['html', 'css', 'javascript']
2. ['html', 'css', 'javascript'] -> 'html+css+javascript'
3. ['HTML', 'CSS', 'Javascript'] -> 'html+css+javascript'

Step 2.

We’ll need state to keep the job list. Have a default state containing an empty array:

getInitialState() {
return {
jobs: []
};
},

Use superagent and superagent-jsonp inside your “fetchJobs” function to call the API with the string you built in Step 1. In the callback you give to superagent for when the request returns, update the state of the component to include the list of job offers contained in the result of request (using this.setState({jobs: …}).

Step 3.

Hmm, in our component we never call this function “fetchJobs” yet. Time to do it. Add this to your component:

componentWillMount() {
this.fetchJobs();
},
componentWillReceiveProps() {
this.fetchJobs();
}

WTF is those ? Reflex: see the documentation below (RFTM: Read The Fucking Manual):

https://facebook.github.io/react/docs/react-component.html

I won’t explain it to you, you have to understand it yourself. You’ll be a pro in React lifecycles after that ;)

Step 4.

Your list of job offers will be available on this.state.jobs.

Render that shit.

Make it look gorgeous.

End of Week 2

Congrats ! You learnt to build basic React applications, using modern tools and practices ;)

In week 3 we will deport the job fetching into a Node.js backend. Then you’ll have a pretty good overall of the full stack (frontend & backend).

→ click here to go to Week 3 Day 1👍

Call to action

Join us ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥ https://mentorleo.co

Like what you read? Give Damien BRY a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.