React 基础阶段学习计划
React 基础阶段学习计划目的
[*]可以或许创建和利用React组件。
[*]理解并利用State和Props。
[*]掌握事件处理惩罚和表单处理惩罚。
学习内容
情况搭建
安装Node.js和npm
[*]访问 Node.js官网 下载并安装最新版本的Node.js。
[*]打开终端或命令行工具,输入 node -v 和 npm -v 检查是否安装乐成。
利用Create React App搭建项目
[*]打开终端,输入以下命令创建一个新的React项目:npx create-react-app my-app
[*]进入项目目录:cd my-app
[*]启动开辟服务器:npm start
核心概念
JSX语法
[*]JSX是一种JavaScript的语法扩展,允许你在JavaScript中编写类似HTML的元素。
[*]示例:import React from 'react';
function HelloWorld() {
return <h1>Hello, World!</h1>;
}
export default HelloWorld;
组件
[*]函数组件:简朴的组件,通常用于展示数据。import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
[*]类组件:功能更强大的组件,可以管理状态。import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
State和Props
[*]State:组件内部的状态,可以通过this.setState方法更新。
[*]Props:父组件传递给子组件的属性。import React from 'react';
// 子组件
function ChildComponent(props) {
return <p>{props.message}</p>;
}
// 父组件
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = { message: 'Hello from Parent' };
}
render() {
return <ChildComponent message={this.state.message} />;
}
}
export default ParentComponent;
事件处理惩罚
[*]在React中,事件处理惩罚函数通常绑定到组件的方法上。import React, { Component } from 'react';
class EventHandling extends Component {
handleClick = () => {
alert('Button clicked!');
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
export default EventHandling;
表单处理惩罚
[*]React中的表单元素默认是受控组件,即它们的值由React组件的状态控制。import React, { Component } from 'react';
class FormExample extends Component {
constructor(props) {
super(props);
this.state = { name: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ name: event.target.value });
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.name);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.name} onChange={this.handleChange} />
</label>
<button type="submit">Submit</button>
</form>
);
}
}
export default FormExample;
组件生命周期
[*]生命周期方法:组件在不同阶段会触发不同的生命周期方法。
[*]componentDidMount:组件挂载后调用。
[*]componentDidUpdate:组件更新后调用。
[*]componentWillUnmount:组件卸载前调用。
import React, { Component } from 'react';
class LifecycleExample extends Component {
componentDidMount() {
console.log('Component did mount');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component did update');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>Lifecycle Example</div>;
}
}
export default LifecycleExample;
实践项目
个人博客
[*]创建项目:npx create-react-app personal-blog
cd personal-blog
npm start
[*]创建组件:
[*]Header.js:头部组件import React from 'react';
function Header() {
return <header><h1>My Personal Blog</h1></header>;
}
export default Header;
[*]PostList.js:文章列表组件import React from 'react';
const posts = [
{ id: 1, title: 'First Post', content: 'This is the first post.' },
{ id: 2, title: 'Second Post', content: 'This is the second post.' },
];
function PostList() {
return (
<div>
{posts.map(post => (
<div key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</div>
))}
</div>
);
}
export default PostList;
[*]App.js:主组件import React from 'react';
import Header from './Header';
import PostList from './PostList';
function App() {
return (
<div className="App">
<Header />
<PostList />
</div>
);
}
export default App;
气候应用
[*]创建项目:npx create-react-app weather-app
cd weather-app
npm start
[*]安装axios:npm install axios
[*]创建组件:
[*]Weather.js:气候组件import React, { useState, useEffect } from 'react';
import axios from 'axios';
function Weather() {
const = useState(null);
const = useState('');
useEffect(() => {
if (city) {
axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
.then(response => {
setWeather(response.data);
})
.catch(error => {
console.error('Error fetching weather data:', error);
});
}
}, );
return (
<div>
<h1>Weather App</h1>
<input
type="text"
placeholder="Enter city name"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
{weather && (
<div>
<p>Temperature: {weather.main.temp} K</p>
<p>Weather: {weather.weather.description}</p>
</div>
)}
</div>
);
}
export default Weather;
[*]App.js:主组件import React from 'react';
import Weather from './Weather';
function App() {
return (
<div className="App">
<Weather />
</div>
);
}
export default App;
建议
[*]定期回顾:每周花时间回顾本周所学内容,确保知识点牢固掌握。
[*]参与社区:加入React相关的论坛、Slack群组或Discord服务器,与其他开辟者交换心得。
[*]阅读源码:尝试阅读一些简朴的React库的源码,进步代码理解和分析能力。
希望这个学习计划可以或许资助你系统地学习React基础,并通过实践项目巩固所学知识。祝你学习顺遂!
你可以将上述Markdown内容复制到任何支持Markdown的编辑器或平台中,以便于查看和使用。
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]