next.js学习——react入门
Next.js 是一个用于构建全栈 Web 应用程序的 React 框架，所以需要先简单入门下react
初识
使用react的时候需要先引用两个脚本
<script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
还需要引用babel，将jsx代码转换成常规js代码，使得浏览器可以识别
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
此外，您还需要通过将脚本类型更改为来告知 Babel 要转换的代码type=text/jsx
例如
<html><body><div id="app"></div><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>// 注意添加type<script type="text/jsx">const app = document.getElementById('app')const root = ReactDOM.createRoot(app)root.render(<h1>hello</h1>)</script></body>
</html>
react的三个核心概念：component、props、state
组件
React 组件的名称应该大写并且React 组件的使用方式与使用常规 HTML 标签的方式相同，使用尖括号<>来引用
例如
<html><body><div id="app"></div><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><script type="text/jsx">const app = document.getElementById('app')// 定义组件，注意大写function Header(){return <h1>hello gy</h1>;}const root = ReactDOM.createRoot(app)// 引用组件，注意<>root.render(<Header/>)</script></body>
</html>
另外react组件也可以相互嵌套
例如
<html><body><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><div id="app"></div><script type="text/jsx">const app = document.getElementById('app')function Header(){return <h1>Hi gy</h1>}function HomePage(){// 在这里嵌套return (<div><Header /></div>);}const root = ReactDOM.createRoot(app)root.render(<HomePage/>)</script></body>
</html>
属性
添加props例如
<html><body><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><div id="app"></div><script type="text/jsx">// 取出title属性值function Header({title}){console.log(title)return <h1>{title}</h1>}function HomePage(){return (<div>// 定义title属性<Header title="React" /><Header /></div>)}const root = ReactDOM.createRoot(app)root.render(<HomePage />)</script></body>
</html>
其他方式
用点号表示的对象属性，这里参数props可以换成别的
<html><body><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><div id="app"></div><script type="text/jsx">// 使用对象function Header(props){return <h1>{props.title}</h1>}function HomePage(){return (<div><Header title="React" /><Header title="A new title"/></div>)}const root = ReactDOM.createRoot(app)root.render(<HomePage />)</script></body>
</html>
使用模板字面量
<html><body><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><div id="app"></div><script type="text/jsx">function Header({title}){// 注意大括号return <h1>{`aaa ${title}`}</h1>}function HomePage(){return (<div><Header title="React" /><Header title="A new title"/></div>)}const root = ReactDOM.createRoot(app)root.render(<HomePage />)</script></body>
</html>
或者使用方法，例如
<html><body><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><div id="app"></div><script type="text/jsx">function Header({title}){return <h1>{createTitle(title)}</h1>}function createTitle(title){// 这里也可以直接使用三元运算符return title ? title : "none"if(title){return title;}else{return 'none';}}function HomePage(){return (<div><Header /><Header title="A new title"/></div>)}const root = ReactDOM.createRoot(app)root.render(<HomePage />)</script></body>
</html>
list循环
<html><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body><div id="app"></div><script type="text/jsx">const app = document.getElementById('app')function HomePage(){const names = ['Green','Blue',"John"]return (<div><Header title='hello gy'/><ul>// 注意这里的key不能缺少{names.map((name) => (<li key={name}>{name}</li>))}</ul></div>)}function Header({title}){return <div>{title}</div>}const root = ReactDOM.createRoot(app)root.render(<HomePage/>)</script></body>
</html>
状态
通过状态与事件处理程序进行交互
组件是大驼峰命名，事件采用小驼峰命名
例如
<html><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body><div id="app"></div><script type="text/jsx">const app = document.getElementById('app')function HomePage(){return (<div><button onClick={handleClick}>Like</button></div>)}function handleClick(){console.log('click')}const root = ReactDOM.createRoot(app)root.render(<HomePage/>)</script></body>
</html>
hook钩子
useState使用方式
const [index, setIndex] = useState(0);
例如
<html><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body><div id="app"></div><script type="text/jsx">const app = document.getElementById('app')function HomePage(){const [likes,setLikes] = React.useState(0)// 注意方法写在HomePage里面，放外面的话就找不到setLikes函数function handleClick(){setLikes(likes + 1)}return (<button onClick={handleClick}>Likes ({likes})</button>)}const root = ReactDOM.createRoot(app)root.render(<HomePage/>)</script></body>
</html>其他
react中事件交互（文档地址https://react.dev/learn/adding-interactivity）
react中随时间变化的数据称为状态state
创建自己的组件并进行响应，例如
<html><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script><body><div id="app"></div><script type="text/jsx">const app = document.getElementById('app')function App(){return (<ToolBaronPlayMovie = {() => alert('palying')}onUploadImage = {()=>alert('uploading')}/>);}function ToolBar({onPlayMovie,onUploadImage}){return (<div><Button onClick={onPlayMovie}>Play Movie</Button><Button onClick={onUploadImage}>Upload Image</Button></div>);}function Button({onClick,children}){return (<button onClick={onClick}>{children}</button>);}const root = ReactDOM.createRoot(app)root.render(<App/>)</script></body>
</html>报错存在跨域问题
Access to script at 'file:///D:/nextJs/react/App.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: chrome, chrome-extension, chrome-untrusted, data, http, https, isolated-app.解决：
在vscode里安装live server插件,使用的时候，点击html右键选择open with live server