next.js学习——react入门

Next.js 是一个用于构建全栈 Web 应用程序的 React 框架，所以需要先简单入门下react

初识

使用react的时候需要先引用两个脚本

javascript 复制代码

<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代码，使得浏览器可以识别

javascript 复制代码

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

此外，您还需要通过将脚本类型更改为来告知 Babel 要转换的代码type=text/jsx

例如

javascript 复制代码

<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 标签的方式相同，使用尖括号<>来引用

例如

javascript 复制代码

<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组件也可以相互嵌套

例如

javascript 复制代码

<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 例如

javascript 复制代码

<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可以换成别的

javascript 复制代码

<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>

使用模板字面量

javascript 复制代码

<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>

或者使用方法，例如

javascript 复制代码

<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循环

javascript 复制代码

<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>

状态

通过状态与事件处理程序进行交互

组件是大驼峰命名，事件采用小驼峰命名

例如

javascript 复制代码

<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使用方式

javascript 复制代码

const [index, setIndex] = useState(0);

例如

javascript 复制代码

<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

创建自己的组件并进行响应，例如

javascript 复制代码

<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 (
                        <ToolBar
                            onPlayMovie = {() => 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>

报错存在跨域问题

bash 复制代码

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