创建react项目

1.安装node

node官网下载地址

LTS比较稳定的版本 current最新的版本
安装完成后

node -v npm -v

输出成功，说明node就安装成功了。

2.创建react脚手架

npx create-react-app my-app --use-npm

cd my-app
npm start

二：工程目录简介

• node_modules：是我们项目所依赖的第三方的包
• public
  • favicon.ico:图标
  • index.html:当前显示的页面
• yarn.lock:项目的依赖包、版本号 不要动
  • readme.md:说明文件
  • package.json: node包文件，可以把你的项目变成一个包

// package.json
{
  "name": "helloworld", #名字
  "version": "0.1.0", #版本
  "private": true, #私有
  "dependencies": { #依赖的包
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.5"
  },
  "scripts": { #指令
    "start": "react-scripts start", #之所以在命令行中可以输入npm run start启动，是因为在这里配置了 它去通过react-scripts工具去启动服务器
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

gitignore:用过用git进行管理，你不想传递到git仓库，可以放到这里。

• src
• index.js:

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

  import.. from是es6提供的模块引入的语法。
  这里所引入的React ReactDOM对应的package.json中dependencies存在的库。

  // PWA progressive web application
  // 通过写网页的形式来写手机app应用
  // 写一个网页，上线到https服务器上，当用户断网的时候，再访问的时候还是能看到之前已经加载好的页面
  import registerServiceWorker from './registerServiceWorker';

三：react中的组件

一个页面如果很复杂，我们写起来很麻烦。但是如果写成一个个可拆分的组件的时候，我们就好管理的多。而且组件的形式也可重用性强。这也就是前端同学经常说的 前端组件化 的含义。

这里再针对于本章说下最基础的jsx语法

• 我们在之前的js返回一般写的是return <div>hello, jianshu</div>，而在jsx中是不加但双引号的。另外，在jsx中，不单单可以引入普通的标签，还可以引入组件。
• 在jsx引入组件的时候，比如引入<App />组件，这里的组件首字母必须要大写，不能是<app />，因为这种jsx语法是不支持的，所以要用jsx语法，首字母必须大写。所以，大写字母开头的话，一般是组件。

从脚手架生成的app.js我们进行分析

// app.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {   // 用es6的语法写了继承
  render() {
    return (
      <div>
         hello, jianshu.
      </div>
    );
  }
}

export default App; //导出操作，正好index.js引入了，所以显示出来了

app.js中render下的<div>也是jsx语法，所以必须引入React，引入之后，才能编译成功。

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

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

ReactDOM是第三方的模块，它有一个方法是render，这个方法帮我们把一个组件挂在dom节点上。这里挂在在root下。

<div id="root">
...
</div>

 创建一个Todolist.js

import React from 'react'; 

function TodoList() {
    //定义各种变量
    let a = 10
    let str = "你好，中国"
    let boo = false  // 三元表达式
    let title = "ooo" // 绑定属性
    let title1 = "111" // 绑定属性
    const h1 = <h1>啦啦啦</h1> // 元素

    //元素数组
    const arr = [
        <h2 key={0}>这是h2</h2>,
        <h3 key={1}>这是h3</h3>,
        <h4 key={2}>这是h4</h4>,
    ]

    //字符串数组
    const arrstr = ['毛利','柯南','小兰','灰原哀']

    //定义一个空数组
    const arrnull = []//const定义必须有初始值

    //注意：react中需要把key添加给被foreach或for 循环直接控制的元素
    arrstr.forEach(item=>{
        const its = <p key={item}>{item}</p>
        arrnull.push(its)
    })


    return (
        <div>
            {/* jsx中添加类要用className 替换 class */}
            <div className="my">
                {a + 2}
                <hr/>
                {str}
                <hr/>
                {boo? '条件为真':'条件为假'}
                <hr/>
                <p title={boo? title:title1}>这是P标签</p>
                <hr/>
                {h1}
                <hr/>
                {/* arr  jsx中的注释*/}
                <hr/>
                {arrstr}
                <hr/>
                {arrnull}
                <hr/>
                {arrstr.map(item=>{return <p key={item}>{item}</p>})}
                <hr/>
                {/* jsx中label标签要用htmlFor替换for循环 */}
                <label htmlFor="ooo">22</label>
            </div>
            <ul>
                <li>学习</li>
                <li>写作</li>
            </ul>
        </div>
    );
  }
  
  export default TodoList; //把自身导出，外部才可以引用。