前端开发工程师-前端框架和库-React.js_React项目构建与部署.docx

PAGE1

PAGE1

React.js基础

1React环境搭建

在开始React项目之前，首先需要搭建一个适合React开发的环境。这通常包括安装Node.js和npm，以及使用CreateReactApp脚手架来快速创建项目。

1.1安装Node.js和npm

Node.js是一个基于ChromeV8引擎的JavaScript运行环境，npm是Node.js的包管理工具，用于安装和管理Node.js的模块。确保你的系统中已经安装了这两个工具，可以通过在命令行中输入以下命令来检查：

node-v

npm-v

如果命令返回版本号，说明Node.js和npm已经安装成功。

1.2使用CreateReactApp创建项目

CreateReactApp是一个官方提供的脚手架工具，用于快速搭建React项目。在命令行中输入以下命令，可以创建一个名为my-app的React项目：

npxcreate-react-appmy-app

创建完成后，进入项目目录并启动开发服务器：

cdmy-app

npmstart

此时，浏览器会自动打开http://localhost:3000，显示你的React应用。

2React组件与状态

React应用是由多个组件组成的，组件是React的基本构建单元。组件可以有自己的状态和属性，可以响应用户事件，可以渲染子组件，可以与其他组件通信。

2.1组件定义

React组件可以使用函数或类来定义。函数组件是最简单的组件，它只接收props参数，返回要渲染的元素。例如：

//函数组件

functionWelcome(props){

returnh1Hello,{}/h1;

}

类组件需要继承React.Component类，并在render方法中返回要渲染的元素。例如：

//类组件

classWelcomeextendsReact.Component{

render(){

returnh1Hello,{}/h1;

}

}

2.2状态管理

状态是组件的内部数据，可以影响组件的渲染结果。状态的改变会触发组件的重新渲染。例如：

classClockextendsReact.Component{

constructor(props){

super(props);

this.state={date:newDate()};

}

componentDidMount(){

this.timerID=setInterval(

()=this.tick(),

1000

);

}

componentWillUnmount(){

clearInterval(this.timerID);

}

tick(){

this.setState({

date:newDate()

});

}

render(){

return(

div

h1Hello,world!/h1

h2Itis{this.state.date.toLocaleTimeString()}./h2

/div

);

}

}

在这个例子中，Clock组件有一个状态date，它表示当前的时间。componentDidMount方法在组件挂载后开始每秒更新状态，componentWillUnmount方法在组件卸载前停止更新状态。

3Props与State详解

props和state是React组件的两个核心概念，它们分别用于接收外部数据和管理内部数据。

3.1Props

props是组件的属性，用于接收外部数据。props是只读的，组件不能修改props的值。例如：

functionWelcome(props){

returnh1Hello,{}/h1;

}

//使用组件

Welcomename=Sara/

在这个例子中，Welcome组件接收了一个name属性，它的值是”Sara”。

3.2State

state是组件的内部状态，用于管理组件的数据。组件可以修改state的值，这会触发组件的重新渲染。例如：

classCounterextendsReact.Component{

constructor(props){

super(props);

this.state={count:0};

}

incrementCount(){

this.setSta