前端新手村React入门基础篇!!!

前言

React是由FackBook开发并于2013年开源的一种用于构建用户界面的JavaScript库.自其开源以来,React已经成为了最流行的前端库之一,对于开发者而言掌握React是一项非常有价值的技能,在本文中将会带领小白进入React的世界!.

React基础语法

创建一个react项目,我们可以通过使用vite构建工具来帮助我们快速构建

npm init vite

创建完之后,我们可以看到main.jsx文件(jsx表示 js + xml 表示直接把html写在js中)

App.jsx文件被当做子组件引入,并展示在一个id为root的DOM节点上.这里的import ReactDOM from 'react-dom/client'导入了一个特定的模块,这个模块提供了创建根渲染器的方法createRoot，这个方法用于创建一个渲染器实例,这个渲染器可以用来渲染React组件到DOM.

我们来到App.jsx中,清除原有的代码.对于React开发,其本质就是在写js代码,所以学好react就要熟练掌握js.

先创建好代码框架

function App(){
  return (
    
  )
}

export default App

第一个,我们如何在react使用自己创建的变量.比如我在函数App外面创建变量const name = '张三'.在vue中我们是使用两个花括号{{name}}的对吧，然后我们再react中则是使用一个花括号.

第二个,假设我们有一个数组,我们如何一一在页面打印这个数组的内容.

既然写react就是在写js，所以想要打印数组的内容,我们可以直接循环遍历出来就好了.

第三个,如何使用条件语句,在react中条件语句只能写三元运算符或者逻辑运算符,if就无法使用了.

第四个,在react中css样式怎么写,在react中我们类名,就不能使用class了,而是使用className,且样式要写内联样式

如果给整个title，添加样式的话,我们就需要引入外部的css文件,给整个title添加样式

第五个,如何绑定事件,就好比最常见的一个点击事件,我们都知道直接使用onclick，但是在react中是将这个c给大写了onClick,我们可以看到点击按钮后打印了clicked

我们都知道,在每一个事件都会存在一个事件参数,那么如果我们同时传入事件参数以及一个变量,会如何呢？我们会发现我们都不用点击就会直接触发了,且打印的结果不是我们期望的那样,此时我们就需要借助回调函数来辅助我们,解决这个问题.

回调函数将事件参数e，传给handlerClick,{handlerClick(e,100)}}>click me

React子组件的写法

在react中，写子组件就是写一个函数.有两种方法可以写子组件,第一种就是常规的写函数

第二种则是,创建一个类,让这个类去继承,我们引入的React中的React.Component

那么如何使用子组件,使用子组件的话,也就是直接当做一个标签来使用.

还有一个小问题就是react只允许存在一个父节点

这里两个div都是各自的父节点,但是这样是不可以的,所以为了解决这个问题,我们可以使用幽灵节点解决这个问题,所谓的幽灵节点也就是添加一个<>这个节点不会被渲染.

组件传值

子组件给父组件传值就跟vue的方式差不多,直接通过标签传给子组件

那么在子组件这个函数体中就会接受一个参数props,它里面会包含父组件给子组件传过去的值.所以在子组件中,我们可以之间通过props获取到父组件给子组件传的值.

那么子组件如何给父组件传值呢？父组件会先给子组件一个篮子,那么子组件如果想要父组件传值,那么就向这个篮子里放，然后父组件向篮子里面取就好了.

这里我们创建了一个篮子

const getDataFromSon = (data)=>{
        console.log(data);
        Setmsg(data)
    }

然后把篮子给到子组件

那么我们在子组件中就是将我们要给的值给到这个函数就好了.

function  Son(props){
    
    const msg = '子组件的数据'

    return (
        <div>
            <p>子组件--{props.num}p>
            <button onClick={()=>{props.foo(msg)}}>发送给父组件button>
        div>
    )
}

这里我们将msg设置成了响应式数据,通过引入useState

 const [msg,Setmsg] = useState()

useState这个函数返回的一定是一个数组,第一个值是响应式数据,第二个值是一个用于修改响应式数据的函数.

文章到这里也就告一段落了,希望对各位有所帮助,感谢大家阅读！！