omas-public

#!/bin/bash

URI='https://shouronbun.com/report1.html'
curl $URI | html2text -utf8 | sed '/^$/d' | sed 's/\*//'

# version3

omas-public

Next.jsの機能

下準備

プロジェクトに以下のディレクトリとファイルを作る

• components
  • header.jsx
  • hero.jsx
  • footer.jsx

omas-public

作って学ぶ Next.js/React Webサイト構築

Chapter 1 React と JSX

1.1 Reactが必要となってきている理由

• (p17) HTML + CSS とJavaScriptの構成からJavaScriptメインへ
• (p18) Reactでのページ作成
• (p19) React要素とJSX

omas-public

import React, { useState, useEffect } from 'react'
import fetchData from './api/fetchData'
const URI = 'https://jsonplaceholder.typicode.com/users'

const Main = props => {
  const [data, setData] = useState(null)
  useEffect(() => {
    const fetchAPI = async () => {
      const data = await fetchData(URI)
      

omas-public

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const fetchData = async (url) => {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error(error);
    return error;

omas-public

import axios from "axios";
import { useState, useEffect } from "react";

const baseURL = "https://jsonplaceholder.typicode.com/users/1";
const print = JSON.stringify

const Item = ({ user }) => (
  <li>{user}</li>
)

omas-public

import { useEffect, useState } from "react"
import ulid from 'ulid'
import axios from 'axios'

// const Item = ({ item, role }) => (

// )

omas-public

const handler = (req, res) => {
  const json = {
    headings: [
      '日付',
      '項目',
      '入金',
      '出金'
    ],
    values: [
      {

omas-public

/*
Baseとなるjsx
*/

const MoneyBook = props => {
  return (
    <>
      <h1>お小遣い帳</h1>
      <table>
        <thead>

omas-public

const identity = v => v
const join = (sep = '\n') => array => array.join(sep)
const split = (sep = ' ') => string => string.split(sep)
const inputs = (file = '/dev/stdin') => {
  const stream = require('fs').readFileSync(file, 'utf-8').trim()
  const toArray = sep => fn => iter => Array.from(split(sep)(iter), fn)
  return {
    readCols: (fn = identity) => toArray(' ')(fn)(stream),
    readRows: (fn = identity) => toArray('\n')(fn)(stream),
    readStream: (fn = identity) => fn(stream),