DEV Community 👩‍💻👨‍💻


Posted on • Updated on

React file structure snippets to get you started

React and I haven't been the best of friends recently. Passing data between components and working from component to subcomponents, each with different states isn't hasn't been as intuitive for me.

So today, I decided to make the time to find some helpful patterns for structuring your React files.

Components that will probably hold state

  • Forms
  • Inputs
  • Conditional display

General Form.js

    state ={
        title: "",
        description: ""

    handleChange = (event) => {
    handleSubmit = (event) => {


return (
    <form onSubmit={this.handleSubmit}>
    <input onChange={this.handleChange} value= {this.state.title}>
Enter fullscreen mode Exit fullscreen mode

General App.js

    state = {
        books: [] 

    ComponentDidMount() {
        .then(res => res.json())
        .then(data => {
            this.setState({books: data})

    handleNewBook = (bookData) => {
        const newBook = { ...bookData }
        this.setState({books:[...this.state.books, newBook]})

render() {
        <NewBookForm onNewBook = {this.handleNewBook} />
        <Container books= {this.state.books} />
Enter fullscreen mode Exit fullscreen mode

General Container.js

render() {
    const books = => <Book book={bookData} />)
return (
    { books }
Enter fullscreen mode Exit fullscreen mode

General Book.js

        <h1> {} </h1>
        <p> {} </p>
Enter fullscreen mode Exit fullscreen mode
  • Check out this article for a more in-depth look at creating and using React components
  • I also recommend this article, which offers a deep dive into passing props between components (although it does use this.state, which I believe makes React more difficult)

Top comments (0)

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

Join the Hackathon <-