React框架入门-创建项目、JSX了解
安装react官方脚手架（这里如果没有安装的话需要安装，安装一次即可）
npm install -g create-react-app
创建项目
初始化项目
create-react-app my-project
进入项目
cd my-project
运行项目
npm start
运行项目后打开文件：，可以看到public内存放的是静态文件，src内存放的是代码，index.js是项目的入口文件。
运行项目打开后的结果为下图时，表示运行正常。
这里的整个简单的react就创建好了，可以进行开发。可以发现这个项目内没有发现配置文件，因为项目内都隐藏起来了，如果想打开配置文件，可以运行npm run eject ，但是这个操作是不可逆的，运行之后不会再恢复到之前的状态。不建议运行。
先删除掉除index.js以外的文件。
这里先写一个简单的例子：
index.js
import React from 'react';import ReactDOM from 'react-dom';ReactDOM.render(<h1>Hello,React!</h1>,document.querySelector('#root'));
root是react默认的挂载点，如下图：
项目打包
项目打包，先进入项目目录后
运行
// 1 打包命令npm run build// 2 安装serve的命令，但是如果你安装了就不需要再重复安装// 但是如果你不知道是否安装成功，可以在命令行内打出serve然后运行// 如果没报错就说明你已安装，如果报错提示未安装，就需要运行第2步npm install -g serve// 3 将打包好的项目运行起来serve -s build
这里放一张报错的截图：
这个是安装报错的情况，没安装serve。
JSX
Jsx的全称是Javascript XML，react定义的一种类似XML的JS拓展语法：JS+XML。
本质是React.createElement(component, props, …children) 的语法糖
作用：用来简化创建虚拟DOM
- 写法： var ele =
Hello Jsx!
- 注意1：它不是字符串，也不是HTML/XML标签，不要写引号
- 注意2：它最终产生的是一个JS对象，需要使用 {}运行js表达式
- 注意3：样式类名指定不要用class，要用className（因为class是ES6内定义的关键字，所以这里需要使用className进行区分）
- 注意4：内联样式，要用style={ {key:value}} 的形式去写。
- 注意5：只能有一个根标签。
- 注意6：标签必须闭合。
注意7：标签首字母
- 若字母小写开头，则将标签转为html内同名元素，若html中无该标签对应的同名元素，则报错。
- 若字母大写开头，react就去渲染相应的组件，若组件没有定义，则报错。
标签名任意：HTML标签或者其他标签。
jsx基本概念及例子
JSX是一种js的语法拓展，表面上是HTML，本质上是通过babel转换为js执行，在所有JSX里，我们是可以在 {} 中使用js的语法。
JSX本质是转换为React.createElement在React内部构件虚拟DOM，最终渲染处页面。
举个例子：这个是jsx的写法
class App extends React.Component{render(){return {<div>Hello {this.props.name}, I am {3+4} years old.</div>}}}ReactDOM.render(<App name="React"/>,mountNode)
转换成js的写法：
class App extends React.Component{render(){return React.crehateElement("div",null, // 这里为div的属性"Hello",this.props.name,", I am",3 + 4," year old")}}ReactDOM.render(React.createElement(App, {name: "React"}),mountNode)
jsx的基本用法
主要的
标签内的注释是 {/* 注释内容*/}
这里展示jsx实现变量操作等，具体目录结构
App.css内：
.img{border: 1px solid #f00;}
logo.js内随便找一张将图片即可。
App.js （全部代码）
import React, { Component } from 'react'import logo from "./logo.jpg";import "./App.css";//函数型组件传递props，在这里必须带属性,这用于父子组件数据传递function Welcome1(props) {return (<div>Hello,{props.name}</div>)}export default class App extends Component {//1.当需要状态时，需要构造函数constructor(props){super(props);//2.初始化状态，现在为响应式数据// 每次状态更新都会导致render函数重新执行this.state = {count: 0,date: new Date()}}componentDidMount(){this.timer = setInterval(() =>{//3.更新状态this.setState({date:new Date(), //最简单的更新状态的方式count:this.state.count + 1})//注意1.不能直接改状态//this.state.data = new Date(); //错误的},1000);//注意2.setState()是异步的,需要在后面加一个参数进行异步调用//这个写法是函数写法 setStatethis.setState((prevState,prevProps)=>{return {count :prevState.count + 1}},() => {console.log(this.state.count);})}componentWillUnmount(){clearInterval(this.timer);}formatName(user){return user.firstName+' '+user.lastName;}render() {const name = "123";//jsx本身也是变量const jsx = <p>hello,everyone</p>return (<div>App组件{/* 表达式 */}<h1>{name}</h1><p>{this.formatName({firstName:'tom',lastName:'jerry'})}</p>{/* 属性 */}<img src={logo} style={{width:'100px'}} className="img" alt="11"/>{/* jsx本身也是表达式 */}{jsx}{/* 组件属性传值(父传子) ：传入的属性是只读的，单向数据流 */}<Welcome1 name="tom"></Welcome1>{/* 使用状态 */}<p>{this.state.date.toLocaleTimeString()}</p></div>)}}
在js内class是关键字，在react内均使用className作为额它的类名，没有class。
这个里面包含了jsx的几种简单用法。
只是简单例子运行完成后基本展示如下：
标签内行内样式
注：标签内行内样式的写法：
<img src={logo} style={{width:'100px',fontSize:'30px'}} className="img" alt="11"/>
这里是两层 { {}}，可能学过vue的人知道，这个 使用“Mustache”语法 (双大括号) 的文本插值，用于展示数据。
但是这里不一样，最外层的大括号代表需要在内部写js的表达式，里面大括号表示你需要写关于样式的对象。
具体的值内需要加上 ‘引号’ style={ {width:’100px’,fontSize:’30px’}}
自定义组件
在jsx内的实现：
function Welcome1(props) {return (<div>Hello,{props.name}</div>)}<Welcome1 name="tom"></Welcome1>
这里呢，引入自定义标签，都必须是首字母大写（这里的代码是App.js内的例子代码）。
JSX内只能有js表达式（返回的值有结果），不能有js语句（if,for等）
状态State
在组件内的值不断变化时需要使用到状态
setState用于修改状态这里可以传递你需要更新的对象或者是一个回调函数。
- setState({})
- setState(prev=>({}))
这两种方式，如果你更新的值是基于上一个状态的基础上（值相互依赖），就要使用第二种方法了。
如下，第一个方法的例子：
this.setState({text:"111"})
第二个方法的例子：
this.setState(prevState =>({goods:[...prevState.goods,{id:3,text: prevState.text,price:666}]}))
这里呢，因为setState是异步操作，所以在值改变后不会立即更新。
小灰灰
桃扇骨
港控/mmm°
还没有评论，来说两句吧...