Witam wszystkich, których chciałbym poznać najlepsze praktyki, aby osiągnąć coś takiego jak to, co mam w tym Codepen: Kodeks

Moje podejście:

function Blog(props) {
  const content = props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <hr />
    </div>
  ));
  return <div>{content}</div>;
}

function Perso(props) {
  const content = props.personnages.map(personnage => (
    <div>
      <h3>{personnage.name} </h3>
    </div>
  ));
  return <div>{content}</div>;
}

const personnages = [{ id: 1, name: "Hello", atck: "1", def: "1", spike: "1" }];

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." }
];
ReactDOM.render(
  <Perso personnages={personnages} />,
  document.getElementById("root")
);
ReactDOM.render(<Blog posts={posts} />, document.getElementById("rootapp"));

Zastanawiałem się, czy mógłbym zrobić coś lepszego niż poniższe fragmenty:

ReactDOM.render(
      <Perso personnages={personnages} />,
      document.getElementById("root")
);
ReactDOM.render(<Blog posts={posts} />, document.getElementById("rootapp"));

Jak mogę renderować te funkcje w jednym elemencie?

0
Mathieu Mont 20 listopad 2019, 12:46
1
Dlaczego potrzebujesz dwóch kontenerów, takich jak root i rootApp? Po prostu użyj jednego i render komponentu App, a następnie użyj innych komponentów w App jak zwykle.
 – 
devserkan
20 listopad 2019, 12:51
Użyłem dwóch, ponieważ do tej pory nie wymyśliłem, jak renderować te dwie funkcje, zamierzam spróbować tego, co powiedziałeś.
 – 
Mathieu Mont
20 listopad 2019, 13:04

1 odpowiedź

Możesz użyć jednego głównego App, jak pokazano w większości przykładów. Jeśli utworzyłeś swoją aplikację za pomocą create-react-app, już ją masz. Jeśli nie, możesz użyć czegoś takiego.

const personnages = [{ id: 1, name: "Hello", atck: "1", def: "1", spike: "1" }];

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React from npm." }
];

function App() {
  return (
    <div>
      <Blog posts={posts} />
      <Perso personnages={personnages} />
    </div>
  )
}

function Blog(props) {
  const content = props.posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
      <hr />
    </div>
  ));
  return <div>{content}</div>;
}

function Perso(props) {
  const content = props.personnages.map(personnage => (
    <div>
      <h3>{personnage.name} </h3>
    </div>
  ));
  return <div>{content}</div>;
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
0
devserkan 20 listopad 2019, 13:12
Bardzo dziękuję za odpowiedź. Czy masz jakieś przydatne źródło do nauki reakcji inne niż doktor?
 – 
Mathieu Mont
20 listopad 2019, 13:23
Przynajmniej jest kilka tagów Babel, których mogę się nauczyć w dokumentach itp.
 – 
Mathieu Mont
20 listopad 2019, 14:01
Zapraszamy. Po pierwsze, przejrzyj dokumentację. Powinieneś nauczyć się podstaw, a dokumenty są wystarczające i czyste. Na razie nie musisz uczyć się Babel, Webpack itp., A może nigdy. Stwórz swoją aplikację z CRA Start Coding.
 – 
devserkan
20 listopad 2019, 14:52
1
Tak, wypróbowałem kilka act.js, ze względu na niesamowite posty, które znalazłem na codepen i jestem prawie nowy z frameworkiem javascript i jsx, opracowałem tylko z symfony i php. Dziękuję za polecenie korzystania z aplikacji Create-React-App @devserkan
 – 
Mathieu Mont
20 listopad 2019, 16:11