【前端】基础学习笔记

CSS Id 和 Class选择器

id选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>

<p id="para1">Hello World!</p>

class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
<style>
.center
{
    text-align:center;
}
</style>

<h1 class="center">标题居中</h1>

你也可以指定特定的HTML元素使用class。p.center {text-align:center;}
<style>
p.center
{
    text-align:center;
}
</style>

<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 

JSX 的语法，它允许 HTML 与 JavaScript 的混写
遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析
JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员

React
ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。将一个 h1 标题，插入 example 节点
React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。

render
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。React 当中的元素事实上是普通的对象
要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：
在一个 HTML 页面中添加一个 id="example" 的 <div>:
将内容渲染到指定组件
<div id="example"></div>
<script type="text/babel">
const element =<h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);
</script>

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
 
ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件

props

首先我们要认识到这样的几个问题;
数据的来源:react的数据是这样的,它像一个瀑布一样,它的数据从一个父组件向它的子组件的方向流下,而且父组件传下去的数据子组件只有自读权限,不能修改父组件传递的数据,
数据的传递方式: props,props可以将父组件的数据传递给子组件
其他函数中，通过this.props获得传入的prop值，还可以使用ES6的结构赋值：（const { test } = this.props 相当于const test = this.props.test）

redux就是一个储存数据的仓库
reducers 接收一state,之后返回一个state

store有两个比较常用的方法
store.dispatch({ type:'GET_ALL', text:data })data就是我们要存入store的数据 这样就是把数据存在仓库里面
store.getState().all就可以得到刚刚储存的数据了

 

 

箭头表达式：左边是传入函数的参数，右边是函数中执行的语句。
x => x+x;
上面的函数相当于
function(x){
    return x+x;
}

var func = x => x * x;                  
// 只有一个表达式的时候可以直接写 x*x；

var func = (x, y) => { return x + y; }; 
// 当参数有两个，则必须使用return语句；

React 组件
1、我们可以使用函数定义了一个组件：
function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}
你也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

 name 属性通过 props.name 来获取。
function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="Runoob"/>;
 
ReactDOM.render(
    element,
    document.getElementById('example')
);