├── .gitattributes
├── .gitignore
├── .idea
├── misc.xml
├── modules.xml
├── react-app.iml
├── vcs.xml
└── workspace.xml
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
└── src
├── index.css
├── index.js
└── index2.js
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/react-app.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
89 |
90 |
91 |
92 | element
93 |
94 |
95 |
96 |
97 |
98 |
99 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | true
113 |
114 | false
115 | true
116 | true
117 |
118 |
119 | true
120 | DEFINITION_ORDER
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 | AngularJS
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
17 | Hello, {formatName(user)}
18 |
19 | );
20 |
21 | //JSX本身其实也是一种表达式
22 | //可传参 可作返回值
23 | function getGreeting(user) {
24 | if(user){
25 | return Hello,{formatName(user)}!
;
26 | }
27 | return Hello , 啊哈哈哈
;
28 | }
29 | //也可以用引号来定义以字符串为值的属性
30 | const element1= ;
31 | //也可以用大括号
32 | const element2 = 
;
33 | //相互嵌套
34 | const element3 =(
35 |
36 |
小龟龟
37 | 你好啊！世界！
38 |
39 | )
40 |
41 | //JSX防注入攻击
42 | // const title = response.potentiallyMaliciousInput;
43 | //直接使用是安全的
44 | // const element4 ={title}
45 |
46 | //JSX代表Objects React.createElement()方法调用
47 | //这两种代码作用是完全相同的
48 | const element6 = (
49 | Hello , world!
50 | );
51 |
52 | const element8 = React.createElement(
53 | 'h1',
54 | {
55 | className:'greeting'
56 | },
57 | 'Hello , world'
58 | )
59 | //React.createElement()首先会进行避免bug的检查
60 | const elay = {
61 | type:'h1',
62 | props:'greeting',
63 | children:'Hello world'
64 | }
65 |
66 | ReactDOM.render(
67 | element3,document.getElementById('root')
68 | )
--------------------------------------------------------------------------------
/src/index2.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 |
5 | //渲染页面
6 | //传入 ReactDOM.render() 方法
7 | function tick() {
8 | const element = (
9 |
10 |
你好，小伙子
11 | 这是一个帅气的小伙子
12 |
13 | );
14 | ReactDOM.render(
15 | element,
16 | document.getElementById('root')
17 | );
18 | }
19 |
20 | function Welcome(props) {
21 | return Hello ,{props.name}
22 | }
23 |
24 | class Welcome extends React.Component{
25 | render(){
26 | return 你好啊小伙子,{this.props.name}
27 | }
28 | }
29 |
30 | //前面渲染的都是dom标签
31 | //也可以自定义用户组件
32 | const element1 = ;
33 | //将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。
34 | function Welcome(props){
35 | return Hello ,{props.name}
36 | }
37 |
38 | const element = ;
39 | ReactDOM.render(
40 | element,
41 | document.getElementById('root')
42 | );
43 |
44 | //注意：组件名称必须以大写字母开头。
45 |
46 | //组合组件
47 | function App(){
48 | return (
49 |
50 |
51 |
52 |
53 | )
54 | }
55 |
56 |
57 |
58 |
59 | ReactDOM.render(
60 | element,document.getElementById('root')
61 | )
--------------------------------------------------------------------------------