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: