8 | 这个是about
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-10src嵌套路由/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 |
5 | import {BrowserRouter} from 'react-router-dom'
6 | //引入组件
7 | import App from './App.jsx'
8 |
9 | ReactDOM.render(
10 |
11 |
13 | ,document.getElementById("root"))
14 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-10src嵌套路由/pages/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Hader extends Component {
4 | render() {
5 |
6 | return (
7 |
React Router Demo
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-10src嵌套路由/pages/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import Message from './message/message'
3 | import News from './news/news';
4 | import MyNavLink from '../../components/MyNavLink/myNavLink'
5 | import {Switch,Route,Redirect} from 'react-router-dom'
6 | export default class home extends Component {
7 | render() {
8 | return (
9 |
10 |
Home组件内容
11 |
12 |
13 |
14 | {/* react中路由的注册是有顺序的，因此在匹配的时候也是按照这个顺序进行的，因此会先匹配父组件中的路由 */}
15 | News
16 |
17 |
18 | Message
19 |
20 |
21 |
22 |
26 |
27 |
7 |
8 | news001
9 | news002
10 | news003
11 |
12 |
9 |
12 | )
13 | }
14 | }
15 |
16 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/component/hello/hello.jsx:
--------------------------------------------------------------------------------
1 | import React,{Component}from 'react'
2 | import hello from './hello.module.css'
3 |
4 | export default class Hello extends Component{
5 | render() {
6 | return (
7 | Hello
8 | )
9 | }
10 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/component/hello/hello.module.css:
--------------------------------------------------------------------------------
1 | .title{
2 | background-color: red;
3 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/component/test/test.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-1第一个多组件程序/component/test/test.jsx
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/component/welcom/welcom.css:
--------------------------------------------------------------------------------
1 | .title{
2 | color: antiquewhite;
3 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/component/welcom/welcom.jsx:
--------------------------------------------------------------------------------
1 | import React,{Component} from 'react';
2 | import './welcom.css'
3 | export default class Welcome extends Component{
4 | render(){
5 | return(
6 | Welcome
7 | )
8 | }
9 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-1第一个多组件程序/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(Document
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/App.css:
--------------------------------------------------------------------------------
1 | /*base*/
2 | body {
3 | background: #fff;
4 | }
5 |
6 | .btn {
7 | display: inline-block;
8 | padding: 4px 12px;
9 | margin-bottom: 0;
10 | font-size: 14px;
11 | line-height: 20px;
12 | text-align: center;
13 | vertical-align: middle;
14 | cursor: pointer;
15 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
16 | border-radius: 4px;
17 | }
18 |
19 | .btn-danger {
20 | color: #fff;
21 | background-color: #da4f49;
22 | border: 1px solid #bd362f;
23 | }
24 |
25 | .btn-danger:hover {
26 | color: #fff;
27 | background-color: #bd362f;
28 | }
29 |
30 | .btn:focus {
31 | outline: none;
32 | }
33 |
34 | .todo-container {
35 | width: 600px;
36 | margin: 0 auto;
37 | }
38 | .todo-container .todo-wrap {
39 | padding: 10px;
40 | border: 1px solid #ddd;
41 | border-radius: 5px;
42 | }
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import './App.css'
4 | import Footer from './component/footer/footer'
5 | import Header from './component/header/header'
6 | import List from './component/list/list'
7 |
8 | class App extends Component{
9 |
10 | state={todos:[
11 | {id:1,name:"吃饭",done:true},
12 | {id:2,name:"睡觉",done:false},
13 | {id:3,name:"打代码",done:true},
14 | ]}
15 |
16 |
17 | //添加相应的事情
18 | code = (value)=>{
19 | //如果想要子组件中的值传递给父组件，就可以给子组件一个函数，子组件在调用函数的时候，将值作为参数传递过去
20 |
21 | const {todos} = this.state;
22 | let p = {id:(todos.length+1),name:value,done:false}
23 | this.setState({todos:[p,...todos]});
24 | }
25 |
26 |
27 | //根据id,修改状态中是否被选中
28 | checked = (id,checked) =>{
29 | const {todos} = this.state;
30 | // todos.map((todo)=>{
31 | // if(todo.id == id){
32 | // todo.done = checked;
33 | // }
34 | // return null;
35 | // })
36 | // this.setState({todos:[...todos]})
37 | const newTodo = todos.map((todo)=>{
38 | if(todo.id === id){
39 | return {...todo,done:checked};
40 | }
41 | return todo;
42 | })
43 | this.setState({todos:newTodo})
44 |
45 | }
46 |
47 | //点击删除按钮，删除其中一行
48 | deleteById =(id)=>{
49 | const {todos} = this.state;
50 | // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
51 | const newTo = todos.filter((todo)=>{
52 | return todo.id !== id
53 | })
54 | this.setState({todos:newTo})
55 | }
56 |
57 | //全选
58 | choseAll = (done)=> {
59 | const {todos} = this.state
60 |
61 | const newTo = todos.map((todo)=>{
62 | return {...todo,done};
63 | })
64 | this.setState({todos:[...newTo]})
65 | }
66 |
67 |
68 | //删除选中的内容
69 | Alldelete = () =>{
70 | const {todos} = this.state;
71 | // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
72 | const newTo = todos.filter((todo)=>{
73 | return todo.done !== true
74 | })
75 | this.setState({todos:newTo})
76 | }
77 |
78 |
79 | render(){
80 | return (
81 |
82 |
83 |
84 | {/*注意：传递参数的属性名称不能是关键字，比如delete*/}
85 |
86 |
87 |
88 |
89 |
35 |
36 | {/*注意不能使用defaultChecked,这个只能在初始化的时候执行一次，并且如果使用checkede就必须添加onChange*/}
37 |
39 |
40 | 已完成{sum} / 全部{todos.length}
41 |
42 | 清除已完成任务
43 |
44 | );
45 | }
46 | }
47 |
48 | export default Footer;
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/header/header.css:
--------------------------------------------------------------------------------
1 | /*header*/
2 | .todo-header input {
3 | width: 560px;
4 | height: 28px;
5 | font-size: 14px;
6 | border: 1px solid #ccc;
7 | border-radius: 4px;
8 | padding: 4px 7px;
9 | }
10 |
11 | .todo-header input:focus {
12 | outline: none;
13 | border-color: rgba(82, 168, 236, 0.8);
14 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
15 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import PropType from 'prop-types'
3 | import './header.css'
4 |
5 | export default class Header extends Component {
6 |
7 | static propTypes = {
8 | code:PropType.func.isRequired
9 | }
10 |
11 |
12 | handleKeyUp = (event) =>{
13 | const {target,keyCode} = event
14 | //keyCode:是键盘点击的那一个键值，13代表着回车2
15 | //判断是否是回车
16 | if(keyCode !== 13) return
17 | //判断这个输入是否空
18 | if(target.value.trim() === ''){
19 | alert("输入的不能为空");
20 | return
21 | }
22 | this.props.code(target.value);
23 | target.value = "";
24 | }
25 |
26 | render() {
27 | return (
28 |
29 |
31 | )
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/item/item.css:
--------------------------------------------------------------------------------
1 | /*item*/
2 | li {
3 | list-style: none;
4 | height: 36px;
5 | line-height: 36px;
6 | padding: 0 5px;
7 | border-bottom: 1px solid #ddd;
8 | }
9 |
10 | li label {
11 | float: left;
12 | cursor: pointer;
13 | }
14 |
15 | li label li input {
16 | vertical-align: middle;
17 | margin-right: 6px;
18 | position: relative;
19 | top: -1px;
20 | }
21 |
22 | li button {
23 | float: right;
24 | display: none;
25 | margin-top: 3px;
26 | }
27 |
28 | li:before {
29 | content: initial;
30 | }
31 |
32 | li:last-child {
33 | border-bottom: none;
34 | }
35 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/item/item.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import './item.css'
3 |
4 | export default class Item extends Component {
5 |
6 | state = {mouse:false}
7 |
8 | //鼠标移入移出的回调
9 | handleMouse = (flag) =>{
10 | return () =>{
11 | this.setState({mouse:flag});
12 | }
13 | }
14 | //勾选以及取消勾选的id
15 | show =(id)=>{
16 | return (event)=>{
17 | this.props.createCheck(id,event.target.checked);
18 | }
19 | }
20 |
21 | //删除按钮
22 | handleDelete = (id) => {
23 | return () =>{
24 | // confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
25 | // 如果访问者点击"确定"，此方法返回true，否则返回false。
26 | // 如果直接使用confrim会提示错误，因此使用window.confrim
27 | if(window.confirm('确认删除吗？')){
28 | this.props.deleteById(id);
29 | }
30 | }
31 | }
32 |
33 | render() {
34 | const {id,name,done} = this.props;
35 | const {mouse} = this.state;
36 |
37 | return (
38 |
39 |
40 | {name}
42 |
43 | 删除
44 |
45 | )
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/list/list.css:
--------------------------------------------------------------------------------
1 |
2 | /*main*/
3 | .todo-main {
4 | margin-left: 0px;
5 | border: 1px solid #ddd;
6 | border-radius: 2px;
7 | padding: 0px;
8 | }
9 |
10 | .todo-empty {
11 | height: 40px;
12 | line-height: 40px;
13 | border: 1px solid #ddd;
14 | border-radius: 2px;
15 | padding-left: 5px;
16 | margin-top: 10px;
17 | }
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/component/list/list.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropType from 'prop-types'
3 | import Item from '../item/item'
4 | import './list.css'
5 |
6 | class List extends Component {
7 |
8 | //对接收的参数做限制,限制不能为空以及参数的类型
9 | static propTypes = {
10 | todos:PropType.array.isRequired,
11 | show:PropType.func.isRequired,
12 | deleteById:PropType.func.isRequired,
13 | }
14 |
15 | render() {
16 | const {todos} = this.props;
17 | console.log(this.props.show)
18 | return (
19 |
20 |
21 | {
22 | todos.map((todo)=>{
23 | return
27 | );
28 | }
29 | }
30 |
31 | export default List;
--------------------------------------------------------------------------------
/11-脚手架/hello/11-2 todoList/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(Document
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-3 配置代理/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-3 配置代理/src/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-3 配置代理/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import axios from 'axios'
4 | import './App.css'
5 |
6 | class App extends Component{
7 |
8 | click = () =>{
9 | //3000-->到5000会有跨域问题 开启一个代理，解决跨域的问题
10 | //相当于在3000的机器上放置一个代理，发送一个请求之后，会先判断3000这个服务上是否有这个服务，如果有直接就返回，如果没有就去5000去找，
11 | //经过这个代理转发到5000这个机器上。
12 | axios.get('http://localhost:3000/students').then(
13 | result => {console.log("这个成功",result.data)},
14 | error => {console.log("失败",error)}
15 | )
16 | }
17 |
18 | render(){
19 | return (
20 |
21 | 点击我
22 |
23 |
24 | )
25 | }
26 | }
27 |
28 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-3 配置代理/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(Document
7 |
11 |
12 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-4 github请求案例 axios/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-4 github请求案例 axios/src/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-4 github请求案例 axios/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import Header from './header/header';
4 | import List from './list/list'
5 |
6 | class App extends Component{
7 |
8 | state = {
9 | Git:[],
10 | isFrist:true,
11 | isLoad:false,
12 | isError:''
13 | }
14 |
15 | // gitHub = (value) =>{
16 | // this.setState({Git:value})
17 | // }
18 |
19 | updateAppState = (stateObj) =>{
20 | this.setState(stateObj)
21 | }
22 |
23 | render(){
24 | //通过 ...将状态中的全部赋值过去
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 | }
35 |
36 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-4 github请求案例 axios/src/header/header.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-4 github请求案例 axios/src/header/header.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-4 github请求案例 axios/src/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import axios from 'axios';
3 | export default class Header extends Component {
4 |
5 | search = () =>{
6 | //const {value} = this.KeyValue;
7 | //连续解构赋值，拿到this下面的KeyValue中的value,并进行重命名为KeyWord
8 | const {KeyValue:{value:keyWord}} = this;
9 |
10 | //在搜索之前设置,搜索的开始，结束第一次展示
11 | this.props.updateAppState({isFrist:false,isLoad:true})
12 |
13 | //切记在配置代理了之后一定需要添加相应的路径
14 | axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
15 | success => {
16 | this.props.updateAppState({Git:success.data.items,isLoad:false});
17 | },
18 | error => {
19 | this.props.updateAppState({isError:error.message,isLoad:false});
20 | }
21 | )
22 | }
23 |
24 | render() {
25 | return (
26 |
34 | )
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-4 github请求案例 axios/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(
14 | {
15 | //因为不能在JSX语法中使用if，只能是表达式，所以可以是有用三元运算符进行判断。
16 | isFrist ?
欢迎进入页面 :
17 | isLoad ?
正在搜索页面 :
18 | isError !== ''?
{isError} :
19 | //注意传递过来的一定是一个数组，不能是一个对象
20 | //要不然初始化的时候对象就是 undefined 在遍历的时候就会出错
21 | Git.map((git)=>{
22 | return (
23 |
29 | )
30 | })
31 | }
32 |
33 |
34 |
Document
7 |
11 |
12 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/public/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-5 github请求案例 pusub/public/src/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/public/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import Header from './header/header';
4 | import List from './list/list'
5 |
6 | class App extends Component{
7 |
8 | state = {
9 | Git:[],
10 | isFrist:true,
11 | isLoad:false,
12 | isError:''
13 | }
14 |
15 | // gitHub = (value) =>{
16 | // this.setState({Git:value})
17 | // }
18 |
19 | updateAppState = (stateObj) =>{
20 | this.setState(stateObj)
21 | }
22 |
23 | render(){
24 | //通过 ...将状态中的全部赋值过去
25 | return (
26 |
27 |
28 |
29 |
30 |
31 |
32 | )
33 | }
34 | }
35 |
36 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/public/src/header/header.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-5 github请求案例 pusub/public/src/header/header.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/public/src/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import axios from 'axios';
3 | export default class Header extends Component {
4 |
5 | search = () =>{
6 | //const {value} = this.KeyValue;
7 | //连续解构赋值，拿到this下面的KeyValue中的value,并进行重命名为KeyWord
8 | const {KeyValue:{value:keyWord}} = this;
9 |
10 | //在搜索之前设置,搜索的开始，结束第一次展示
11 | this.props.updateAppState({isFrist:false,isLoad:true})
12 |
13 | //切记在配置代理了之后一定需要添加相应的路径
14 | axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
15 | success => {
16 | this.props.updateAppState({Git:success.data.items,isLoad:false});
17 | },
18 | error => {
19 | this.props.updateAppState({isError:error.message,isLoad:false});
20 | }
21 | )
22 | }
23 |
24 | render() {
25 | return (
26 |
34 | )
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/public/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(
14 | {
15 | //因为不能在JSX语法中使用if，只能是表达式，所以可以是有用三元运算符进行判断。
16 | isFrist ?
欢迎进入页面 :
17 | isLoad ?
正在搜索页面 :
18 | isError !== ''?
{isError} :
19 | //注意传递过来的一定是一个数组，不能是一个对象
20 | //要不然初始化的时候对象就是 undefined 在遍历的时候就会出错
21 | Git.map((git)=>{
22 | return (
23 |
29 | )
30 | })
31 | }
32 |
33 |
34 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/src/header/header.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-5 github请求案例 pusub/src/header/header.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/src/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import axios from 'axios';
3 | import PubSub from 'pubsub-js'
4 |
5 | export default class Header extends Component {
6 |
7 | search = () =>{
8 | //const {value} = this.KeyValue;
9 | //连续解构赋值，拿到this下面的KeyValue中的value,并进行重命名为KeyWord
10 | const {KeyValue:{value:keyWord}} = this;
11 |
12 | //在搜索之前设置,搜索的开始，结束第一次展示
13 | PubSub.publish("getSate",{isFrist:false,isLoad:true})
14 |
15 | //切记在配置代理了之后一定需要添加相应的路径
16 | axios.get(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
17 | success => {
18 | PubSub.publish("getSate",{Git:success.data.items,isLoad:false})
19 | },
20 | error => {
21 | PubSub.publish("getSate",{isError:error.message,isLoad:false})
22 | }
23 | )
24 | }
25 |
26 | render() {
27 | return (
28 |
36 | )
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-5 github请求案例 pusub/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(
27 | {
28 | //因为不能在JSX语法中使用if，只能是表达式，所以可以是有用三元运算符进行判断。
29 | isFrist ?
欢迎进入页面 :
30 | isLoad ?
正在搜索页面 :
31 | isError !== ''?
{isError} :
32 | //注意传递过来的一定是一个数组，不能是一个对象
33 | //要不然初始化的时候对象就是 undefined 在遍历的时候就会出错
34 | Git.map((git)=>{
35 | return (
36 |
42 | )
43 | })
44 | }
45 |
46 |
47 |
Document
7 |
11 |
12 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-6 github请求案例 fetch/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-6 github请求案例 fetch/src/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-6 github请求案例 fetch/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import Header from './header/header';
4 | import List from './list/list'
5 |
6 | class App extends Component{
7 |
8 |
9 |
10 |
11 | render(){
12 | //通过 ...将状态中的全部赋值过去
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default App
--------------------------------------------------------------------------------
/11-脚手架/hello/11-6 github请求案例 fetch/src/header/header.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-6 github请求案例 fetch/src/header/header.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-6 github请求案例 fetch/src/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | // import axios from 'axios';
3 | import PubSub from 'pubsub-js'
4 |
5 | export default class Header extends Component {
6 |
7 | search = async() =>{
8 | //const {value} = this.KeyValue;
9 | //连续解构赋值，拿到this下面的KeyValue中的value,并进行重命名为KeyWord
10 | const {KeyValue:{value:keyWord}} = this;
11 |
12 | //在搜索之前设置,搜索的开始，结束第一次展示
13 | PubSub.publish("getSate",{isFrist:false,isLoad:true})
14 |
15 |
16 |
17 | // fetch(`http://localhost:3000/api1/search/users?q=${keyWord}`).then(
18 | // resolve =>{
19 | // //关注分离原则，先判断网络是不是成功
20 | // console.log("网络链接成功",resolve);
21 | // //在通过json获取数据
22 | // return resolve.json(); //获取数据
23 | // },
24 | // reject =>{
25 | // console.log("网络链接失败",reject);
26 | // }
27 | // ).then(
28 | // resolve =>{
29 | // console.log(resolve);
30 | // }
31 | // )
32 |
33 | try {
34 | //链接网络,获取成功的返回值
35 | const wang = await fetch(`http://localhost:3000/api1/search/users?q=${keyWord}`)
36 | //通过成功的返回值，获取数据 json()只是获取json文件
37 | //还有其他获取的方法，但是这些方法只能使用一个
38 | const users = await wang.json();
39 | // const wang2 = await wang.clone(); 将返回的成功结果复制一份
40 | //提取出数据中想要的结果
41 | console.log(users.items);
42 | } catch (error) {
43 |
44 | }
45 |
46 |
47 | }
48 |
49 | render() {
50 | return (
51 |
59 | )
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-6 github请求案例 fetch/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 | //引入组件
5 | import App from './App.jsx'
6 |
7 | ReactDOM.render(
27 | {
28 | //因为不能在JSX语法中使用if，只能是表达式，所以可以是有用三元运算符进行判断。
29 | isFrist ?
欢迎进入页面 :
30 | isLoad ?
正在搜索页面 :
31 | isError !== ''?
{isError} :
32 | //注意传递过来的一定是一个数组，不能是一个对象
33 | //要不然初始化的时候对象就是 undefined 在遍历的时候就会出错
34 | Git.map((git)=>{
35 | return (
36 |
42 | )
43 | })
44 | }
45 |
46 |
47 |
15 |
20 |
21 |
22 |
23 | {/*
About
24 |
Home */}
25 | {/* RouteBrowserRouterr:就是利用H5推出的history身上的API
26 | HashRouter:就是利用#,也就是锚点 hash值
27 | */}
28 |
29 | {/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
30 | 这是因为Link相当于是把标签写死了，不能去改变什么。
31 | */}
32 | {/*
About
33 |
Home */}
34 |
35 | {/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
36 |
About
37 |
Home
38 |
39 |
40 |
41 |
42 |
43 | {/* 注册路由，也就是写对应的关系 */}
44 |
45 |
46 |
47 |
48 |
49 |
50 |
8 | 这个是about
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-7 src_router_MyNavLink/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 |
5 | import {BrowserRouter} from 'react-router-dom'
6 | //引入组件
7 | import App from './App.jsx'
8 |
9 | ReactDOM.render(
10 |
11 |
13 | ,document.getElementById("root"))
14 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-7 src_router_MyNavLink/pages/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Hader extends Component {
4 | render() {
5 |
6 | return (
7 |
React Router Demo
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-7 src_router_MyNavLink/pages/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class home extends Component {
4 | render() {
5 | return (
6 | 这个是home
7 | )
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-8src路由样式丢失/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-8src路由样式丢失/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-8src路由样式丢失/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import {Route,Switch} from 'react-router-dom'
4 | import About from './components/about/about'
5 | import Home from './pages/home/home'
6 | import Header from './pages/header/header'
7 | import MyNavLink from './components/MyNavLink/myNavLink';
8 |
9 | class App extends Component{
10 |
11 | render(){
12 | //通过 ...将状态中的全部赋值过去
13 | return (
14 |
15 |
20 |
21 |
22 |
23 | {/*
About
24 |
Home */}
25 | {/* RouteBrowserRouterr:就是利用H5推出的history身上的API
26 | HashRouter:就是利用#,也就是锚点 hash值
27 | */}
28 |
29 | {/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
30 | 这是因为Link相当于是把标签写死了，不能去改变什么。
31 | */}
32 | {/*
About
33 |
Home */}
34 |
35 | {/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
36 |
About
37 |
Home
38 |
39 |
40 |
41 |
42 |
43 | {/* 注册路由，也就是写对应的关系 */}
44 | {/* 路由可以匹配多个路径,因此可以展示多个组件，但是按道理应该只匹配一个即可，而且多个匹配会很耗费性能
45 | Switch:就可以保证路由在匹配到第一个路径之后，就不和继续向下走。 */}
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
8 | 这个是about
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-8src路由样式丢失/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 |
5 | import {BrowserRouter} from 'react-router-dom'
6 | //引入组件
7 | import App from './App.jsx'
8 |
9 | ReactDOM.render(
10 |
11 |
13 | ,document.getElementById("root"))
14 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-8src路由样式丢失/pages/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Hader extends Component {
4 | render() {
5 |
6 | return (
7 |
React Router Demo
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-8src路由样式丢失/pages/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class home extends Component {
4 | render() {
5 | return (
6 | 这个是home
7 | )
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-9src精准匹配以及Redirect/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/11-9src精准匹配以及Redirect/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/11-9src精准匹配以及Redirect/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import {Route,Switch,Redirect} from 'react-router-dom'
4 | import About from './components/about/about'
5 | import Home from './pages/home/home'
6 | import Header from './pages/header/header'
7 | import MyNavLink from './components/MyNavLink/myNavLink';
8 |
9 | class App extends Component{
10 |
11 | render(){
12 | //通过 ...将状态中的全部赋值过去
13 | return (
14 |
15 |
20 |
21 |
22 |
23 | {/*
About
24 |
Home */}
25 | {/* RouteBrowserRouterr:就是利用H5推出的history身上的API
26 | HashRouter:就是利用#,也就是锚点 hash值
27 | */}
28 |
29 | {/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
30 | 这是因为Link相当于是把标签写死了，不能去改变什么。
31 | */}
32 | {/*
About
33 |
Home */}
34 |
35 | {/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
36 |
About
37 |
Home
38 |
39 |
40 |
41 |
42 |
43 | {/* 注册路由，也就是写对应的关系 */}
44 | {/* 路由可以匹配多个路径,因此可以展示多个组件，但是按道理应该只匹配一个即可，而且多个匹配会很耗费性能
45 | Switch:就可以保证路由在匹配到第一个路径之后，就不和继续向下走。 */}
46 |
47 |
48 | {/* exact={true}：开启严格匹配的模式，路径必须一致 */}
49 |
50 | {/* Redirect:如果上面的都没有匹配到，就匹配到这个路径下面 */}
51 |
53 |
54 |
55 |
56 |
57 |
8 | 这个是about
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-9src精准匹配以及Redirect/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 |
5 | import {BrowserRouter} from 'react-router-dom'
6 | //引入组件
7 | import App from './App.jsx'
8 |
9 | ReactDOM.render(
10 |
11 |
13 | ,document.getElementById("root"))
14 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-9src精准匹配以及Redirect/pages/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Hader extends Component {
4 | render() {
5 |
6 | return (
7 |
React Router Demo
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/11-9src精准匹配以及Redirect/pages/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class home extends Component {
4 | render() {
5 | return (
6 | 这个是home
7 | )
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/11-脚手架/hello/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/11-脚手架/hello/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hello",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.11.9",
7 | "@testing-library/react": "^11.2.3",
8 | "@testing-library/user-event": "^12.6.2",
9 | "axios": "^0.21.1",
10 | "prop-types": "^15.7.2",
11 | "react": "^17.0.1",
12 | "react-dom": "^17.0.1",
13 | "react-scripts": "4.0.1",
14 | "web-vitals": "^0.2.4"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test",
20 | "eject": "react-scripts eject"
21 | },
22 | "eslintConfig": {
23 | "extends": [
24 | "react-app",
25 | "react-app/jest"
26 | ]
27 | },
28 | "browserslist": {
29 | "production": [
30 | ">0.2%",
31 | "not dead",
32 | "not op_mini all"
33 | ],
34 | "development": [
35 | "last 1 chrome version",
36 | "last 1 firefox version",
37 | "last 1 safari version"
38 | ]
39 | }
40 | }
41 |
42 |
43 |
--------------------------------------------------------------------------------
/11-脚手架/hello/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Document
7 |
11 |
12 |
--------------------------------------------------------------------------------
/11-脚手架/hello/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xzlaptt/React/c1a208047e148499f3193fe994a4764f26e4f456/11-脚手架/hello/src/App.css
--------------------------------------------------------------------------------
/11-脚手架/hello/src/App.jsx:
--------------------------------------------------------------------------------
1 | //创建外壳组件APP
2 | import React,{Component} from 'react'
3 | import {Route,Switch,Redirect} from 'react-router-dom'
4 | import About from './components/about/about'
5 | import Home from './pages/home/home'
6 | import Header from './pages/header/header'
7 | import MyNavLink from './components/MyNavLink/myNavLink';
8 |
9 | class App extends Component{
10 |
11 | render(){
12 | //通过 ...将状态中的全部赋值过去
13 | return (
14 |
15 |
20 |
21 |
22 |
23 | {/*
About
24 |
Home */}
25 | {/* RouteBrowserRouterr:就是利用H5推出的history身上的API
26 | HashRouter:就是利用#,也就是锚点 hash值
27 | */}
28 |
29 | {/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值，如果不添加默认是active
30 | 这是因为Link相当于是把标签写死了，不能去改变什么。
31 | */}
32 | {/*
About
33 |
Home */}
34 |
35 | {/*将NavLink进行封装，成为MyNavLink,通过props进行传参数，标签体内容是props特殊的一个属性，叫做children */}
36 |
About
37 |
Home
38 |
39 |
40 |
41 |
42 |
43 | {/* 注册路由，也就是写对应的关系 */}
44 | {/* 路由可以匹配多个路径,因此可以展示多个组件，但是按道理应该只匹配一个即可，而且多个匹配会很耗费性能
45 | Switch:就可以保证路由在匹配到第一个路径之后，就不和继续向下走。 */}
46 |
47 |
48 | {/* exact={true}：开启严格匹配的模式，路径必须一致 */}
49 |
50 | {/* Redirect:如果上面的都没有匹配到，就匹配到这个路径下面 */}
51 |
53 |
54 |
55 |
56 |
57 |
8 | 这个是about
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/src/index.js:
--------------------------------------------------------------------------------
1 | //引入核心库
2 | import React from 'react'
3 | import ReactDOM from 'react-dom'
4 |
5 | import {BrowserRouter} from 'react-router-dom'
6 | //引入组件
7 | import App from './App.jsx'
8 |
9 | ReactDOM.render(
10 |
11 |
13 | ,document.getElementById("root"))
14 |
--------------------------------------------------------------------------------
/11-脚手架/hello/src/pages/header/header.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | export default class Hader extends Component {
4 | render() {
5 |
6 | return (
7 |
React Router Demo
8 | )
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/11-脚手架/hello/src/pages/home/home.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import Message from './message/message'
3 | import News from './news/news';
4 | import MyNavLink from '../../components/MyNavLink/myNavLink'
5 | import {Switch,Route,Redirect} from 'react-router-dom'
6 | export default class home extends Component {
7 | render() {
8 | return (
9 |
10 |
Home组件内容
11 |
12 |
13 |
14 | {/* react中路由的注册是有顺序的，因此在匹配的时候也是按照这个顺序进行的，因此会先匹配父组件中的路由 */}
15 | News
16 |
17 |
18 | Message
19 |
20 |
21 |
22 |
26 |
27 |
7 |
8 | news001
9 | news002
10 | news003
11 |
12 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
66 |