React入门 - 概述和演练
react 是什么相信大家都已经百度过了, 我就不再重复啰嗦了. 接下直接来上手入门
一.以下是我认为是React的先决条件。
- 基本熟悉HTML和CSS。
- JavaScript和编程的基础知识。
- 对DOM的基本了解。
- 熟悉ES6语法和功能。
- Node.js和npm全局安装。
二.目标
- 了解基本的React概念和相关术语，例如Babel，Webpack，JSX，组件，道具，状态和生命周期。
- 构建一个非常简单的React应用程序，演示上述概念。
好了 我么你来直接上手设置和安装吧
1.静态html方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello React!!</title>
<!-- 这些是创建项目依赖的包 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<!-- 这里用的babel可以让es6语法在低版本浏览器使用 -->
<script type="text/babel">
// es6语法 这里是创建一个组件
class App extends React.Component {
// 固定写法
render() {
返回要渲染的东西,注意不是字符串 这个是jsx的东西
return <h1> Hello world! </h1>
}
}
// React DOM render()方法将App我们创建的类呈现到rootHTML中的div中。
ReactDOM.render(<App />,document.getElementById("root"))
</script>
</body>
</html>打开就能看到hello React 啦!
2.创建React App
创建react app的方式 其实也分两种 在这里,我们直接用Facebook创建了Create React App,这是一个预先配置了构建React应用程序所需的一切的环境。它将创建一个实时开发服务器，使用Webpack自动编译React，JSX和ES6，自动加载CSS文件，并使用ESLint来测试和警告代码中的错误。
1. 打开命令窗口
依次运行:
npx create-react-app react-tutorial
cd react-tutorial
npm start
运行此命令后，将localhost:3000使用新的React应用程序弹出一个新窗口
这个就相当于是直接拿这个项目结构来用啦 接下来我们就可以在上面改内容啦
如果你对webpack 有webpack-dev-serve 这些有了解 那么这个就很简单了
接下来 我们打开项目 就会看到项目结构,如果你从来都没用过npm 没了解过webpack 那么你应该会很痛苦了
打开，你会看到一个/public和/src目录，与正规一起node_modules，.gitignore，README.md，和package.json。
接下来 我们改src下 的index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello, React!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))回去看 你刚刚没有关闭的页面 你就会发现页面内容改变啦 ,那么恭喜你骚年,你已经入门 react 了
如果对npm webpack 这些还没了解的 那就要下下功夫了
搞好这些 接下来就可以 学习jsx语法了 具体可以上官网看文档 看不懂文档的话 就可以去看看一些博客啦 写的很详细的
我写这个都是为了增强记忆的 可能不是很好 大家原谅原谅 有错误指正
参考:https://www.taniarascia.com/getting-started-with-react/
此为学习笔记---侵权 联系删
1082
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
