amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

bla

Browse Source
This commit is contained in:
Dan Abramov
2023-02-22 18:37:20 +00:00
parent db0a30611b
commit db629a3637
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
beta/src/components/Layout/HomeContent.js
View File

@@ -134,7 +134,11 @@ export function HomeContent() {
<Section background="left-card">
<Center>
<Header>You start with a single component</Header>
<SubHeader>Create UI from components</SubHeader>
<Header>
You start with a<br />
single component
</Header>
<Para>
React lets you build user interfaces out of individual pieces
called components. Create your own React components like{' '}
@@ -158,7 +162,8 @@ export function HomeContent() {
<Section background="right-card">
<Center>
<Header>Then you keep making more of them</Header>
<SubHeader>Write components with code and markup</SubHeader>
<Header>Then, you keep making more of them</Header>
<Para>
React components are JavaScript functions. Want to show some
content conditionally? Use an <Code>if</Code> statement.
@@ -181,7 +186,8 @@ export function HomeContent() {
<Section background="left-card">
<Center>
<Header>They handle events in the browser</Header>
<SubHeader>Add interactivity where you need it</SubHeader>
<Header>They can handle events in the browser</Header>
<Para>
React components receive data and return what should appear on the
screen. You can pass them new data in response to an interaction,
@@ -211,7 +217,8 @@ export function HomeContent() {
<Section background="right-card">
<Center>
<Header>They read database on the server</Header>
<SubHeader>Go full-stack with a framework</SubHeader>
<Header>They can read database on the server</Header>
<Para>
React is a library. It lets you put components together, but it
doesn’t prescribe how to do routing and data fetching. To build an
@@ -244,7 +251,8 @@ export function HomeContent() {
<Section background="left-card">
<div className="mx-auto flex flex-col w-full">
<div className="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col">
<Header>They’re native on every platform</Header>
<SubHeader>Use the best from every platform</SubHeader>
<Header>They feel native on every platform</Header>
<Para>
People love web and native apps for different reasons. React
lets you build both web apps and native apps using the same
@@ -392,6 +400,7 @@ export function HomeContent() {
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
<div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5 gap-5">
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:pl-5 lg:pr-10">
<SubHeader>Upgrade when the future is ready</SubHeader>
<Header>With time, they will only get better</Header>
<Para>
React approaches changes with care. Every React commit is
@@ -457,6 +466,7 @@ export function HomeContent() {
<div className="w-full">
<div className="mx-auto flex flex-col max-w-4xl">
<Center>
<SubHeader>Join a community of millions</SubHeader>
<Header>We hope that someday you will join us…</Header>
<Para>
You’re not alone. Two million developers from all over the