Understanding Creating a React App & Components
The whole reason I first was interested in software development was the concept of building a practical application that either showed a user what they wanted to see, or completed an intended purpose, all reacting from live code. After watching numerous videos online, and diving into the Flatiron curriculum, I realized that create-react-app<> was the way to go.
I realized very quickly after watching numerous videos online that there are many different ways to handle the “back-end” of a React App. “Back-end” meaning a: database, user authentication, storage, etc. In my case, with FlatIron, most of my work has involved working with a JSON database within the app itself. I have done slight research into Firebase, and I really enjoy it. However, because most of my projects have used a JSON database, there are a couple of quick steps to do once in the command prompt:
npx create-react-app<app_name>
has been fired.
Then, enter in these two commands:
npm install json-server
npm add -D concurrently
Next, I am going to add some more lines of code within the new package.json file in order to install the json server, run the database (db.json) on a separate port and watch it. The lines of code, once ..cd into the proper directory, under “scripts” are:
“dev”: “concurrently \”npm start\” \”npm run json-server\””,
“json-server”: “json-server — watch db.json — port 3001”
From there, run
npm run dev
and the React app should open in the browser, as well as set up the JSON Database.
From there, the app can go in any direction depending on the developers wants/needs. The developer will most likely decide to add components to the project. Components allow the user to split the UI into independent and reusable pieces. There are two types of components: functional and class.
An example of a functional component is:
import React: {useState, useEffect } from ‘react’;
import SushiContainer from ‘./containers/SushiContainer’;
import Table from ‘./containers/Table’;
const API = “http://localhost:5000/sushis"
const App = (props) => {
const [sushis, setSushis] = useState()
const [money, setMoney] = useState(100)
const sushiEaten = (sushi) => {
if(sushi.price > money) return;
sushi.eaten = true
setSushis(sushis)
setMoney(money-sushi.price)
}
useEffect(async() => {
const result = await fetch(API)
const data = await result.json()
setSushis(data)
console.log(data)
},[])
if(!sushis) return null;
return (
<div className=”app”>
<SushiContainer sushiEaten={sushiEaten} sushis={sushis} />
<Table money={money} plates={sushis.filter((sushi) => sushi.eaten).length} />
</div>
);
}
export default App;
An example of a class component:
import React, { Component } from ‘react’
class Test extends Component {
state={
count:0,
onGoing:0,
caption:””
}
handleChange = (e) =>{
let newCount = e.target.value.length
this.setState({
count: this.state.onGoing + newCount,
caption: e.target.value
})
}
handleKeyChange = (e) =>{
if (e.key === “Enter”) {
this.setState({
onGoing: this.state.count,
caption:””
})
}
}
render(){
return (
<div>
<input value={this.state.caption} onChange={this.handleChange} onKeyPress={this.handleKeyChange}></input><button>{this.state.count}</button>
</div>
)
}
}
export default Test
The important thing to realize is that both functional and class components do the same thing, there is just differences in diction and functions used, among other differences.
To set state in a function component, the developer is expected to use useState(). As seen above:
const [sushis, setSushis] = useState()
[sushi] is the array that stores the information, and setSushis is used to set the state of sushis when needed. If the user would like to start the state with an initial value, they just need to add it as a parameter on useState(), as so:
const [money, setMoney] = useState(100).
In this scenario, money’s intial state is being set to 100.
To set state in a class component, the developer is expected to use setState(). Also seen above:
class Test extends Component {
state={
count:0,
onGoing:0,
caption:””
}
//After the state has been set, if the user wants to update the state, they must use the setState():
handleChange = (e) =>{
let newCount = e.target.value.length
this.setState({
count: this.state.onGoing + newCount,
caption: e.target.value
})
}
After being exposed to both, I definitely understand how Class Components can be extremely simple if used correctly; however, I believe I am most comfortable with functional components as they utilize hooks. The useEffect() hook is extremely useful and another reason why I prefer functional components. As seen in the code below:
useEffect(async() => {
const result = await fetch(API)
const data = await result.json()
setSushis(data)
console.log(data)
},[])
useEffect() is being used to call in an asynchronous function and setting the state of Sushi. The interesting part about the useEffect() hook is the last part, the ,[]) at the end. What that means is that the asynchronous function (or whatever is within the useEffect() hook, will fire off every time there is a change within the givin array ,[]) which in this case is nothing.