唉 一点点学咯...

react 文档 中文的！本文参考https://www.taniarascia.com/getting-started-with-react/大伙可以去看原版。

• 创建项目（前提环境啥的就不赘述啦 npm）

  1. npx create-react-app react-demo 安装react环境 及创建项目 react-demo。 (npx: npm 5.2.0后自带了npx功能，npx主要就是依赖不安装在本机也可以使用比如 create-react-app ; npx会在本机查找是否全局安装过此依赖没有则安装最新的存在的话就使用本地。具体使用方法请参考阮一峰老师的文章)
  2. cd react-demo => npm start => 浏览器打开 http://localhost:3000/ ok 初始新建完成。

• 项目目录介绍 参考技术胖大佬(里面很多大佬录制视频哦点赞)

  1. README.md 项目说明 package.json webpack 配置项目包管理。package-lock.json 锁定安装时的版本号，以保证其他人再npm install 时大家的依赖能保证一致。gitignore这个是git的选择性上传的配置文件node_modules 项目的依赖包。public 公共文件，里边有公用模板和图标。src主要代码编写文件。
  2. public=>mainifest.json:移动端配置文件 。 src=>serviceWorker.js: 用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。

话不多说，先来hello world！ 新知识第一步

• 修改下src目录下文件 将除 index.js index.css其他文件删除 编辑index.css文件 将Primitive CSS替换进去。index.js修改如下:

import React, { Component } from 'react'
//等同 上方属于es6 解构赋值
//import React from 'react'
//const Component = React.Component

import ReactDOM from 'react-dom'
import './index.css'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, World!</h1>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

到此在 localhost:3000 应该就可以看见效果了

react中的几乎所有内容都由组件组成，组件可以是类组件或简单组件。 咱开始第一个组件 src 目录下创建 App.js

• src/index.js 如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'))

• src/App.js ：

import React,{Component} from 'react';

class App extends Component{
    render(){
        return(
            <div className="App">
                <h1>Hello React!</h1>
            </div>
        )
    }
}
export default App

保存时 会发现跟上面一样 除了文字。

• 类组件
  1. 新建src/Table.js
src/App.js：

import React,{Component} from 'react';
import Table from './Table';

class App extends Component{
    render(){
        return(
            <div className="container">
                <Table />
            </div>
        )
    }
}
export default App

src/Table.js:

import React, { Component } from 'react'

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

export default Table

---

--end--