javascriptすらまともに書いたことのない俺のreact.jsのコードを見てくれ
環境
WSL2 ubuntu20.04LTS
コードの概要
ローカルに立てたサーバーの各API(GET, POST, DELETE)を叩いて
データの登録、削除後に一覧表示をする。
実際の画面の動き
コード
index.html
<!DOCTYPE html>
<html lang="ja" class="bg-dark" style="height: 100%;">
<head>
<title>Reactアプリ</title>
</head>
<body>
<div id="root" class="bg-dark"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { RecipeTable } from './recipeTable';
import RecipeForm from './recipeForm'
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { Col } from 'react-bootstrap';
ReactDOM.render(
<Container>
<Row>
<Col>
<h1 className="text-secondary text-center">My Recipe</h1>
<RecipeForm/>
<RecipeTable/>
</Col>
</Row>
</Container>,
document.getElementById('root')
);
以下でテーブルに一覧表示
recipeTable.js
import React from 'react';
import axios from 'axios';
function checked() {
if(this.classList.contains('checked')){
this.classList.remove('checked')
this.classList.remove('bg-secondary')
}else {
this.classList.add('checked')
this.classList.add('bg-secondary')
}
}
export function ListRecipe() {
.then(res => {
var recipesTable = document.getElementById("recipesTable");
while( recipesTable.rows[ 1 ] ) recipesTable.deleteRow( 1 );
var data = res.data;
for (var i in data){
for (var j in data[i].foods){
data[i].foods[j] = " " + data[i].foods[j];
}
var row = recipesTable.insertRow(-1);
row.classList.add('recipe')
row.onclick = checked;
var id = row.insertCell(0);
var name = row.insertCell(1);
var foods = row.insertCell(2);
id.innerHTML = Number(i) + 1
name.innerHTML = data[i].name +
foods.innerHTML = data[i].foods;
}
})
}
export function RecipeTable() {
ListRecipe();
return (
<table className="table table-dark table-sm" id="recipesTable">
<thead>
<tr>
<th>ID</th>
<th>Recipe Name</th>
<th>Foods</th>
</tr>
</thead>
<tbody id="recipes">
</tbody>
</table>
);
}
以下で登録、削除の処理
recipeForm.js
import React from 'react';
import { ListRecipe } from './recipeTable';
import axios from 'axios';
function recipeForm(){
const submitForm = () => {
var Allfoods = document.getElementsByClassName("food");
var foods = [];
for (var i = 0; i < Allfoods.length; i++){
}
'name': name,
'foods': foods
}, headers)
.then(res => {
console.log(res)
ListRecipe()
}).catch(err => console.log(err));
}
const addForm = () => {
var foods = document.getElementById("foods");
foods.insertAdjacentHTML('beforeend',
'<input type="text" class="form-control mb-2 food"/>')
}
const deleteForm = () => {
var foods = document.getElementById("foods");
var food = document.getElementsByClassName("food");
if (food.length > 1){
foods.lastElementChild.remove();
}
}
const deleteRecipe = () => {
var checkedList = document.getElementsByClassName("checked");
var alert = document.getElementById("alert")
alert.classList.remove("alert")
alert.classList.remove("alert-warning")
alert.innerHTML = ""
if (checkedList.length === 0){
alert.classList.add("alert")
alert.classList.add("alert-warning")
alert.innerHTML = "Please select recipe you want to delete"
}
for (var i = 0; i < checkedList.length; i++){
.then(res => {
console.log(res)
ListRecipe()
}).catch(err => console.log(err));
}
}
return (
<>
<form>
<div className="form-group">
<label className="text-white">new recipe name</label>
<input type="text" className="form-control" id="name"/>
</div>
<div className="form-group" id="foods">
<label className="text-white">food</label>
<button type="button" className="btn btn-secondary
btn-sm mb-1 ml-3" onClick ={addForm}>Add food</button>
<button type="button" className="btn btn-danger
btn-sm mb-1 ml-3" onClick ={deleteForm}>Remove food</button>
<input type="text" className="form-control mb-2 food"/>
</div>
</form>
<div>
<button type="button" className="btn btn-primary
btn-sm mb-3" onClick ={submitForm}>Submit recipe</button>
<button type="button" className="btn btn-danger
btn-sm float-right mb-3" onClick ={deleteRecipe}>Delete recipe</button>
</div>
<div id="alert"></div>
</>
);
}
export default recipeForm;
癖になってんだ BootStrap使うの
