React入门-8.create-react-app搭建项目框架

news/2025/3/22 0:35:51

之前一直用VUE来进行项目开发。刚刚看了react的生态圈，真的是很厉害。单单脚手架就有传统创建单页面程序的create-react-app，有进行服务器端渲染的Next.js，还有快速创建网站的Gatsby。那就先从create-react-app开始说起。

1. 创建项目

create-react-app是react中最简单的创建单页面程序的方式。在使用它之前先保证你的机器上安装了Node环境，并且Node >= 6 ，npm >= 5.2

# 全局安装create-react-app
$ npm install -g create-react-app# 或 临时安装create-react-app
$ npx create-react-app my-app# 创建项目
create-react-app app02
cd my-app
npm start

这样，一个react单页面程序项目就创建好了。

2. 目录结构

react目录结构更加清晰一下，src是我们编码的主要目录，这里我把一些不是特别重要的数据删除了，整理成如下

那么比较关键代码就是index.js与App.js了，其中，index.js为入口文件，这里导入了react,react-dom,App.js并且在root元素上开始渲染App

index.js

// 导入react react-dom
import React from 'react';
import ReactDOM from 'react-dom';
// 导入全局css
import './index.css';
// 导入根组件
import App from './App';
// 在root元素上渲染根组件
ReactDOM.render(<App />, document.getElementById('root'));

App.js为一个组件，为了创建组件，需要继承创建类，并且继承React.Component，组件中的写法就与我们之前的学到的没什么区别了。如果需要用的css样式可以提前引入。

App.js

import React, { Component } from 'react';
import './App.css';class App extends Component {render() {return (<div className="App"><header className="App-header"><p>hello world</p></header></div>);}
}export default App;

3. 集成react-router

上面的代码中仅仅可以显示出helloworld，要想完成单页面程序的开发，需要在页面中进行页面局部刷新，加载各种子页面。这就就离不开路由。

1) 列表项目

安装react-router-dom

cnpm install react-router-dom --save

2) 定义路由页面
List.js

import React,{Component} from 'react'class List extends Component{render(){return (<h1>this is List</h1>)}
}export default List;

3) 在App.js中引入，并且使用

import React, { Component } from 'react';
import { BrowserRouter as Router,Route ,Link} from 'react-router-dom'import './App.css';
// 加载组件
import List from './List'
import About from './About'class App extends Component {render() {return (<Router><div><h1>App</h1><ul><li><Link to="/list">List</Link></li><li><Link to="/about">About</Link></li></ul><hr/><Route path="/list" component={List} /><Route path="/about" component={About} /></div></Router>);}
}
export default App;