front_js_practice

react-api-mirage

Practice using mock server. Using MirageJS for mock server with react.

React ... A JavaScript library for building user interfaces
MirageJS ... An API mocking library for frontend developers

gatsby-api

Try some apis with Gatsby.

NyTimes API
Marvel API

gatsby-material-ui-marvelapi

Practice design using material-ui & api using marvel api.

react-fluentui

dev.to - Getting started with Microsoft Fluent UI and React.js by building a fintech dashboard

yarn add @fluentui/react
yarn add @uifabric/react-cards

nextjs-blog

Reference
- https://nextjs.org/learn/excel/typescript/setup
Command
- initilizing
  - npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"
- add typescript
  - touch tsconfig.json
  - yarn add --dev typescript @types/react @types/node

react-parcel

Reference
- http://kasheight.hatenablog.jp/entry/2019/12/01/190858
Command
- yarn init -y
- yarn add react react-dom
- yarn add --dev parcel-bundler
- gibo dump Node VisualStudioCode >> .gitignore
- yarn start

nextjs_credit_card_form

Reference
Command
- npx create-next-app --example with-typescript nextjs_credit_card_form
- cd nextjs_credit_card_form
- yarn add @zeit/next-sass node-sass

react-chat-example

Reference
- https://codetree.dev/react-websocket-chat-application/
Command
- npx create-react-app react-chat-example --typescript
- npm i express express-ws

react-redux-01

Reference
- https://qiita.com/ragnar1904/items/72631e4476f94057c630
Command
- npx create-react-app react-redux-01 --template typescript
- cd react-redux-01
- yarn add redux react-redux
- yarn add --dev @types/react-redux
- yarn add --dev husky lint-staged prettier

react-redux-02

Purpose
- Task management
Command
- npx create-react-app react-redux-02 --template typescript
- cd react-redux-02
- yarn add redux react-redux
- yarn add --dev node-sass @types/react-redux husky lint-staged prettier

next-redux-spectrum-01

Purpose
- Design Framework ... Spectrum
- State Management Framework ... Redux
- Base ... Next
Command
- npx create-next-app --example with-typescript next-redux-spectrum-01
- cd next-redux-spectrum-01
- yarn add redux react-redux @reduxjs/toolkit redux-logger
- yarn add --dev @types/react-redux @types/redux-logger
- yarn add @adobe/react-spectrum
- yarn add next-compose-plugins @zeit/next-css next-transpile-modules
- yarn add @spectrum-icons/workflow

storybook-tutorial

Reference
Command
- npx create-react-app storybook-tutorial
- npx -p @storybook/cli sb init
- npx degit chromaui/learnstorybook-code/public/font public/font
- npx degit chromaui/learnstorybook-code/public/icon public/icon

next_01

Reference
- Getting started with Tailwind CSS in Next.js | Akhila Ariyachandra
- Documentation Home - Apollo Basics - Apollo GraphQL Docs
Command
- npx create-next-app --example with-typescript next-01
- setting tailwindcss
  - yarn add tailwindcss postcss-preset-env --dev
  - npx tailwindcss init
  - mkdir -p src/styles
  - touch src/styles/index.css
  - touch pages/_app.js
- setting graphql
  - yarn add @apollo/client graphql
- setting for using dotenv
  - yarn add dotenv-webpack --dev

next_02

Reference
- Refactoring landing page with React, NextJS & TailwindCSS - DEV
Command
- npx create-next-app next_02 --use-npm --example https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
- gibo dump VisualStudio Node > .gitignore
- yarn add typescript @types/react @types/node --dev

next_03

Command
- npx create-next-app --example with-typescript next_03
- gibo dump VisualStudio Node > .gitignore
- yarn add @material-ui/core
- yarn add --dev @storybook/react ts-loader css-loader babel-preset-react-app babel-plugin-react-require

tailwind_01

Reference
- TailwindCSS 入門 ~ Utility First + デザインシステムの構築 ~ - Qiita
- 最小手数で始める Tailwind CSS - メドピア開発者ブログ
Command
- yarn init -y
- yarn add tailwindcss
- npx tailswindcss init
- gibo dump VisualStudio Node > .gitignore
- touch tailwind.css
- mkdir public
- touch public/index.html
- yarn build:css
- npx http-server ./public

react-recoil-01

Reference
- Getting Started | Recoil
Command
- npx create-react-app react-recoil-01
- yarn add recoil

react-recoil-02

Reference
- Intro | Recoil
Command
- npx create-react-app react-recoil-02
- yarn add recoil

react-design-pattern-01

Reference
- 綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する - Qiita
- Parcel
Command
- Setup
- Setting TestTool
  - yarn add jest ts-jest @types/jest babel-jest react-test-renderer @testing-library/react @testing-library/react-hooks
- Setting StoryBook
  - yarn add --dev @storybook/cli
  - npx -p @storybook/cli sb init
  - npx start-storybook -p 6006

linnefromice/frontend_js_practice

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages