DEV Community: Wensy

Command Line Terminal Cheatsheet

Wensy — Fri, 10 Jun 2022 16:15:15 +0000

How to get started creating a Frontend React-App

Wensy — Mon, 14 Mar 2022 19:46:41 +0000

Create a folder that you want your project to be in.
cd into that folder and create a new React Project and make sure to give the project a name.

In this example i'll use "sampleapp" as the name of the new project.

npx create-react-app@latest sampleapp

** Once the app is done installing make sure to cd into the folder that was just created.**

Install your support libraries and styles library for some page styling so the app doesn't look plain.

npm i react-router-dom bootstrap

When installing Bootstrap make sure to also add the css and bundle to the index.html file.

Getting Started with Bootstrap

Test the server to ensure it is working

run npm start then go to localhost:3000

Once you see this, your app has been successfully installed and is ready to be edited.

Now it's time to set up the React Router.
Inside of index.js

add the following:
import {BrowserRouter as Router} from 'react-router-dom

Then you want to wrap the App component inside Router in order for the App and children will be able to use the Router.

Finally you pass the app component inside of Router so that it can have access to all the router props.

like this:

ReactDOM.render(
  <Router>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Router>,
  document.getElementById('root')
);

Now we're ready to start customizing the application!!

in the App.js file delete everything inside the

so that you are left with a blank canvas.

Here we will be adding all of the routes to the different pages of the application.

In the src Folder create a new folder called "components" and a folder called "pages"

In the Components folder you can add small pieces of code that are related to the User Interface. For example I added a navbar.js and a footer.js file to my components folder.

In the Pages folder you can have the different pages that act as routes for the app.

For example the Home Page and About Page.

For this example I will not be styling the navigation or footer. I will simply style the components and pages so that you can get a picture of how to set up the application.

In every page and component you will set up the basic skeleton of the page.

it will look as follows:

import React from "react";

const About = (props) => {
 return(
    <h1> this is the about page </h1>
)
}

export default About

Once you have created the skeleton for each page, it's time to import the components, and also the components from React Router into the app.js file.

Now it's time to add the Routes and the Route paths.

Inside of the returned JSX of the app.js file add the following and adjust it according to the app you want to make.

In the top url search bar it look like this, when wanting to see the home page:

http://localhost:3000/

This is the Home page that you have created

Since I want the Navbar and Footer to show on each page of the app, I will add it to the index.js file.

To add the Navbar and Footer to the index.js file you first import the components

Then you add the the Navbar and Footer to be rendered inside the Router.

You want to make sure you add this in the order you want it to be displayed.

Once you style your pages and components you should have a full functioning app!

Again this is a basic setup on how to get started creating a react app.

Have fun coding and make it a great day! :)

Using React-Icons in Reactjs

Wensy — Fri, 21 Jan 2022 04:49:00 +0000

I have found that the best way to incorporate icons in your code is by using react icons. They have a variety of different icons, ranging from bootstrap icons, Font Awesome icons, ant design icons and BoxIcons to name a few out of many more.

The installation process is fast and easy.

Install by typing

npm install react-icons --save

in the terminal for your project.

Once react-icons is installed, you will need to import it into the page where you want to use the icons.

For example:

import { FaGithub } from 'react-icons/fa';

Once you have imported you need to declare the icon in the code with a self-closing tag.

For example:

function App() {
  return (
    <div className="App">
     <h2 align="center">Hello world!</h2>
     <div align="center"><FaGithub/></div>
    </div>
  );
}

The result:

One thing to keep in Mind!

Whenever you are importing an icon make sure you are addressing the correct icon, whether it be from Font Awesome(fa) or bootstrap icons(bs). The icons will not work if you use a bootstrap icon and import it as an "fa" icon.

For example:

When importing from 'react-icons/fa' the "fa" at the end is what indicates where the icon is coming from. In this case Font Awesome.

The great thing is that at the top of the documentation it gives you the proper import method for the type of icon you want to use.

Such as follows:

Bootstrap Icons

import { IconName } from "react-icons/bs";

Font Awesome

import { IconName } from "react-icons/fa";

Simply replace the IconName with the icon of your choosing and you should be all set!

All documentation for this can be found here:

React-Icons

This is all information that I found to be helpful as a new developer and took me some time to figure out how it all worked. After several failed attempts, I thought I'd share my experience and hope to help someone else looking for an easy way to add icons to their code!

Best of luck in your journey!

-Wensy