Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
React
入門編
Reactとは
特徴
htmlの描画などに長けたライブラリ
言語
javascript
開発者(管理者)
Facebook
こんなところで使われています
Reactの優れているところ
● シングルページアプリケーションをシンプルで洗練されたコードでかける
●jqueryに比べると比較的スマートに書ける
●デザイナーもコードをhtml/cssに近い形で開発できる
○ HTMLの書き方に近いので、保...
とりあえずHello world
https://tsuchiyagig.github.io/reactsample/helloworld/
解説
<div id="app"></div>
~ reactの読み込み ~
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('app')
);
コンポーネントでHelloworld
https://tsuchiyagig.github.io/reactsample/helloworld1.5/
解説
class Welcome extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
ReactDOM.render(<Welcome />, docum...
名前つきHello world
https://tsuchiyagig.github.io/reactsample/helloworld2/
解説
const user = {
name: 'react'
};
ReactDOM.render(
<h1> Hello, {user.name} World! </h1>,
document.getElementById('app')
);
props(値の受け渡し)
https://tsuchiyagig.github.io/reactsample/helloworld3/
解説
function Welcome(props) {
return <h1>Hello, {props.name} World!</h1>;
}
const element = <Welcome name="react" />;
React...
イベントでreactを発火しよう
https://tsuchiyagig.github.io/reactsample/button
解説
function tick() {
const element = (
<h1>Hello, world!</h1>
);
ReactDOM.render(
element,
document.getElementById('app')
...
簡単なlistを作ってみる
https://tsuchiyagig.github.io/reactsample/list/
解説
- 略 -
function UserGender(props){
var gender = props.gender ? '男' : '女';
return <span className="name">{gender}</span>;...
まとめ
●オブジェクトの分割はかなり設計を考えるとベスト
●現状ではjqueryを使用するのはマストだと思うので、reactとjqueryどちら
で組むかをよく考える
今日の勉強会のソースはここにあります、何かでご活用ください!
https:/...
Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
お問い合わせはこちらから...
Upcoming SlideShare
Loading in …5
×

React入門

1,843 views

Published on

React入門資料を公開
※ 株式会社GIGでは毎月社内勉強会を実施しています

GIG inc.
Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.

テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。

Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める“きっかけ”をつくりつづけます。

■ お問い合せ
https://giginc.co.jp/contact/

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

React入門

  1. 1. React 入門編
  2. 2. Reactとは 特徴 htmlの描画などに長けたライブラリ 言語 javascript 開発者(管理者) Facebook
  3. 3. こんなところで使われています
  4. 4. Reactの優れているところ ● シングルページアプリケーションをシンプルで洗練されたコードでかける ●jqueryに比べると比較的スマートに書ける ●デザイナーもコードをhtml/cssに近い形で開発できる ○ HTMLの書き方に近いので、保守しやすい
  5. 5. とりあえずHello world https://tsuchiyagig.github.io/reactsample/helloworld/
  6. 6. 解説 <div id="app"></div> ~ reactの読み込み ~ ReactDOM.render( <h1>Hello world!</h1>, document.getElementById('app') );
  7. 7. コンポーネントでHelloworld https://tsuchiyagig.github.io/reactsample/helloworld1.5/
  8. 8. 解説 class Welcome extends React.Component { render() { return <h1>Hello world!</h1>; } } ReactDOM.render(<Welcome />, document.getElementById('app')); 先程との違いはrenderまでclassで定義し てあり、htmlがパーツ化されている。 パーツが大きくなってきた場合こちらを 推奨
  9. 9. 名前つきHello world https://tsuchiyagig.github.io/reactsample/helloworld2/
  10. 10. 解説 const user = { name: 'react' }; ReactDOM.render( <h1> Hello, {user.name} World! </h1>, document.getElementById('app') );
  11. 11. props(値の受け渡し) https://tsuchiyagig.github.io/reactsample/helloworld3/
  12. 12. 解説 function Welcome(props) { return <h1>Hello, {props.name} World!</h1>; } const element = <Welcome name="react" />; ReactDOM.render( element, document.getElementById('app') ); htmlのエレメントを定義 この値が受け渡されたらここに表示する を定義 propsを経由しnameに”react”をセットし 表示を行う
  13. 13. イベントでreactを発火しよう https://tsuchiyagig.github.io/reactsample/button
  14. 14. 解説 function tick() { const element = ( <h1>Hello, world!</h1> ); ReactDOM.render( element, document.getElementById('app') ); } document.getElementById('btn').addEventListener('click', tick, false); clickされたときに発火したいreactの描画 を格納しておく
  15. 15. 簡単なlistを作ってみる https://tsuchiyagig.github.io/reactsample/list/
  16. 16. 解説 - 略 - function UserGender(props){ var gender = props.gender ? '男' : '女'; return <span className="name">{gender}</span>; } function UserList(props) { var listHtml = []; for (var userObject of props.userObject) { listHtml.push(<div key={userObject.id}> 名前 : <UserName name={userObject.name} /> 年齢 : <UserAge age={userObject.age} /> 性別 : <UserGender gender={userObject.gender} /> </div>); } return <div>{listHtml}</div>; } var userList = getUserList(); const element = <UserList userObject={userList} />; ReactDOM.render(element, document.getElementById('app')); 各数値を可視化させるための定義 表示用のオブジェクトを定義 各値は定義してあるものを利用する ユーザーリストを取得し受け渡す。
  17. 17. まとめ ●オブジェクトの分割はかなり設計を考えるとベスト ●現状ではjqueryを使用するのはマストだと思うので、reactとjqueryどちら で組むかをよく考える 今日の勉強会のソースはここにあります、何かでご活用ください! https://github.com/Tsuchiyagig/reactsample
  18. 18. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする お問い合わせはこちらから https://giginc.co.jp/contact/

×