React基本认识：

 

React基本认识：

1、写的代码全部渲染在index.html当中。

2、导入图片：可以直接import图片，然后使用{}进行调用。

3、导出/导入组件：export default 导出函数式组件。

4、函数式的组件使用JSX语法，需要导入React。导入React-dom则是为了渲染页面。

 

组件：

1、函数式组件默认有一个参数props，可以接受传值。

 

es6语法：

1、let定义的变量必须在其被使用的地方之前，否则不会生效。

importReactfrom'react'; importReactDOMfrom'react-dom';   functionClock(props){ return( <div> <h1>现在的时间是{props.date.toLocaleTimeString()}</h1> <h2>这是副标题</h2> </div>   ) }   functionrun(){ ReactDOM.render( <Clockdate={newDate()}/>,document.querySelector('#root') ) }   setInterval(run,1000);

 

 

 

代码范例2  Index.html:

importReactfrom'react'; importReactDOMfrom'react-dom'; import'./App.css'   letstr="现在的时间是："; lettime=newDate().toLocaleTimeString();   letelement=( <div> <h1>helloworld</h1> <h2>{str+time}</h2> </div> )   letman="不发热"; letelement2=( <div> <h1>今天是否需要隔离：</h1> <h2>{man==="发热"?"隔离":"不隔离"}</h2> </div> )   letelement4=( <div> <span>横着趟</span> <span>竖着躺</span> </div> ) letelement3=( <div> <h1>今天是否需要隔离：</h1> <h2>{man==="发热"?<button>隔离</button>:element4}</h2> </div> )   letcolor='bgRed'; letlogo='https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';   letelement5=( <divclassName={color}> <imgsrc={logo}></img> 红色的背景颜色 </div> )   letroot=document.querySelector("#root");   ReactDOM.render(element5,root);