React essentials tutorial

01components.js

// src/components/Park.js

import React from 'react'

function Park() {
  return <h1>I'm a park!</h1>
}

export default Park;

02components.js

// src/App.js

import React from 'react';
import './App.css';
import Park from './components/Park'

function App() {
  return (
    <div className="App">
      <Park />
    </div>
  );
}

export default App;

03components.js

// src/components/Trail.js

import React from 'react';

function Trail() {
  return <h2>I'm a Trail!</h2>
}

export default Trail;

04components.js

// src/components/Review.js

import React from 'react';

function Review() {
  return <h3>I'm a Review!</h3>
}

export default Review;

05components.js

// src/components/Park.js

import React from 'react'
import Trail from './Trail'

function Park() {
  return (
    <div className="Park">
      <h1>I'm a park!</h1>
      <Trail />
    </div>
  )
}

export default Park;

06components.js

// src/App.js

import React from 'react';
import './App.css';
import Park from './components/Park'

function App() {
  return (
    <div className="App">
      <Park />
      <Park />
      <Park />
    </div>
  );
}

export default App;


// src/components/Park.js

import React from 'react';
import Review from './Review'
import Trail from './Trail'

function Park() {
  return (
    <div className="Park">
      <h1>I'm a Park!</h1>
      <Trail />
      <Review />
    </div>
  );
}

export default Park;


// src/components/Trail.js

import React from 'react';
import Review from './Review'

function Trail() {
  return (
    <div className="Trail">
      <h2> I'm a Trail! </h2>
      <Review />
    </div>
  );
}

export default Trail;


// src/components/Review.js

import React from 'react';

function Review() {
  return <h3>I'm a Review!</h3>
}

export default Review;