React-jsx、html、css基本知识点

观看视频地址：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';

.
.
.
.
.
.
.
.
.

.
.
.
.
.
.
.
.