react项目实践

react项目实践

本实践流程改写自：
https://blog.csdn.net/daxiazouyizou/article/details/79748078
系列文章

1, 参考 https://www.runoob.com/react/react-install.html
完成项目创建，并运行项目看显示效果，注意这里无论是安装还是运行都需要等待较长
时间，

运行好了之后，终端会显示：
local: 本地地址
on your network: 局域网地址（同局域网访问）

前者本地访问链接，后者为同局域网下其他电脑可以通过此链接访问

• 注意这里没有html文件，全部都是js文件

2，删除项目中src文件夹里所有文件，并创建一个新的index.js，并拷贝如下代码到此文件：

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

ReactDOM.render(<div>Hello World！</div>, document.getElementById('root'));

（无需再次运行）重新刷新页面见效果

3，在src目录中创建一个 app.js 文件，内容如下：

import React from 'react';

const App = () => (
<div>This is App</div>
);

export default App;

下方的“export default App;”作用是将App组件发布出去，也就是说其他文件可以通过App这个名称从该文件中获取App组件

改写index.js文件内容,如下所示：

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

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

注意app.js中的组件也可以通过类来定义，效果是一样的

import React from 'react';

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

4，请改写app.js，用如下内容替代，然后看效果

state在组件的用法，state是需要在类里面进行定义的

import React from 'react';

class App extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
text : 'This is TEXT!'
}
}
render(){
return(<div>{this.state.text}</div>)
}
}
export default App;

5，创建View.js文件，用如下内容替代，然后看效果

props无法再组件类里进行改变，是需要通过参数传递进去的

import React from 'react';

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

同时也要改造一下App组件的内容

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

class App extends React.Component {
constructor(props) { //构造函数
super(props);
this.state = {
text : 'This is TEXT!'
}
}
render(){
let text = this.state.text;
return(<View text={text} />)
}
}
export default App;

react中的路由

• react本质上是单页应用，只有一个页面index.js，app.js充当了链接索引，其他文件都是一个个组件，
  链接的转跳本质上就是，就是不同组件显示的替换

更具体的可以见：https://blog.csdn.net/daxiazouyizou/article/details/79754021

6 请去掉view.js文件，请把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';
import Page3 from './Page3';

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

然后，下面依次引入了Home（Home.js）、Page1(Page1.js)、Page2(Page2.js)、Page3(Page3.js)这四个组件

在Home.js

import React from 'react';

class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
</div>
);
}
}

export default Home

Page1-Page3组件类似，内容为：

import React from 'react';

class Page1 extends React.Component{
render(){
return(
<div>
<div>This is Page1!</div>
</div>
);
}
}

export default Page1;

然后看改变效果

7，请在app.js中，根目录对应的链接元素中改为“Route exact path”

然后在Home组件中做如下更改

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

class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
<div>
<Link to="/Page1/" style={{color:'black'}}>
<div>点击跳转到Page1</div>
</Link>
<Link to="/Page2/" style={{color:'black'}}>
<div>点击跳转到Page2</div>
</Link>
<Link to="/Page3/" style={{color:'black'}}>
<div>点击跳转到Page3</div>
</Link>
</div>
</div>
);
}
}

export default Home;

请看更改效果

9，在page1.js文档中做如下改写

import React from 'react';

class Page1 extends React.Component{
render(){
return(
<div>
<div style={{
width:'200px',
height:'80px',
backgroundColor:'yellow',
fontSize:'24px',
textAlign:'center'
}}
>This is Page1!</div>
</div>
);
}
}

export default Page1;

10 去掉page1.js的style修饰，然后在同级目录下创建一个 mystyle.css 文件，内容如下：

#mydiv{
width:200px;
height:80px;
background-color:yellow;
font-size:24px;
text-align:center
}

并在对应位置加入“require”命令

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

class Page1 extends React.Component{
render(){
return(
<div id={"mydiv"}>
<div>This is Page1!</div>
</div>
);
}
}

export default Page1;
看效果是否一样

11 请给此项目增加一个新页面page5,在此页面中输出你的名字，并且在首页设置一个转跳链接。

react的ui组件库：antd

12，参考如下链接，实现一个简单按钮的引入

https://ant.design/docs/react/use-with-create-react-app-cn

13，请尝试实现antd的其他元素，比如

走马灯
https://ant.design/components/carousel-cn/

表格
https://ant.design/components/table-cn/

其他ui组件库，有兴趣的同学可以自己研究下

https://blog.csdn.net/daxiazouyizou/article/details/80196815