React Redux for Beginners(part_4)

part1 & part2 & part3

Check part1 to part3 before you read this. This will help you have a better picture.

THE REACT REDUX PROJECT

In the following sections of this tutorial, you will be guided to build your own Hacker News application with React and Redux. Hacker News is a platform to share tech-related news. It provides a public API to retrieve their data. Some of you might have read the Road to learn React where you have built a Hacker News application as well. In that book, it was only basic React. Now you can experience the differences when using Redux with React in this tutorial.

Follow the instructions below to get everything up and running yourself.

You are going to use create-react-app to set up your project. You can read the official documentation on how to set up a React starter project with it. After you have installed it, you start by choosing a project name for your application in the terminal (command line).

create-react-app react-redux-tutorial

After the project was created for you, you can navigate into the project folder, open your editor/IDE and start the application.

cd react-redux-tutorial
npm start

In your browser, it should show the defaults that come with create-create-app. Before you familiarize yourself too much with the folder structure, you will adapt it to your own needs first. Navigate into the src/ folder on the command line and delete the boilerplate files that are not needed for our application.

cd src
rm logo.svg App.js App.test.js App.css

Even the App component with its files got removed, because you’ll organize it in folders instead of in one top level src/ folder. Now, from the src/ folder, create the folders for an organized folder structure by a technical separation. It is up to you to refactor it later to a feature folder organization. You learned about both separations in The Road to learn React.

mkdir components reducers actions selectors store sagas api constants

Your folder structure should be similar to the following:

-src/
--actions/
--api/
--components/
--constants/
--reducers/
--sagas/
--selectors/
--store/
--index.css
--index.js

Navigate in the components/ folder and create the following files for your independent components. You will create more of them on your own for this application afterward.

cd components
touch App.js Stories.js Story.js App.css Stories.css Story.css

You can continue this way and create the remaining files to end up with the following folder structure.

-src/
--actions/
--api/
--components/
---App.js
---App.css
---Stories.js
---Stories.css
---Story.js
---Story.css
--constants/
---actionTypes.js
--reducers/
---index.js
--sagas/
---index.js
--selectors/
--store/
---index.js
--index.css
--index.js

Now you have your foundation of folders and files for your React and Redux application. Except for the specific component files that you already have, everything else can be used as a blueprint, your own boilerplate project, for any application using React and Redux. But only if it is separated by technical concerns. In a growing application, you might want to separate your folders by feature.

BASIC REACT COMPONENTS

In this section, you will implement your plain React component architecture that only receives all necessary props from their parent components. These props can include callback functions that will enable interactions later on. The point is that the props don’t reveal where they are coming from. They could be props themselves that are located in the parent component, state from the local state in the parent component, or even Redux state. The callback functions are just functions too. Thus the components receiving them are not aware of using class methods operating on the local state of a parent component or Redux actions to alter the global state.

In your entry point to React, the src/index.js file, where your React component gets rendered into the DOM, adjust the import of the App component by including the components folder in the path.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));

In the next step, you can come up with sample data that can be used in the React components. The sample data becomes the input of the App component. At a later point in time of this tutorial, this data will get fetched from the Hacker News API and be managed with Redux instead of React’s local state.

...
const stories = [
{
title: 'React',
url: 'https://facebook.github.io/react/',
author: 'Jordan Walke',
num_comments: 3,
points: 4,
objectID: 0,
}, {
title: 'Redux',
url: 'https://github.com/reactjs/redux',
author: 'Dan Abramov, Andrew Clark',
num_comments: 2,
points: 5,
objectID: 1,
},
];
ReactDOM.render(
<App stories={stories} />,
document.getElementById('root')
);

The three components, App, Stories and Story, are not defined yet but you have already created the files for them. Let’s define them component by component.

First, the App component, in the src/components/App.js file, receives the sample stories from above as props and its only responsibility is to render the Stories component and to pass over the stories as props. Later, the App component could add other components aside from the Stories component too.

import React from 'react';
import './App.css';
import Stories from './Stories';
const App = ({ stories }) =>
<div className="app">
<Stories stories={stories} />
</div>
export default App;

Second, the Stories component in the src/components/Stories.js file, receives the stories as props and renders for each story a Story component. You may want to default to an empty array that the Stories component doesn't crash when the list of stories is null.

import React from 'react';
import './Stories.css';
import Story from './Story';
const Stories = ({ stories }) =>
<div className="stories">
{(stories || []).map(story =>
<Story
key={story.objectID}
story={story}
/>
)}
</div>
export default Stories;

Third, the Story component, in the src/components/Story.js file, renders a few properties of the passed story object. The story object gets already destructured from the props in the function signature. Furthermore, the story object gets destructured as well.

import React from 'react';
import './Story.css';
const Story = ({ story }) => {
const {
title,
url,
author,
num_comments,
points,
} = story;
return (
<div className="story">
<span>
<a href={url}>{title}</a>
</span>
<span>{author}</span>
<span>{num_comments}</span>
<span>{points}</span>
</div>
);
}
export default Story;

You can start your application again with npm start on the command line. Both sample stories should be displayed by React now. to be continued :)

Source: StackOverflow, Robin Wieruch, Medium, ReactJs, MDN