React-快速搭建一套react项目

最新推荐文章于 2024-04-12 12:37:15 发布

一毛五

最新推荐文章于 2024-04-12 12:37:15 发布

阅读量553

点赞数

分类专栏： javaScript 文章标签： react

原文链接：https://me.csdn.net/daxiazouyizou

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（一）基础项目搭建

看过一个人写的react学习，非常系统，循序渐进，可以说看过他的文章，想不会都难。我现在在他的基础上，总结适合我自己看懂的React学习之路。
React官方中文文档地址： https://doc.react-china.org/

首先，安装node和npm，这里不写具体方法。
接下来我们快速搭建一个react项目。
淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org

第一步：全局安装create-react-app脚手架工具

npm install -g create-react-app

第二步：利用脚手架创建一个react项目

create-react-app my-react   //创建my-react项目

my-react为自己的项目名称
第三步：cd my-react 进入项目

cd my-react

npm init -y  	//初始化项目
npm install react react-dom react-router-dom  //安装依赖包

安装依赖包，初步利用到react, react-dom, react-router-dom。
npm获取有些耗时间，这里建议大家使用淘宝团队的cnpm。

React组件与数据传递知识

React框架的一大特色就是它通过组件化的方式来构建和渲染前端页面，了解过React基础知识的小伙伴应该知道，React框架采取的是虚拟的DOM，也就是说，在呈现实际的Web页面之前，首先编排出虚拟化的DOM元素，在确定了要显示的内容和显示方式后，再将HTML页面渲染出来。

了解了组件之后，就需要理解“Props”和“State”的用法。首先来介绍State，State按照字面意思理解为状态，其代表着组件本身的属性，State中可以储存许多内容、参数，需要注意的是，State中的属性只能在组件内部声明和使用。

而Props是上一层的组件传递给下一层的参数，比如：有两个组件，“main”和“view”，main是上一层的组件，view被包含在main当中，是main的子组件，那么main组件就可以把参数通过Props传递给view组件。这一过程是不可逆的，无法从view传回到main，也就涉及到了React框架的单向数据流的特性。

在vs Code打开代码，可以看到目录结构

public文件夹下index.html为入口页面。

删掉src目录下的所有文件，创建一个index.js。
内容如下：

import React from "react";
import ReactDOM from 'react-dom'

ReactDOM.render(
	<h1>hello world</h1>,
	document.getElementById('root')
)

上面的两行适用于引入react以及react-dom中的内容，是React框架的基础依赖包，就像地基一样，其中，ReactDOM提供渲染函数，也就是下方这一行所用的函数。

ReactDOM.render函数，就是将其中的内容渲染到上文中讲道德index.html中id为“root”的标签中。其中有两个参数，第一个参数是一个div标签，至于为什么标签能出现在js代码中，各位可以去查找参照JSX和ES6相关知识。

npm start

然后在 localhost:3000/可以看到页面输出了。

我们接着加入组件

在src下建一个components文件夹，创建一个app.js的文件，
src/components/app.js，内容如下：

import React from 'react'

class App extends React.Component{
 	render(){
    	return <div>This is a component</div>
	}
}
export default App;

重新改造src/index.js，内容如下：

import React from "react";
import ReactDOM from 'react-dom'
import App from './components/app'

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

然后就可以在页面上看到输出 This is a component。

下面来介绍State和Props的运用，首先，我们在App.js文件中声明State中的属性，如下所示：

import React from 'react'

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myValue: 'This is my value'
        }
    }
    render() {
        return <div>{this.state.myValue}</div>
    }
}
export default App;

其中，this.state = { text : ‘This is TEXT!’ } 方法就是State的初始化方式，当这个组件被加载的时候，text这个属性就被放到了state中。render函数return的标签中输入 { this.state.text }，“{ }”括号的作用是在标签中使用js语句。

下面来介绍Props的用法，既然要用到Props，就需要再创建一个组件src.components/view.js，将其命名为view。创建view.js文件，内容如下所示：

import React from 'react'

class View extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }
    render() {
        return <div>{this.props.value}</div>
    }
}
export default View;

其构造方式与App组件相似，只是在render函数中return的标签内输入{ this.props.value }，意思就是获取并显示上一个组件传到这个组件的数据中名称为“value”的属性值。
改造src/components/app.js，内容如下：

import React from 'react'
import View from './view';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myValue:路由的使用和页面跳转
        }
    }
    render() {
        return <View value={this.state.myValue}/>
    }
}
export default App;

然后再return里面输入<View />标签，并在其中添加语句 text={ this.props.value }将app.js组件中的value传输到View组件中。
然后就可以看到页面输出 This is my value，虽然和app输出一样，但是这里上通过props传值。

路由的使用和页面跳转

React-Router的中文文档可以参照如下链接：
http://react-guide.github.io/react-router-cn/docs/Introduction.html

在一张页面中，我们该如何去实现页面跳转呢。Router就提供了页面跳转渲染的方法，React应用会根据链接地址去决定要渲染的内容。也就是说，链接地址不再是用于直接跳转，而是告诉React，我需要怎么样的内容，让React进行渲染。

我们删去src目录下的所有文件，创建index.js文件，内容如下：

import React from "react";
import ReactDOM from 'react-dom'
import App from './components/app'

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

然后创建src/components/App.js文件，内容如下：

import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';

class App extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <Route path='/' component={Home}></Route>
                    <Route path='/page1' component={Page1}></Route>
                    <Route path='/page2' component={Page2}></Route>
                </div>
            </Router>
        )
    }
}
export default App;

下面来分析一下，在上方的import中，载入了 BrowserRouter as Router 和 Route，其意思就是从react-router-dom
包中导入Router和Route，BrowserRouter是Router中的一种。

在组件的render函数的return里面，我们可以看到一对<Router>标签包含了三个<Route>标签，每个<Route>标签中都包含了path属性和component属性，path 属性用于储存路径，就是网站主页路径后面的内容，假如网站地址是localhost:3000，那么，locahost:3000后面的字符串就是path属性的内容。（注意，Router只能有一个子组件，所以要把所有Route标签用一个div包裹起来）

然后是 component 属性，其中储存了组件名称，当我们访问特定地址时就会渲染该组件，也可以称其为这一个路由的入口组件，可以由这个组件延伸开来搭建页面。

Home组件的内容如下（src/components/home.js）：

import React from 'react';
class Home extends React.Component{
    render(){
        return(
            <div>home</div>
        )
    }
}
export default Home;

Page1,Page2组件类似，内容为：

import React from 'react';
class Page1 extends React.Component{
    render(){
        return(
            <div>Page1</div>
        )
    }
}
export default Page1;

然后我们就可以来尝试一下访问这些页面，比如，我们在浏览器地址栏中输入localhost:3000/
可以看到：
Home
当我们访问 localhost:3000/page1 的时候就会看到:
Home
Page1

这里会产生一个疑问，为什么我们访问 /page1 路径的时候会渲染Home组件的内容。

这是因为Home组件所在路由的 path为 “/”，而“/page1”开头包含了 “/”，React就会默认渲染Home组件。

如果想在访问其他地址时不显示Home组件，可以在Home组件所在Route标签中加入 exact ，如下：

<Route exact path='/' component={Home}></Route>
<Route path='/page1' component={Page1}></Route>
<Route path='/page2' component={Page2}></Route>

这样一来，当我们访问 localhost:3000/page1 时就不会默认渲染Home组件。

接下来设置传统页面中“超链接”所在地。
在Home组件中做修改：

import React from 'react';
import { Link } from 'react-router-dom'

class Home extends React.Component {
    render() {
        return (
            <div>
                <p>This is home</p>
                <div>
                    <Link to='/page1'><div>跳转至page1</div></Link>
                </div>
                <div>
                    <Link to='/page2'><div>跳转至page2</div></Link>
                </div>
            </div>
        )
    }
}
export default Home;

首先，我们要在上方用 import 引入一个 Link组件，这个组件由react-router-dom内部定义，用于链接跳转，在render函数的return中设置2对Link标签，to后面填写Page1的地址（“/page1/”、“/page1”皆可），并包含跳转链接的文字。

现在，我们访问 localhost:3000/ 可以看到：

This is home

跳转至page1
跳转至page2

React样式设置与CSS引入

CSS样式分为3种形式：

// 1、内联式（行内样式）   直接在标签内部声明样式
<div style=" color:red; font-size:16px ">测试文字</div>  

//2、嵌入式（内部样式）   通过标签名、class或id等方法与标签联系起来设置样式
<style type="text/css">  div{ width: 60px; }  #mydiv{ height: 70px }</style>

//3、外联式（外部样式）  通过引入外部文件来设置样式
 <link rel="stylesheet" type="text/css" href="mystyle.css" />

我们的实例将在Page1这个组件中进行。
内联修改样式
下面将来更改<div>Page1</div>这一标签的样式，与HTML中不同，在React项目中添加css样式的写法如下：

import React from 'react';
class Page1 extends React.Component{
    render(){
        return(
            <div style={{ color: 'red', fontSize: '20px' }}>Page1</div>
        )
    }
}
export default Page1;

如果需要设置多个样式，中间以逗号分隔，不可以是分号。并且类似CSS中的font-size:‘20px’，在这里必须用小驼峰命名，即fontSize:‘20px’，

引入样式
代码如下：

import React from 'react';
class Page1 extends React.Component {
    render() {
        const myStyle = {
            color: 'red',
            fontSize: '20px'
        }
        return (
            <div style={myStyle}>Page1</div>
        )
    }
}
export default Page1;

外部导入

import React from 'react';
require('./myCss.css')

class Page1 extends React.Component {
    render() {
        return (
            <div id='myDiv'>Page1</div>
        )
    }
}
export default Page1;

以上是组件中引入css样式的三种方式。

向服务器请求数据并显示

内容未完待续。。。
—————————————

原文链接1：https://blog.csdn.net/daxiazouyizou/article/details/79743832
原文链接2：https://blog.csdn.net/daxiazouyizou/article/details/79748078
原文链接3：https://blog.csdn.net/daxiazouyizou/article/details/79754021
原文链接4：https://blog.csdn.net/daxiazouyizou/article/details/79758558

一毛五

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React-快速搭建一套react项目

看过一个人写的react学习，非常系统，循序渐进，可以说看过他的文章，想不会都难。我现在在他的基础上，总结适合我自己看懂的React学习之路。首先，安装node和npm，这里不写具体方法。第一步：全局安装create-react-app脚手架工具*[npm install -g create-react-app]:第二步：利用脚手架创建一个react项目create-react-app ...
复制链接

扫一扫