React 一个 JavaScript 库初建项目

React 是一个 JavaScript 库

准备开发环境

1，官方脚手架工具 create-react-app

所需工具：terminal，node（版本大于6.5），npm

npm install create-react-app -g

2，创建项目

create-react-app my-first-react(项目名)

出现如下问题，需要清理缓存，再重新创建项目
npm ERR! Unexpected end of JSON input while parsing near'...o\nVtTUbD09BUh97gjN08'
npm ERR! A complete log of this run can be found in:

npm cache clean --force
create-react-app my-first-react(项目名)

在控制台terminal输入指令

cd my-project 进入项目

cat package.json 查看package文件

npm start 启动本地开发服务器

项目文件说明

Readme ：项目说明文档

package.json：项目依赖、命令

public公共文件

index.html：主页 root节点是程序的主入口

src文件

app文件与样式文件

新建组件(使用es6的语法)

1，src文件夹下，创建Welcome.js

2，引入依赖 import

import React from 'react';

3，新建类 extends React.component

class Welcome extends React.Component {
    
    
}

4，新建render(){}方法，显示结果

return <h1> Hello React</h1>

5，导出整个类

export default Welcome

class Welcome extends React.Component {
    
    
    render(){
    
    
        return <h1> Hello React</h1>
    }
}
export default Welcome

6，把Welcome component挂载到节点上

打开index.js，使用ReactDOM进行挂载

react component 中的 render方法
ReactDOM.render(jsx-element, real-dom):
- jsx-element --> real-dom

#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome from './Welcome.js';
ReactDOM.render(
  <React.StrictMode>
    <Welcome />
  document.getElementById('root')
);
serviceWorker.unregister();

jsx：js语法扩展

具有js的全部功能

return <h1>hello react</h1>
//返回的是jsx，既不是js也不是html

jsx的属性className=class；htmlFor=for，为了防止和es6的关键字冲突

基本语法

在花括号内直接添加 JavaScript表达式

表达式是一个产生结果值的式子
JavaScript中的表达式通常由常量、变量和运算符等组成。
表达式的结果值有多种类型，比如数值型、字符串型或布尔型等，因此也有算术表达式、字符串表达式或逻辑表达式之分。

比如，1+2*3 //是算术表达式

“abc”+“123” //是字符串表达式

9<10&&3>=2 //是逻辑表达式

表达式是一个相对的概念，在表达式中可以含有若干个子表达式，比如1+23这个表达式中23就是一个子表达式，而且表达式中的一个常量或变量也可以看作是一个表达式。

例：{’String’} 直接输出
{12 + 2}计算后可直接输出
{[1, 2, 3]}类似Repeat

创建一个List实现Repeat

Render(){
    
    
    const todoList = [‘Learn React’, ‘Learn Redux’] 
    Return(
        <div>
        <h1> Hello React</h1>
        <ul>
            {
    
    
                todoList.map(item =>
                    <li>{
    
    item}</li> 
                )
            }
        </ul>
        </div>
    )
}

实现三元表达式

Render(){
    
    
    const isLogin = true
    return(
        <div>
        <h1>Hello React</h1>
    	    {
    
    isLogin ? <p>你已经登录</p> :<p>请登录</p>}
        </div>
    )
}

两个特殊属性

class------className

for------htmlFor

其他属性与HTML属性一致