React-jsx、html、css基本知識點，react-jsxcss

React-jsx、html、css基本知識點，react-jsxcss

觀看視頻地址：https://www.imooc.com/video/9819

環境搭建：

方法：使用creacte-react-app進行快速構建
create-react-app是來自於 Facebook，通過該命令可以無需配置就能快速構建 React 開發環境。

執行$ cnpm install -g create-react-app，安裝

執行$ create-react-app my-app構建自己的項目

$ cd my-app/
$ npm start
瀏覽器開啟http://localhost:3000，顯示如下：

.
.
.
.
.
.
.
.

知識點整理JSX

使用react不僅要引入react.js，還需引入JSXTransformer.js。
因為react所使用了JSX文法，需要通過JSXTransformer.js去解析成js文法才能被瀏覽器理解執行。
JSX中的X是指的XML，JSX是JS的文法塘。文法塘指電腦語言中添加的某種文法，這種文法對語言的功能並沒有影響，但是更方便程式員使用。類似的有TypeScript等。
而且JSX文法不能直接寫在script標籤內。
之前所用的script標籤的type屬性要要做變化：

  <script type="text/javascript"></script>

改為:

    <script type="text/jsx"></script>

JSX 用來聲明 React 當中的元素。
JSX文法帶來的最大的便利是可以直接在JS裡面寫類DOM的結構，而不是原聲的那樣產生字串然後替換的方式去渲染元素。

.
.
一個例子：
HTML：

 <div id="root">    <!-- This element's contents will be replaced with your component. --></div> 

JS：

 function Welcome(props) {  return <h1>輸出, {props.text}</h1>;}const element = <Welcome text="abcdefg" />;ReactDOM.render(  element,  document.getElementById('root'));

輸出：

react是通過.render()方法來渲染元素，第一個參數為要渲染的元素，第二個為被插入的目標元素。
剛才例子的頁面結構：

可以看到div#root中包含著react渲染出來的內容。
.
.
.
.

component 組件聲明：

組件最簡單的聲明方法是使用JavaScript函數：

 function Welcome(props) {  return <h1>輸出, {props.text}</h1>;} 

它接收一個“props”對象並返回了一個React元素。

也可以使用ES6 class 來定義一個組件:

 class Welcome extends React.Component {  render() {    return <h1>輸出, {this.props.text}</h1>;  }} 

2種方法在react輸出相同。
.
.
要注意的是： 組件名稱必須以大寫字母開頭。
就像上一個例子中，<div />表示一個DOM標籤，但 <Welcome /> 表示一個組件，並且在使用該組件時你必須定義或引入它。

React元素可以是是DOM標籤，也可以是使用者自訂的組件。當是使用者自訂群組件時，會將JSX屬性作為單個對象“props”傳遞給該組件。例如第一個例子中的{props.text}。
.
組件也可以相互嵌套，可以在一個組件的輸出中引用其它組件：

 function Text(props) {  return <h1>Hello, {props.name}</h1>;}function App() {  return (    <div>      <Text name="first" />      <Text name="the one" />      <Text name="last" />    </div>  );}ReactDOM.render(  <App />,  document.getElementById('root')); 

但是要注意的是， 組件的傳回值中只能有一個根項目 ，即不能出現任意的同級根項目，如下：

  function App() {  return (      <Text name="first" />      <Text name="the one" />  );}

是錯誤的。所以要用一個<div>來包裹所有<Text />元素。
.
.

JSX-Style

如果想要改變調整一下樣式，首先會想到加個class名，一般會這樣寫：
CSS:

  .font-red{        color:red;  }

JS:

  function Text(props) {  return <h1 class="font-red">Hello, {props.name}</h1>;} 

會出現如下警告：

.
這是因為在JS的ES6標準中class已經成為了一個關鍵字，不能直接在js裡寫class="font-red"要寫成className="font-red"。

或者也可以直接寫內聯樣式，且格式也有所變化，如果直接按HTML的方式寫：

  function Text(props) {  return <h1 style='color:red;'>Hello, {props.text}</h1>;}

會報錯：

報錯說明：在react中行內樣式不是以字串的形式來表示的，需要以樣式對象來表示，樣式對象的key值就是樣式名的駝峰標識寫法，值為樣式的值，所以正確寫法應為：

  function Text(props) {  return <h1 style={{color:'red'}}>Hello, {props.text}</h1>;}

這樣會正常輸出：

上面雙括弧的寫法可能不太直觀，換一種寫法還可以寫為：

function Text(props) {  var styleObj = {    color:'red'，    fontSize:'35px'  };  return <h1 style={styleObj}>Hello, {props.text}</h1>;}

可以看出外層的第一個括弧是表示執行JS運算式，第二個括弧為對象括弧。

而駝峰命名的寫法就像原聲JS裡一樣，如：

  document.getElementById('root').style.fontSize = '35px';

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.