React Starter Pack

If it’s taking you some time to fully grasp the different concepts of React compared to vanilla Javascript, I would like to assure you, you are not the only one. React is a Javascript library that allows you to build an interactive user interface. React native is mainly used to create native apps. Though it will take time to learn and adjust switching your go-to style of building a user interactive app to React, it actually makes your code a lot more interactive, clean, and precise. Here are few key things to take note of when starting to learn React:

Different ways to write a component:

Before we start talking about the different ways we write components, let’s actually define what a component is. Components are functions and building blocks of React that describe how the UI section of the app should appear. If you have interacted with a task-tracker or any app built using React, each function of the app like the buttons, the drop-downs, etc.. will be a separate component. There are three ways you will see people write components normally:

1- Using Class

import React from 'react'
class Filters extends React.Component {
render() {
return (
<div>
<h1> Hello World</h1>
</div>
)}
}
export default Filters

One thing to note when using Class, if you were to declare a function inside the class component, you can’t use const. You can directly define it and later access the function using {this.function}.

onChangeType = (e) => {
this.setState( {filters: { category: e.target.value}})
}

<h1 onChangeType={this.onChangeType}> Hello World </h1>

no need to use const when writing a function to pass as a prop. You can pass it to the component like this.props.(function)

2- Arrow Functions

Writing your component using const is a bit different than writing them using a class. One of the benefits I like about using const is the ability to pass in the props directly as an argument so you can later reference them without using this. props. You could also see people pass just props as an argument and later reference to it with {props.pets}

const Filters = ({ pets })  => {
return (
    <div className="loved animals">
      {pets.map(dog => <AllDogsCard name={dog.name} key={dog} /> )}
     </div>
   );
}
export default Filters

• If you notice here, we didn’t use the render word to return our JSX. This is because we wrote a functional component. If we define our component using class we would need to render it.
• The other thing to note when writing components with arrow function is, you would need to write your states differently. Instead of doing this.state or state ={} to initialize your state, you would use const [state, setState] = useState(initialState).

3- Functions

Functions are similar to how you would define a component using arrow functions. They are the recommended component type in React. They must return a React element (JSX). You can also pass props as a parameter if necessary as mentioned in the previous example. They always start with a capital letter (naming convention). Let’s look at an example

import React from 'react'
Function filters() {
return (
<div>
<h1> Hello World</h1>
</div>
)
}
export default Filters

If you have a hard time writing out the syntax, I have been using ES7 React/Redux/GraphQL/React-Native snippets which helps a lot.

When to Invoke a function inside a prop

It is definitely possible to pass down functions a prop so it can be executed on a click or rendered on the page when it loads. If you are like me, you probably wonder when you should invoke a function or not. Here are two examples of a function being invoked inside a prop.

class App extends Component {
......
changeInput =() =>{this.state.pizzas.map(pizza => pizza.topping)}
    render() {
       return (
       <PizzaForm pizzas={this.state.pizzas} changeInput=.      {this.changeInput}/>
   );
  }
}
When a function is invoked inside a prop
sortDogs = () =>{
....
}
   render() {
     return (
     <HogList hogs={this.sortDogs()} />
   }
 };

So when should you invoke the function? Well, that really depends on how you want your function to run. When you invoke the function in the props as you pass it down, it will be called every time the component renders. If you are looking for ways to pass arguments like id or key into a function then you can pass an anonymous function to the event listener. It looks like this:

onClick={() => deleteToy(this.props.id)}
Instead of 
onClick{deleteToy(this.props.id)}

Difference between Props and State

To keep this blog short and precise I will use few sentences to talk about the difference between Props and State. Props are an effective way to pass existing data to a React component, however, the component cannot change the props — they’re read-only. State is mutable meaning it can change, if the end-user has to edit, delete or interact with the input or function on the page then you need a state. You can only define states in the component itself. If you want to pass down a state from parent to child component then you would need to pass it as a prop.

Yes, React can be tough to understand initially but with a lot of practice and project building, you will soon start to see the benefit of it and hopefully start to love it.