react覚書
作り込まれて複雑なreactソースになすすべがないため、
100ぶんの１くらいは理解に努めるために書いてみました。
Reactの最小単位の型
- ソース内容
react-lesson
└ src/
│ ├ components
│ │ App.js
│ index.js
└ index.html
index.htmls
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<!-- idを指定してください -->
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
// 以下に指定されたコードを貼り付けてください
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Hello World</h1>
<p>一緒にReactを学びましょう！</p>
</div>
);
}
}
コンポーネントの理解と追加(作成と表示)
Language.js
// Reactをインポートしてください
import React from 'react';
// Languageクラスを定義してください
class Language extends React.Component {
render() {
return(
<div className='language-item'>
<div className='language-name'>HTML & CSS</div>
<img className='language-image' src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg' />
</div>
)
}
}
App.js
import React from 'react';
// Languageコンポーネントをインポートしてください
import Language from './Language'
class App extends React.Component {
render() {
return (
<div>
<h1>言語一覧</h1>
<div className="language">
{/* Languageコンポーネントを呼び出してください */}
<Language/>
</div>
</div>
);
}
}
export default App;
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
stylesheet.css
html {
font: 100% / 1.5 "Lato", "Hiragino Maru Gothic Pro", "Meiryo UI", Meiryo, "MS PGothic", sans-serif;
background: #f9fbfe;
}
h1, h2, h3, h4, h5, h6, p, div {
color: #2b546a;
font-weight: normal;
}
h1 {
font-size: 1.5rem;
}
body {
margin: 0;
padding: 0;
}
h1 {
padding-top: 40px;
text-align:center;
}
p {
text-align:center;
}
.language {
height: 400px;
width: 810px;
padding: 0 70px;
margin: auto;
}
.language-item {
width: 240px;
height: 250px;
background: #ffffff;
margin: 15px;
float: left;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
border-radius: 3px;
position: relative;
}
.language-name {
position: absolute;
left: 0;
right: 0;
top: 40px;
margin: auto;
text-align: center;
}
.language-image {
position: absolute;
left: 0;
right: 0;
bottom: 40px;
margin: auto;
height: auto;
width: 60%;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('root'));