※当サイトの記事には、広告・プロモーションが含まれます。

ReactのCLIと思われるcreate-react-appでTypeScriptに対応したプロジェクトを作成

japan.cnet.com

 欧州連合EU)のプライバシー規制当局は現地時間12月5日、Meta Platformsが運営する「Facebook」と「Instagram」が、これらのアプリ内での操作に基づくターゲティング広告に同意することを、同アプリを利用する際の条件にしてはならないとする裁定を下したという。The Wall Street JournalWSJ)が報じた

Metaのターゲティング広告モデル、EU規制当局の新たな決定に直面か - CNET Japan

⇧ う~む、業績の悪化と株価暴落のMeta(旧:Facebook)にとって嬉しくない判決ですかね...

Reactとは?

Wikipediaさんに聞いてみる。

React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.

https://en.wikipedia.org/wiki/React_(JavaScript_library)

React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

https://en.wikipedia.org/wiki/React_(JavaScript_library)

⇧ Meta(旧:Facebook)が発祥のJavaScript Frameworkってことかと。

Wikipediaだと、JavaScript Libraryって扱いらしいんだけど、

hackr.io

⇧ 非公式のネットの情報だと、Frameworkって位置づけにされてるんだが、公式の情報だと、

github.com

A declarative, efficient, and flexible JavaScript library for building user interfaces.

https://github.com/facebook/react

JavaScript Libraryってことらしい。

ちなみに、Vue.jsはと言うと、

github.com

Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. 

https://github.com/vuejs/vue 

JavaScript frameworkって扱いですと。

ちなみにAngularはと言うと、

github.com

⇧ もはや、JavaScriptという言葉すら不要と言わんばかりか、web developer's platformであると。

よく、JavaScriptの三大フレームワークって言われてますが、FrameworkなのはVue.jsだけであるってのが真実であると。

とは言え、比較するのに分かり辛いってことなのか、

github.com

⇧ Web Frameworkってカテゴライズしてしまっているのが実情らしい。

ReactとReact Nativeの違い

stackoverflowの回答によると、

stackoverflow.com

ReactJS is a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications. It follows the concept of reusable components.

React Native is a mobile framework that makes use of the JavaScript engine available on the host, allowing you to build mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build reusable components and communicate with native components further explanation

https://stackoverflow.com/questions/34641582/what-is-the-difference-between-react-native-and-react

Both follow the JSX syntax extension of JavaScript. Which compiles to React.createElement calls under the hoodJSX in-depth

Both are open-sourced by Facebook.

https://stackoverflow.com/questions/34641582/what-is-the-difference-between-react-native-and-react

⇧ Web Application向けがReactで、スマホのNative Application向けがReact Nativeってことらしい。

ちなみに、どちらもFacebook発祥ということらしい。

create-react-appという名のCLI

公式のドキュメントっぽいものを確認すると、

github.com

Set up a modern web app by running one command.

https://github.com/facebook/create-react-app

⇧ コマンド1つでReactのアプリケーションを作成、実行できるってことみたいなのですが、

create-react-app.dev

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

https://create-react-app.dev/docs/getting-started

⇧ npxコマンドを使って導入するのを推奨してる模様。

create-react-appってものは、

www.npmjs.com

This package includes the global command for Create React App.

https://www.npmjs.com/package/create-react-app

⇧ npmのライブラリのパッケージとして公開されているようです。

npxとは?

GitHubで公開されてる情報によると、

github.com

npm package executor

https://github.com/npm/npx

⇧ npm packageを実行するものってことだと思うんだけども

stackoverflow.com

NPX

The npx stands for Node Package Execute and it comes with the npm, when you installed npm above 5.2.0 version then automatically npx will installed. It is an npm package runner that can execute any package that you want from the npm registry without even installing that package.

NPM

npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages

https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm

⇧ う~む、違いがよく分からん...

qiita.com

コマンドが完了すると、インストールされたパッケージはグローバルから削除されるので、汚染の心配はありません(記事「Introducing npx: an npm package runner – Kat Marchán – Medium」より)。

npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう - Qiita

www.geeksforgeeks.org

⇧ パッケージをインストールすることなしにパッケージを実行できるのがnpxってことらしい。

ReactでTypeScriptを利用する

というわけで、TypeScript対応のReactプロジェクトを作ってみようということで、

qiita.com

facebook社公式のReactプロジェクト生成ツールである create-react-app が
2018/10/29リリースの v2.1.0 でTypeScriptをサポートするようになりました。

create-react-appで React + Typescript な環境を構築する - Qiita

create-react-app.dev

⇧ 上記サイト様を参考にさせていただきました。

とりあえず、Node.jsがインストールされてるか確認。自分は、Node.jsのバージョン管理ツールのnvm-windowsをインストールしてるので、nvmコマンドでNode.jsの確認してます。

npxについては、npm 5.2.0から同梱されてるらしいので、npmのバージョン確認。

⇧ 大丈夫そうです。

適当なフォルダを作成して、

Reactプロジェクトを作成で。

⇧ ReactのTypeScriptに対応したプロジェクトが作成できたようなので、実行してみます。

ブラウザでReactの雛型が表示されてることを確認。

とりあえず、React + TypeScriptの環境は準備できたということでしょうか。

Vue.jsのVue CLIに該当するのがcreate-react-appってことになるんですかね?

Reactについてもいつか学習せねばですかね。

毎度モヤモヤ感が半端ない...

今回はこのへんで。