React Flashcards
https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-interview-questions
- React の特徴は何ですか?
・宣言的なView (JSX)
・コンポーネントベースのUI構築
・効率的なレンダリング (仮想DOM)
https://genee.jp/contents/react/#:~:text=Reactは、Webアプリの,開発を実現します。
JSXとは何ですか?
JSX（JavaScript XML）は、JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするものです。JSXの構文はHTMLに似ており、開閉タグ、属性、入れ子要素などがあります。
https://kinsta.com/jp/knowledgebase/what-is-jsx/#jsx
Web ブラウザは JSX を直接読み取ることができますか?
Web ブラウザは JSX を直接読み取ることができません。
これは、これらは通常の JS オブジェクトのみを読み取るように構築されており、JSX は通常の JavaScript オブジェクトではないためです。
Web ブラウザが JSX ファイルを読み取るには、ファイルを通常の JavaScript オブジェクトに変換する必要があります。このために、Babel を使用します
仮想 DOM とは何ですか?
情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOM（プログラム的に作成された仮のDOM）を構築することを指します。そして、構築された仮想DOMの内容を元にHTMLを作成し、実際のDOM(リアルDOM)に同期されます。このプロセスは差分検出処理 (reconciliation)と呼ばれます。
この仮想DOMはリアルDOMに比べ、ページ表示の高速化を実現します。
Angular などの他のフレームワークではなく React を使用する理由は何ですか?
Angular や Vueと比較すると、エコシステム全体の成熟度やコンポーネントの可用性、コミュニティの面ではReactが勝っているかもしれません。また、React はGitやUXPinのような他のプラットフォームやツールとの統合が可能です。
https://www.uxpin.com/studio/jp/blog-jp/angular-vs-react-vs-vue-どのフレームワークを使うべきか？/
ES6 規格と ES5 規格の違いは何ですか?
- Components and Function
// ES5
var MyComponent = React.createClass({
render: function(){
return(<h3>Hello World!</h3>);
}
});
// ES6
class MyComponent extends React.Component{
render(){
return(<h3>Hello World!</h3>);
}
} - require vs import
// ES5
var React = require(‘react’);
// ES6
import React from ‘react’;
ES5とES6の違いをまとめてみた(メモ)
https://qiita.com/rifutan/items/a55f132d4dae7e2f1941
React アプリはどのように作成しますか?
npx create-react-app my-app
cd my-app
npm start
新しい React アプリを作る
https://ja.legacy.reactjs.org/docs/create-a-new-react-app.html
React のイベントとは何ですか?
キーを押す、マウスのクリックなど、ユーザーまたはシステムがトリガーする可能性のあるアクションです。
React イベントの名前は、HTML の小文字ではなくキャメルケースを使用して付けられます。
JSX では、HTML の文字列ではなく関数をイベント ハンドラーとして渡します。
<ボタンを押す={lightItUp} />
React でイベントを作成するにはどうすればよいですか?
class Simple extend ReactComponent {
work(){
alert(“Good Work!”);
}
render(){
return(
<button onClick={this.work}>Do some work!</button>
);
} }
React の合成イベント(SyntheticEvent)とは何ですか?
Synthetic Eventを使えば、各ブラウザのネイティブイベントを全てラップしており、何も意識しなくてもクロスブラウザ対応ができる。
ReactのSyntheticEventとは何なのか
https://udomomo.hatenablog.com/entry/2017/10/14/125704
React でリストがどのように機能するかを説明しなさい
- 順序付けられた形式でデータをリスト表示します
- リストの走査は、map() 関数を使用して行われます。
const names = [‘Kohli’,’’,’’,’’,’’]
const listOfNames = () => {
const listItems = names.map((name) =>
<li key = {name}>
{name}
</li>
);
return (
<ul>{listItems}</ul>
);
}
リストでキーを使用する必要があるのはなぜですか?
- キーは一意の識別子であり、どのアイテムがリストから変更、更新、または削除されたかを識別するために使用されます。
- 毎回すべてのコンポーネントを再レンダリングするのではなく、どのコンポーネントを再レンダリングする必要があるかを判断するのにも役立ちます。したがって、更新されたコンポーネントのみが再レンダリングされるため、パフォーマンスが向上します。
React のフォームとは何ですか?
何らかのデータ更新等を扱うもので「OK」ボタンなどを押したり、というイベント処理が基本になります。
https://react.keicode.com/basics/react-form-basics.php
React でフォームを作成するにはどうすればよいですか?
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ‘’};
this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); }
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert(‘A name was submitted: ‘ + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type=”text” value={this.state.value} onChange={this.handleChange} />
</label>
<input></input>
</form>
);
}
}
https://ja.legacy.reactjs.org/docs/forms.html
React でコメントを書くにはどうすればよいですか?
- 一行コメント
- 複数行のコメント
class App extends Component {
render() {
// single line comment
/*
multi
line
comment
*/
return <h1>Hi! Try edit me</h1>;
}
}
アロー関数とは何ですか? React でどのように使用されますか?
function Hoge1() {
console.log(‘Hoge1’)
}
const Hoge2 = () => console.log(‘Hoge2’)
https://zenn.dev/rgbkids/books/0b75c912d8ac70/viewer/25f0ac
