React 组件基础介绍

基本概念：一个组件就是用户界面的一部分，可以有自己的逻辑和外观，组件之间可以互相嵌套、复用多次。每个组件就是一个首字母大写的函数，内部存放了组件的逻辑和试图UI，渲染组件只需要把组件 当成 标签 书写。App 可以视为最大的组件。

  

// function Button() {
//   return <button>点击我</button>;
// }//箭头函数形式，与上面等价
const Button = () => {return <button>点击我</button>;
};function App() {return (<div className="App">{/* 自闭和 */}<Button />{/* 成对标签 */}<Button></Button></div>);
}export default App;

三种基础样式控制方式 

1、行内写法，注意react中，类名是className 而不是 class

//行内写法
function App() {return (<div className="App"><span style={{color: 'red',fontSize: '50px'}}>Hello World</span></div>);
}export default App;

//行内样式写法的一种优化方式
//把style抽离为一个对象变量const style = {color: 'red',fontSize: '50px'
}function App() {return (<div className="App"><span style={style}>Hello World</span></div>);
}export default App;

2、通过className类名控制，将样式抽离为.css文件 

 

//App.jsimport './index.css'function App() {return (<div className="App"><span className="hello">Hello World</span></div>);
}export default App;//index.css
.hello {color: red;font-size: 20px;
}

3、tailwindCSS