React入门
利用npm安装React
命令行中输入：create-react-app 文件名即可生成react框架
cd进入文件目录
npm start启动项目。
建立的是react es6标准！！es5标准不适合此结构。
单项功能组件测试可以在：http://jsfiddle.net/reactjs/69z2wepo/
在网页上创建class时，
class Logo extends React.Component
需要存在。
在框架文件中无所谓。
react框架的功能添加需要进行三步。
1）src目录下，创建.js文件。是主要组件功能代码。例如：
import React, { Component } from 'react';
import './logo.css';
import music from './images/music.png';
class Logo extends React.Component {
render() {
return (
<div className="components-header row">
<img src={music} width="40" alt="" />
<span className="caption">React Music Player</span>
</div>
);
}
}
export default Logo;
2）在同目录下，index.js中添加组件，我在这里理解为注册组件。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // import App from './App'; import RepeatArray from'./Click'; import OnTime from'./Ontime'; import Logo from './Logo'; import registerServiceWorker from './registerServiceWorker'; // ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render(<Logo />, document.getElementById('logo')); ReactDOM.render(<RepeatArray />, document.getElementById('click')); ReactDOM.render(<OnTime />, document.getElementById('ontime')); registerServiceWorker();
3）在public目录下，index.html中调用div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<!-- <div id="root"></div> -->
<div id="logo"></div>
<div id="click"></div>
<div id="ontime"></div>
</body>
</html>
