In this article you will learn how to create a personal blog using React & Node. You will also learn how to config your own Webpack, Redux, React-Router and start your node server from scratch. This tutorial does not contain authentication process.

This is a a bit advanced tutorial — We won’t use any generators (Create react app or express generate) but instead we will configure our own webpack & start our node server from scratch. But if you follow along you should do just fine. Keep in mind that if you get stuck on any step, refer to the github repo

This is what we are going to create:


Backend (Node)
We will start by creating a Backend for our app. Create a new folder called server and create an app.js file inside:


Make sure to install all the packages needed by running this command in terminal inside server folder (where you app.js is):


Finally add Nodemon to automatically re-run our app.js everytime we update something.


And then run nodemon app.js in terminal to restart our app.

Model creation
We will start by creating our Article model which will have a timestamp, author, body & title. Add a new folder inside server folder called models and create a file called Articles.js inside of it.



Now lets register the model we created into our server/app.js file:


Routing
We will start by creating a route to POST an article model.

Add the following folder structure to your server folder (server/routes):



Edit routes/index.js:


Edit routes/api/index.js:


Edit routes/api/articles.js:


The routes we have created are:

POST localhost:8000/api/articles/ which expects a body like this:


PATCH localhost:8000/api/articles/:id which expects a body like this:


GET localhost:8000/api/articles which returns a list of all articles.

GET localhost:8000/api/articles/:id which returns a specific article.

Frontend (React)
Initial configuration (Webpack, package.json & dependencies)
Create a new folder alongside our server folder called client. Like this:


Inside our client folder run the following command in terminal:

npm init

And press enter on all questions, like this:



Due to compatibility issues run this command too:


After that let’s install other dependencies (not dev dependencies):


Now create a file called webpack.config.js inside our /client folder.


And then let’s create .babelrc:


Head over to package.json and edit the scripts object:


Create a new folder called resources and create an index.html file inside:


Configuring SASS
Inside resources folder create a scss folder with style.scss file inside:


That’s all for configuration. We can now start creating react components. This is how your folder structure should look like:


React components
Inside our client folder create a folder called src and create a file index.js inside of it:


Now head over to terminal and run (in client dir):

npm start

If everything went fine you should get a result like this in your browser:


Setting up the router & App component
Let’s edit our index.js file:


Let’s create a components folder, then create index.js file inside of it.


Now let’s create App component, start by creating a folder named App with index.jsx file inside of it:



If done correctly this should pop up in the browser (if you get an error in console about how it cannot find index.jsx try re running npm start in client folder):


Let’s add routes to our App/index.jsx file:


Let’s create Home component (Create a new folder called Home with index.jsx file inside (Just like we did for App component)):



And now add it to our index.js file that exports App.js:


You should now see this in your browser:


Now let’s update our Home component to render a form:


Let’s create the Article/Form component:


Article/Form/index.jsx:


Article/index.js:


Edit components/index.js:


You should now get something that looks like this:


Now let’s add some control over our values:

Edit Article/Form/index.jsx:


Now let’s add function to submit an article:


Upon entering title, body & author and clicking submit you should now get the following result in your network tab:



Adding Redux
Add store.js file inside our /src folder:


let’s create our home reducer:

inside src folder create a reducers folder with index.js inside of it:


now add home.js inside reducers folder:


Now we need to wrap our src/index.js component into a Provider:


Now let’s edit our Home component to load all existing articles:

Edit src/components/Home/index.jsx:


Edit the home reducer:


You should now get something that looks like this (if you have articles in your DB):


Let’s add a reducer action to execute once we submit an article:

Edit src/components/Article/Form/index.jsx:


Now let’s edit our home reducer:


Try adding an article and see if it updates in real time!

Deleting & Editing articles
Let’s modify our Home/index.jsx component to render Edit & Delete buttons w/ some new styling:


Your article should now look something like this:


Modify Home/index.jsx again to add delete functionality:


You should now be able to delete an article on click!

Let’s add function to edit our article by modifying Home/index.jsx one more time!


Now let’s modify our home reducer:


And lastly edit components/Article/Form/index.jsx:


That’s it!
Thank you for going through this tutorial! If you are stuck on any step, refer to this github repo and find your problem:

If you want to, check out my android app SwipeFeed

Contact: erdeljac.antonio@gmail.com

Please report any questions or errors in the article, thanks! CHECK OUT THIS SITE FOR MORE INFO [url]WWW.REACTJAVASCRPTING..COM[/url]