1.JSX構文
JSX は、HTML 構文を JavaScript コードに直接追加し、ブラウザーで実行される前にトランスレーターを介して純粋な JavaScript に変換します。実際の開発では、JSX は製品のパッケージ化段階で純粋な JavaScript にコンパイルされます。これにより副作用は発生せず、コードがより直観的で保守しやすくなります。コンパイル プロセスは、Babel の JSX コンパイラによって実装されます。
React18以前の書き方は以下の通りです。
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div>11111
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("root"))
しかし、react18 バージョンを使用すると、このようなエラーが表示されます。
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
したがって、次のように書き直す必要があります。
import {
createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
class App extends React.Component {
render() {
return (
<div>11111
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
</div>
)
}
}
root.render(<App />)
VScode が jSX で HTML タグを表示する方法については、設定するだけで済みます (これらの 5 つの手順で十分です)。
2. クラスコンポーネントと関数コンポーネント
ES6 の追加により、JavaScript はクラスを定義するためのクラスの使用を直接サポートできるようになります。React がコンポーネントを作成する方法は、使用されるクラスの継承です。現在、ES6 クラスは公式に推奨されている使用方法です。ES6 標準構文を使用して、次のコードを参照してください:
ここでは、Header クラス コンポーネント (01class.js) が公開されています。
import React, {
Component } from 'react'
export default class Header extends Component {
render() {
return (
<div>
<div>我是头部</div>
</div>
)
}
}
こちらは外部に公開するBody関数コンポーネント(02function.js)です
const Body = () => {
return (
<div>我是身体内容</div>
)
}
export default Body
その後、それをルートコンポーネントのindex.jsに導入するだけで使用できます(コンポーネント名は大文字で始める必要があることに注意してください。そうしないとエラーが報告されます)。
import React from 'react'
import {
createRoot } from 'react-dom/client';
import Header from './01class'
import Body from './02function'
const root = createRoot(document.getElementById('root'));
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>asdad</div>
<Header></Header>
<Body></Body>
</div>
)
}
}
root.render(<App />)
関数コンポーネントとクラスコンポーネントの違い:
関数コンポーネントはステートレスコンポーネントとも呼ばれ、16.8 以前は状態がありませんでしたが、16.8 以降は状態を書き込むための React フックが導入されました。クラスコンポーネントは状態とプロパティを書き込むことができます。
3. コンポーネント内のスタイル
まず最初に、変数属性を仮想 dom に追加する方法を知る必要があります。また、式を使用して { } に渡す必要があります。これにより、次のことが実現されます。
import React, {
Component } from 'react'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
</div>
)
}
}
式である必要があることに注意してください。
まず、次の形式でオブジェクトを定義できます。
import React, {
Component } from 'react'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
const obj = {
//驼峰式命名
backgroundColor: "red"
}
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
{
/* 注意{ }不能删去 */}
<p style={
obj}>2222222222222222</p>
</div >
)
}
}
インライン スタイルを仮想 dom に追加するには、式を使用してスタイル オブジェクトを渡す必要があります。
{
/* 注意这里的两个括号，第一个表示我们在要JSX里插入JS了，第二个是对象的括号 */}
<p style={
{
color: 'red', fontSize: '14px' }}>1111111111111111111</p>
クラスの記述:
React は、各コンポーネントが独立した全体であると考えているため、インライン スタイルを使用することを推奨しています。ほとんどの場合、依然として多くのクラス名を要素に追加しますが、クラスは className として記述する必要があることに注意してください。 (結局のところ、あなたは js のようなコードを書いており、js ルールを受け取ることになり、 class がキーワードであるため)
補足: (class ==> className , for ==> htmlFor(label))
import React, {
Component } from 'react'
import './css/01index.css'
export default class App extends Component {
render() {
const name = "zhangsan"
const a = 8
const b = 9
const obj = {
backgroundColor: "red"
}
return (
<div>
{
10 + 20} -- {
name}
<div>
{
a > b ? "aaa" : "bbb"}
</div>
<p className='active'>333333333333333</p>
</div >
)
}
}