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>

 

posted on 2018-01-26 15:00  任性的大萝卜  阅读(189)  评论(0)    收藏  举报

导航