一个框架第一步都是安装，下面先说说是怎么安装的吧！
如何安装react脚手架 以下流程一次安装
① 创建项目 create-react-app my-react（项目的文件名）
② 进入项目 cd my-react
③ npm i redux -s 安装redux （Redux 是 JavaScript 状态容器， 提供可预测化的状态管理。相当于vue的vuex状态管理）
④ npm i react-redux -s 安装redux
React Component 是页面上的组件 (借书的用户)
Store 是存储数据的公共区域(相当于图书馆的管理员)
Action Creators 数据传递的过程(当在图书馆借书的时候说的话做的事)
Reducers 记录本 (还书和借书的地方)
Npm I redux-thunk -s 安装中间件 将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。
⑤ npm i react-router-dom -s 安装react路由
⑥ npm i axios -s 安装axios
⑦ npm i antd -s 安装antd 这个是react框架修改配置环境，以适应antd
⑧ npm i react-app-rewired -D 安装
修改package.json的启动配置
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
⑨安装 npm I babel-plugin-import -D
跟目录创建一个config-overrides.js文件
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env)
{
config = injectBabelPlugin(['import', {
libraryName: 'antd',
libraryDirectory: 'es', style: 'css'
}], config);
return config;
};
接下来就可以创建组件了
Src =>创建一个view （文件夹名称自由取名称，最好就是按照自己项目的页面去取名，方便查找修改eg：home book ）
分别里面要写几个部分就建几个js文件
例如：index.js publicList.js
每个页面必须要写上的代码是：
import React, {Component} from "react";
class Index(注意这个是哪个文件名就引入哪个文件名) extends Component {
render(){ // 相当于vue中的data
// 这里就是要写内容
return …
}
}
export default Index; // 注册组件
在src里面建立一个路由 router 文件夹,里面创建js文件，需要配置路由
// 相当于vue的router.js去配置路由
// 引入react
import React, {Component} from 'react';
// 引入配置路由
import {Switch,Route,Redirect} from 'react-router-dom';
// 引入各个组件
import Index from '../view/index/index'
import About from '../view/about/index'
// 在这里注册
class RouterIndex extends Component{
render () {
return (
<Switch>
{/* 重定向index exact是严格匹配*/}
<Route path="/" exact render={ () => (
<Redirect to="/" />
)}/>
{/* 注册每一个组件的导向路由 */}
<Route path="/index" component={Index}/>
<Route path="/book" component={Book}/>
</Switch>
)
}
}
// 这里是导出
export default RouterIndex
配置完路由，在app.js引入我们配置的名字即可
import React, { Component } from 'react';
// 配置理由的名称
import RouterIndex from "./router/index";
class App extends Component {
render() {
return (
// 在return里面注册，就可显示不同的页面内容
<RouterIndex/>
)
}
}
export default App;
在src的index.js直接可以引入
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {HashRouter} from "react-router-dom"; // HashRouter是#/
import {BrowserRouter} from "react-router-dom";
const store = createStore(reducer,applyMiddleware(thunk));
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
搭建完了就细说一下react的细节吧
-
ReactDOM.render(要渲染的内容，放置内容的容器)
ReactDOM：React框架提供的一个对象容器不能使body
-
允许在js中书写xml
xml中可以包含子元素，但是结构中只能有且仅有一个顶级元素
支持插值表达式
插值表达式：类似ES6中模板字符串 ${表达式}
插值表达式语法：{表达式}
<div> <h1>Hello React!</h1> <h1>Hello React!</h1> <h1>{'小可爱'+'与狗'}</h1> </div>
3.插值表达式
在xml中插入一个表达式（得到一个结果：值）字符串 数字
下面三种类型的值输出空字符（不会报错）布尔值 空 未定义
插值表达式中不能直接输出对象 对象
但是，如果是一个数组对象则是可以的，需要注意的是，React对数组进行转字符作，并且是使用空字符串进行连接：arr.join('')
<div>
<h1>Hello React!</h1>
<h1>Hello React!</h1>
<h1>{'Hello'}</h1>
<h1>{1}</h1>
<h1>{true}</h1>
<h1>{null}</h1>
<h1>{undefined}</h1>
{/*<h1>{ {left: 100} }</h1>*/}
{ [1,2,3] }
</div>
4.jsx属性
Jsx标签也是可以支持属性设置的
基本使用和html/XML类型，在标签上添加属性名 = 属性值，值必须使用””包含 这只是可以直接差值表达式的
注意：
① class：使用className属性来代替
② style：值必须使用对象
var a = 'content'; // 声明一个变量
ReactDOM.render(
<div>
<h1 id="a">Hello React!</h1>
<h1 id={a}>Hello React!</h1>
<h1 className="box">Hello React!</h1>
<h1 style={ {color: 'red'} }>Hello React!</h1>
</div>,
document.getElementById('app')
);
5..react 没有模板语法，插值表达式中只支持表达式，不支持语句：for，if
var users = ['刘伟','莫涛','钟毅'];
var obj = {left: 100, top: 200};
根据数组中的内容生成一个包含结构的新数组
通过数组生成的结构，每一个元素包含有一个key属性，同时这个key属性的值必须是唯一的 对象跟数组的方法不一样
ReactDOM.render(
<div>
<ul>
{
// 数组的调用方式
users.map( (user, index) => {
return <li key={index}>{user}</li> // key是默认的
} )
}
</ul>
<ul>
{
// 对象的调用方式(循坏obj对象)
/*['left', 'top']*/
Object.keys(obj).map( key => {
return <li key={key}>{key} - {obj[key]}</li>
} )
}
</ul>
</div>,
document.getElementById('app')
);
6.函数复用
组件：拥有独立功能的一个模块
React还提供组件的另外一种使用的方式：标签化
标签化：传参，通过标签属性传入的
var users = ['刘伟','莫涛','钟毅'];
var users2 = ['张三','李四','王五'];
function List(props) {
// 使用porps方法去获取数据，然后根据不同的变量名去调用
return props.data.map( ( item, index ) => {
return <li key={index}>{item}</li>
} )
}
ReactDOM.render(
<div>
<ul>
{/*List(users)*/}
<List data={users} a="1" />
</ul>
<ul>
{/*List(users2)*/}
<List data={users2} />
</ul>
</div>,
document.getElementById('app')
);
7.如果一个函数或类作为一个组件去使用的话，那么名称必须首字母大写
如果使用类实现组件，那么必须继承一个父类：React.Compoment
组件类必须实现一个render()的方法
Props：传入的参数必须是用对象下的一个属性props来接收
var users = ['刘伟','莫涛','钟毅'];
var users2 = ['张三','李四','王五'];
class List extends React.Component {
render() {
return this.props.data.map( (item, index) => {
return <li key={index}>{item}</li>
} )
}
}
ReactDOM.render(
<div>
<ul>
<List data={users} />
</ul>
<ul>
<List data={users2} />
</ul>
</div>,
document.getElementById('app')
);
以上就是我对react小小总结，大家一起共同学习。~~
