A                   
Developer's Guide to Technical Interviews

Adrianna Valdivia

@adriannavaldivi

adrianna.dev

HELLO THERE!

MOTHER OF A 6 YR OLD BOY
 

WOMEN WHO CODE ATL EVANGELIST

UI ENGINEER @ SALESLOFT

 

SPEAKER/WRITER
 

#1 Best Place to Work in Atlanta
2018 and 2019

wHAT WE'LL GO OVER

1. types of technical interviews 2. what is react?
 		 3. state vs props
4. prop drilling

 


 		 5. react context api

 
6. lifecyle hook/ react hooks 7.api calls 8. async/await

Types of technical interviewing

  • Whiteboarding 🤮

  • Github Pull Requests/Repo

  • Timed Assessments

  • Pair Programming

  • Conceptual questions

What is react?

They already know it's...

  • Declarative

  • Composable

  • Component Based

  • Reusable

Always have your own interpretation of what React is, not the textbook version only.

STATE VS PROPS

STATE PROPS
changeable immutable in children components
“private” information to initialize and update component's properties

"Props are a way of passing data from parent to child. State is reserved only for interactivity, that is, data that changes over time."

prop drilling 

//Toggle.js
function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(o => !o)
  return <Switch on={on} onToggle={toggle} />
}

//Switch.js
function Switch({on, onToggle}) {
  return (
    <div>
      <SwitchMessage on={on} />
      <SwitchButton onToggle={onToggle} />
    </div>
  )
}

//SwitchMessage.js
function SwitchMessage({on}) {
  return <div>The button is {on ? 'on' : 'off'}</div>
}

//SwitchButton.js
function SwitchButton({onToggle}) {
  return <button onClick={onToggle}>Toggle</button>
}
explicitly passing values throughout the view of your application.
 
- Kent C. Dodds

react context api

// DataContext.js
import { createContext } from "react";

export const DataContext = createContext({
  name: "Adrianna",
  age: 26,
  job_role: "UI Engineer",
});
export const DataProvider = DataContext.Provider;
// ParentComponent.js
export const ParentComponent = (props) => {
  return (
    <DataProvider>
      <ChildComponentA {...props} />
    </DataProvider>
  );
};
// ChildComponentB.js
export const ChildComponentB = (props) => {
  const data = useContext(DataContext);

  return (
    <ChildComponentC data={data} />
  );
};

React provides:
  1. createContext
    • Consumer
    • Provider
  2. useContext hook
Context provides a way to pass data through the component tree without having to pass props down manually at every level

1

2

3

lifecycle hooks or react hooks

functional components

constructor

componentDidMount

componentDidUpdate

componentWillUnmount

useState
useReducer (alternative)

useEffect

 

...even more hooks or create your own!

Know before you go into an interview what React version the company is on.
Hook were introduced in React 16.8.
Advocate for react hooks!

class components

making api calls

With React Hooks !!

export const showUsers = () => {
  const [data, setData] = useState({ persons: [] });

  const fetchUsers = async () => {
    let response = await axios('https://jsonplaceholder.typicode.com/users');
    setData(response.data);
  }

  useEffect(() => {
    fetchUsers()
  }, []);

  return (
    <ul>
      {data.persons.map(person => (
        <li key={person.id}>
          <a href={person.url}>{person.name}</a>
        </li>
      ))}
    </ul>
  );
}

ASYNC/AWAIT

“async” before a function means one simple thing: a function always returns a promise

The keyword “await” makes JavaScript wait until that promise settles and returns its result

//fetchGithubUser.js
const fetch = require("node-fetch");

async function fetchGithubUser() {
  let response = await fetch("https://api.github.com/users/avaldivi");
  let user = await response.json();
  console.log(user)
  return user;
}

fetchGithubUser();


// WHAT PRINTS TO CONSOLE
// {
// .....
//   login: 'avaldivi',
//   site_admin: false,
//   name: 'Adrianna V.',
//   company: '@SalesLoft ',
//   blog: '',
//   location: 'Atlanta, Georgia',
//   email: null,
//   hireable: true,
//   bio: 'UI Engineer @SalesLoft',
//   public_repos: 48,
//   public_gists: 2,
//  .....
//}

Check what Promises are in resources slide for further understanding

es6+
fEATURES

  • map
  • forEach
  • split
  • reduce
  • find
  • filter
  • var, let, const*
  • Set *
  • arrow functions
  • destructuring
  • spread operator
  • Promises
  • async/await
  • try/catch

js built in functions

* Items only covered in these slides
I  recommend diving into the built in functions & features not covered in the slides!

&

var VS let vs const

1. var: is “function scoped” to the function it was created in and is only accessible inside of that function or any nested functions.


2. let: is "block scoped" or anything surrounded by a curly brace {} like in a for loop or an if statement.
 

3. const: exactly the same as let! The only difference is that once you’ve assigned a value to a variable using const, you can’t reassign it to a new value.*

var tester = "Im a var!";

function newFunction() {
  var hello = "Im a var inside a func"
}

console.log(tester) // "Im a var!"
console.log(hello); // error: hello is not defined
let times = 4;

if (times > 3) {
  let hello = "say Hello";
}
  
console.log(hello) //error: hello is not defined



const speakerDetails = {
  name: "Adrianna Valdivia",
  age: 26
}

speakerDetails = "Adrianna Valdivia"
// error: cannot redefine speakerDetails

speakerDetails.name = "Adrianna"
// you can update inner values

SET

var mySet = new Set();

mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add('some text'); // Set [ 1, 5, 'some text' ]
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o is referencing a different object so this is okay

mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has('Some Text'.toLowerCase()); // true

mySet.size; // 5

mySet.delete(5); // removes 5 from the set
mySet.has(5);    // false, 5 has been removed

mySet.size; // 4, we just removed one value
console.log(mySet);
// Set [ 1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2} ]

The Set object lets you store unique values of any type, whether primitive values or object references.

Resources

tHANK YOU

adrianna.dev

@adriannavaldivi

A React Developer's Guide To Technical Interviews (Women of React)

By Adrianna Valdivia

Made with Slides.com

A React Developer's Guide To Technical Interviews (Women of React)

List of concepts, available functions, code snippets that can be helpful as you start to interview for entry level react developer positions. This talk was presented at Refactr Tech in Atlanta June 7th 2019 and React Loop June 21st 2019.

  • 1,018

More from Adrianna Valdivia