This is the first post in a series touching on the essential parts of React.js to know when getting started. The series will cover making components, handling data, component lifecycle, and using modern best practices to do so. Comfort with using terminal, Git, Github, HTML and JavaScript are recommended.


The Project

We will be building the front-end for an app that lets users view information about parks, and the trails inside each park. Users can also leave reviews for parks and trails.



Setup

Use this GitHub repository to follow along or use as a reference. I recommend forking and cloning so you have your own copy. There will be a branch for each part of this tutorial that will have the complete solution for that part. So if you switch to the 'components' branch, you will see all the code that this part of the tutorial will end with.

Now that you have the repository cloned onto your computer, navigate inside of the essential-react-tutorial directory and, in your terminal, and run this command:

$ npx create create-react-app .< /p>

This command creates everything you need to quickly start using React, without it we'd have to cover a lot more material to setup. Using the Create React App project is ideal for learning React, so we can jump straight into coding. You can visit the docs for create-react-app to learn more about it.

If you enter $ ls in terminal, you should see this:

screenshot of terminal after entering ls

Everything is setup! We can now run $ yarn start to start the server and start building our app!

In your browser, go to localhost:3000. Keep the server running, your browser window will automatically refresh when you save changes in your code!



Components intro

The very first concept to understand react is getting familiar with components. What makes any library/framework worth using is following it's conventions to have DRY, maintainable code that will boost your productivity while developing your app. With React, parts of the UI (user interface) will be split into their own components to isolate how it handles data and functionality.

For example, the app we are going to be building will focus on content around parks, trails and reviews. At minimum, each one of those will have it's own component. They will have their own set of data, functionality and design. As we continue to develop, and as those components start getting more complex, it is very likely some parts inside those components will need to be split into new components. For example, with reviews we are going to want to display reviews and be able to submit a review with a form. Those are going to be two separate components.

Everything we need is in the /src directory. In app.js, we already have our first component. Notice that it is setup as a function, where it returns everything we want this component to render. The component is defined in this file, but having the code in this file is not what is making it show up in the browser. This is only defining the component.

In index.js, notice line 4 & and 9 (can reference in photo below). Line 4 is importing the component from the app.js file. That gives us access to be able to render the component on line 9. Now, notice how it is being rendered. Using an HTML-like syntax, it's able to be called with the name of the component in a self-closing tag. This syntax is known as JSX.

screenshot of terminal after entering ls

JSX allows us to use HTML-like syntax, instead of complicated JS, to render elements from JavaScript. All the code, in app.js, between lines 6-23 is also JSX! While we are looking at app.js, change the text on line 19 to something else (I change it to 'Hello!'). If your server is still running, you should see the text change automatically when you visit localhost:3000.



Create new components

It's time to get to business and start building out app! We will start by creating new components for park, trail and review.

To keep our files more organized, start with making a /components directory inside of /src: $ mkdir src/components. Go ahead and create a file for each of the components, within the new components directory:

$ touch src/components/Park.js
$ touch src/components/Trail.js
$ touch src/components/Review.js

Open the new Park.js file you created. Based on what you saw with the App component, what is the minimum code needed to be able to import this component to another file to render? Click here for the solution.

We made the component, but now we have to explicitly call the function to tell it where to render. Let's go back to App.js, import Park.js at the top, and then use JSX to render the Park component. I suggest removing the code on lines 8-21, in App.js. Click here for the solution.

Right now, your localhost:3000 should be showing 'I'm a park!', or whatever you returned from the Park component. Your code should look something like this:

screenshot of a app.js and park.js react component

Note that when defining and calling a component, the component name has to be capitalized

Use this same pattern to build the Trail and Review classes. They should look something like this:

screenshot of a app.js and park.js react component


Load components within each other

If we want to be able to see trails that belong to a park, it makes sense to load trails within parks. How would you do that? Try it out! Refer to this solution if you get stuck.

Now do the same, but with Park and Trail each having a Review component render with it. You might run into this parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?. When returning from a component, all elements must be wrapped in a single element (a div or section is commonly used).

If it doesn't make sense to have a wrapping element, use React.Fragment to wrap around the elements instead, when returning. Fragments won't be used in this tutorial, but they're good to know about. Look at this page of the React docs to know when it's appropriate to use.

In my solution, I used divs to wrap around multiple elements that are being returned. Notice how I added a class to the elements. Since 'class' is a reserved word in JavaScript, 'className' must be used instead. Remember, although it these look like HTML tags, everything in this file is still JavaScript and the everything that looks like HTML is actually JSX.

This is a good spot to pause and make sure everything mentioned so far makes sense. Refer to this solution and the image below for where your code should be at this point.

screenshot of final solution for components section of tutorial


A note on functional vs class components

This project is going to strictly use functional components. Before React Hooks were released in 2019, using ES6 classes were typically preferred for more complex components. Many code examples and code bases built before then will likely use class components. It's good to be aware of when searching for help online and when working in other code bases. This topic can lead you down an entire rabbit hole but, for now, just know that when a component starts with 'function' it's a functional component, and when it starts with 'class', it's a class component.

screenshot of a app.js and park.js react component
The same component, with the top as a function and the bottom as a class.

Next up...

The next section of this tutorial will cover handling data between components