[react:day1.1] JSXとの出会い
環境
react:day1と同じ
JSXとは
- Reactを使う上でJSXを使用しなくても書けるがJSXを使えば簡潔に書ける
- FaceBookが開発した独自のタグ技術
- HTMLみたいに見えるが違う。XML likeに書ける
- HTML5のタグは全部使用できる
- カスタムコンポーネント（オリジナルのタグ名）が使える
JSX無しでHelloWorld
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
var element = React.createElement('h1', { className: 'greeting'}, 'Hello, world');
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();
JSX有りでHelloWorld
*変わるのはelement変数のみ
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// var element = React.createElement('h1', { className: 'greeting'}, 'Hello, world');
var element = <h1 className='greeting'>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();
JSX使えない属性は以下に置き換えて使う
class => className
for => htmlFor
JSX内で変数を使う
JSX内で{}を使用すればjsを使用できる
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
var userName = 'ozepon';
var element = <h1 className='greeting'>Hello, {userName}</h1>;
ReactDOM.render(element, document.getElementById('root'));
registerServiceWorker();
カスタムコンポーネント(自作のタグ)を作成してみる
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// custom componentを作成
class HelloWorld extends Component {
render() {
return (
<h1 className='greeting'>Hello, CustomComponent!</h1>
);
}
}
// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();
Spread演算子でkey-valueを展開できる
Spread演算子とは「...」のことである
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// custom componentを作成
var option = {
className: 'greeting'
}
class HelloWorld extends Component {
render() {
return (
// optionをspread演算子で展開
// classにgreetingが設定される
<h1 {...option}>Hello, CustomComponent!</h1>
);
}
}
// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();
spread演算子を上書きできる
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// custom componentを作成
var option = {
className: 'greeting'
}
class HelloWorld extends Component {
render() {
return (
// optionをspread演算子で展開した後に
// classNameで上書き。classにはgreeting2が設定される
<h1 {...option} className='greeting2'>Hello, CustomComponent!</h1>
);
}
}
// custom componentを呼び出して描画
ReactDOM.render(<HelloWorld/>, document.getElementById('root'));
registerServiceWorker();
とりあえず後で出会うことになるもの
- props
- state
アプリ作りながら触ったほうが理解が早そうなので保留
Author And Source
この問題について([react:day1.1] JSXとの出会い), 我々は、より多くの情報をここで見つけました https://qiita.com/ozepon/items/25bc87e12c7de31e4784著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .