DEV Community: Jordan Smith

How To Build A React App Using React Router v6 Without create-react-app

Jordan Smith — Tue, 14 Dec 2021 17:10:33 +0000

Recently I found myself in the position of needing to start a new React app from scratch, but due to anticipation for future needs of the app it was decided that we wouldn't be using create-react-app. But unfortunately, create-react-app is the only way I knew how to get a React project started. I also knew that we needed to use React Router in the app, and it just so happened that a new version was just released. So off to the internet I went, looking for a tutorial on getting started. I found some helpful links and articles, but I also found that I had to pull different steps from different areas in order to get a process that actually worked together with my setup and versioning. So in the interest of helping the next dev in my position, I decided to document the process I used. Hopefully this will make it much quicker and easier for whoever is reading this today.

To start off, create a new folder and give it a name (this will end up being the name of the app). Open up the folder and in a terminal type the following command:

npm init -y

You should see something similar to the following output

Next you'll create a "dist" folder at the root of your application. In that folder, create a file called index.html. This will be the initial starting HTML file for your application. Copy the following boilerplate into that file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample React App</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

You'll notice that inside the body tags there is a div with an id of "app." This is the div that you will eventually reference when telling React where to render everything. You can name it whatever you want, just make sure when you are referencing later on you use the same id the one you specify here.

Next, we'll install the React dependencies, Webpack and Babel. These are the core dependencies you'll need for a basic React app.

npm i react react dom
npm i --save-dev @babel/preset-env react-hot-loader webpack webpack-cli webpack-dev-server @babel/core @babel/preset-react babel-loader

Now we'll install React Router at version 6.

npm i react-router-dom@6

Now that everything is installed, we'll add a script allowing us to start the application from the terminal. In package.json, add the following code to the "scripts" section.

"start": "webpack serve --config ./webpack.config.js --mode development --port 3000"

Your package.json should now look like this:

{
  "name": "sample-react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development --port 3000"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dom": "^0.0.3",
    "react": "^17.0.2"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "babel-loader": "^8.2.3",
    "react-hot-loader": "^4.13.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

Next we need to set some Babel presets. In your root directory create a file called .babelrc and put in the following code:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Now we'll specify our Webpack presets. Create another file in the root directory called webpack.config.js and put in the following:

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "bundle.js",
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    static: path.resolve(__dirname, "./dist"),
    hot: true,
    historyApiFallback: true,

  },
};

Note: if you are not using typescript in your app you can omit the all references to "ts" and "tsx" (found under resolve.extensions and module.rules.test).

Now we'll create our root React app file. Create a src folder at your root directory and inside make a new file called app.jsx. This will contain the following (I'll explain what all of this is below):

import React from "react";
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<h2>Page Not Found</h2>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default App;

const Layout = () => {
  return (
    <>
      <h1>Welcome to the app</h1>
      <Outlet />
    </>
  );
};

const Home = () => {
  return <h2>Home</h2>;
};

const About = () => {
  return <h2>About</h2>;
};

const Contact = () => {
  return <h2>Contact</h2>;
};

At first glance, it looks like I just threw a massive code block at you just now. But if you break it down, it's simply a component that holds a router with a couple dummy components to get started. You can see that the component is called App and in this component we return a <BrowserRouter>. This is the built in React Router component that will wrap around whatever routes you add to your app in the future.

Inside the <BrowserRouter> tag is where we will place all of our Routes. We start with a <Routes> (note the "s") tag, another React Router component, basically saying "Hey here's a bunch of different routes to look for." Then of course is the <Route> component, which is where you'll put the actual path and the component to be rendered when that path is hit. I won't go into anymore detail on how these React Router components work. Instead if you want to see a more in depth explanation on how they all work I'd recommend checking out their documentation here. Their docs are really clear and they explain things much better than I ever could.

Below that is just a couple simple dummy components, so that something will actually render when you hit each route. You'll notice that layout is the parent route, and it contains an <Outlet> that renders any children elements (again - see the official documentation for a much better explanation). These of course should be replaced once you start building out your application, and they should probably be split into their own separate files. But for ease of this tutorial I decided to put them all together so you can clearly see what's being rendered and when.

Finally you'll need to write your ReactDOM renderer component. In your src folder, create a file called index.js. Inside that you'll place the code below:

import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(<App />, document.getElementById("app"));

This code is what React uses to actually render your entire app. Notice in the document.getElementbyId, you are using the id "app" that you created in your index.html file at the beginning.

Now time to check everything out! Run the app using npm start and then in your browser navigate to localhost:3000. You should see the home screen rendered on the page. In the URL bar, add "/about" to the end of the current URL and you'll see the about page rendered. Switch that to "/contact" for the contact page. The header from layout should be shown for all routes.

And that's it! You now have a basic React app with React Router v6. This is of course only one way to do it, and I'm sure others have other methods, but this is what I've found to be simple and effective to get everything going.

I hope this helped, and saved you some time in the process! If you want to save even more time and not read through everything - although I do recommend going through the steps and typing everything yourself so you can have a good idea of what's going on - you can go to the GitHub repo here to get everything in one go.

Thanks for reading! If this article was helpful, or you have any questions or feedback, feel free to leave a comment!

6 Myths Keeping You From Becoming a Software Engineer

Jordan Smith — Wed, 08 Dec 2021 02:51:06 +0000

If you're thinking about trying to start a career as a software developer and done any kind of research into the tech industry, you've no doubt come across the countless horror stories and discouraging "facts" about how difficult it is to break into the world of software engineering.

As someone that started out my tech journey with a background in warehouses and manufacturing, with no extraordinary technical acumen, no connections to the tech community, and no college under my belt (except for a couple failed classes in the "running-start" program) - I'm here to tell you that much of what you hear is simply not true. Although it does take work, and you won't just get a coding job on a whim, there really aren't as many barriers separating you and your dream career as you might think. The world of technology is constantly evolving, and so are the requirements to working in it. While some of these myths may have been true at some point in the past, they aren't now. It's time to stop letting them get out into the world and start getting rid of this artificial barrier that's stopping so many people from even attempting to get the career they want.

Myth #1: You have to be a tech junkie to be a good developer

There is this idea that all developers are some kind of "tech nerds" that grew up taking apart computers and hacking video games. But as seems to always be the case, reality isn't quite like the stereotypes lead you to believe. You don't have to be a major technology enthusiast to be a software engineer. I was never all that into tech outside of being a general consumer. Sure I played video games and was excited when the new iPod or new phone came out, but the thought of actually finding out how these things worked was far from my mind.

All you really need is a general understanding and a willingness to learn about the technology relevant to the field you want to work in. If you are a tech junkie... great! You already know you'll enjoy the work! But don't be discouraged if you're not. There's a good chance you'll find yourself getting more into it as your career grows and as you start working on new and exciting things. If you're reading this article and you've gotten this far - you have more than enough interest to get started.

Myth #2: You have to be a genius to code

This one is similar to the first myth (and several more later on) in that it's just another stereotype. I can't tell you how many interactions I've had that went pretty much exactly like this:

Me after someone asks what I do: "I'm a software developer, so I make apps and websites and things like that."

Them: "Wow you must be really smart. I could never do something like that."

As much as that conversation is fine if you want to stroke your ego a bit, I always feel a little awkward afterwards. Because of course I'm not any smarter than the person I'm talking to. I just happened to learn a different set of skills.

Learning to code is sort of like learning another language. It takes dedication, incremental learning (start small and easy then slowly move to more difficult and complex), repetition, and of course practice. But the important thing to know is it doesn't require any inherit "smarts."

Myth #3: Programming involves too much complex math

This was something that I believed before getting started, and something that almost made me change my course entirely. But thankfully I kept going, and to my immense relief, learned that programming doesn't have to involve some crazy math skills.

Now to caveat this - I recognize that a lot of degree programs and universities do require higher level math, however not all of them do. And as I'll talk about a bit later, traditional college isn't your only option. I also have to acknowledge that some programming actually does involve a good amount of more complex math. If you are looking to get into something like game development or cryptography or some other more niche fields, then this one won't be as much of a myth.

But if you're someone like me who dreaded walking into math class, not all hope is lost! There are plenty of fields that you can get into that don't require some kind of advanced trigo-calcu-algebraic madness. Things like building websites, creating user interfaces, or even a lot of API and cloud work, are all perfectly valid and lucrative areas of focus for a programmer and require little to no high level math skills. Besides, unless you're in an interview (and sometimes not even then), no one is going to frown on you pulling up Google when the occasional need for math does arise.

Take it from me. I have been coding professionally for a little over 4 years, I make a comfortable 6-figure salary, and have no issues completing any tasks or growing in any of the companies I've worked for, and I can't remember a time I had to solve a complex math problem all on my own to get the job done.

Myth #4: You need to have an expensive college degree

This is one of those myths that started as a fact. Back in the day if you wanted to become a programmer the best option was to go get a degree at some university and inevitably go into a bunch of debt. Fortunately though this thought process is starting to disappear. With technology becoming such an integral part of every day life, and with so much easy access to self-learning materials, more and more paths are opening up to get into the tech world. It's starting to become more common to meet developers that are entirely self taught. Utilizing online resources such as LinkedIn Learning, Udemy, Codecademy, or even just through YouTube tutorials - you can learn everything you need to know to nail an interview and be a very proficient engineer.

But what if you want a little more guidance than that, but still don't want to go majorly in debt for a large university degree? Well, there's options for you too! Bootcamps are shorter programs that solely focus on getting someone the skills to become a software developer without all the fluff of a full scale degree. You won't be leaving these bootcamps with a Bachelor's degree, but you will be leaving with the skills you need to start doing the job.

There's also more programs that are coming up at smaller schools and community colleges that do end with a Bachelor's degree, but at a fraction of the cost of a large university. This is the route I took. My local community college offered a program in "Applied Computer Science" where we spent two years in small cohorts of students, creating real applications for real clients. All in the process of learning to code. The small and consistent class sizes along with having a core group of a few teachers allowed us to build strong relationships that in turn lead to greater learning. Building real apps for real clients, allowed us to really dive deep into the practical application of programming, rather than just getting taught a bunch of computer science theory. It was at this school that I also achieved my Certified Scrum Master certificate, and even worked in my first web development internship. And the best part is - my entire Bachelor's degree ended up costing less than a quarter of what it would have at my local large university.

Take a look into less traditional methods of learning. You may be surprised at what's out there today!

Myth #5: Coding is a young person's game

I want to preface this by saying that unfortunately agism does exist in the tech world today. It shouldn't exist and it's nothing but a detriment to the entire tech society. But that is another topic for another post. My point here is that even if you don't think of yourself as "young," you shouldn't count yourself out of becoming an engineer.

If I were to guess at what started this whole idea that the older generation can't become developers, I would attribute it to the early days of the big tech boom. When computers started to be commonplace, everyone started carrying tiny computers in their pockets, and the internet was just hitting its stride. At this time the people that were growing up alongside the technology were able to see it as a natural part of life, while at the same time the older generation saw the tech as something new and wildly different than what they were used to. But times have changed. Technology is so prevalent today that it's almost unavoidable to people of any age. This means more exposure, which consequently "levels the playing field" and makes it a lot easier for the older generation to quickly ramp up their skills in technology.

Nowadays, anyone of any age can get into software development and be just as successful as the 20-something year olds just out of college. I myself didn't even start learning until I had been out of High School for around 8 years and I didn't get my first internship until close to 30 years old - which admittedly isn't old, but it's definitely not the traditional path. I've also worked with plenty of engineers that are twice my age or more, and many of them make me look like someone who just wrote my first "Hello World" program.

Age is nothing but a number. Whether you're a fresh graduate not even out of teenage years, or you're looking to switch careers after 30+ years in another industry, you can become a software engineer if that's where you want to be.

Myth #6: Programmers are introverts that spend all day in the darkness staring at a screen

Okay. So this one definitely could be true for some. If you like to be in a dark room while you work and coding is your passion so you spend all day and night doing it, then you do you! But my point here is that this isn't the way it has to be. It's not like you get your first programming job and are suddenly teleported to a dungeon where you can never leave or talk to anyone else. I've actually found that this job can be quite social!

A lot (almost all) of software development in the professional world involves teamwork in some capacity. Whether it's virtual meetings or working together in person, you will be collaborating with others to get your work done. There's also a good chance you will be interacting with people who aren't developers. A lot of teams will also consist of designers, project managers, sales, and even sometimes clients or stakeholders, so you may be interacting with a lot of different groups of people. Additionally, if you're particularly extroverted, you may find yourself joining the many developers today that go to conferences, teach classes, host podcasts, or in general spend a lot of their time being around others.

There's also a lot of networking. Networking with others can become vital to a software engineer's career, especially in the early days. Whether that means just having a presence on LinkedIn, or going to meetups and workshops and exchanging information with the people you meet, networking can open up tons of new job opportunities. Think about it. If you're a hiring manager or a recruiter looking for a new Front End dev to join your team, and you recently had a great conversation with someone about how JavaScript really isn't all that bad, you're probably going to reach out to that person first to see if they are interested!

So you don't have to be secluded in a corner to be a developer. In fact, it helps if you can manage to have a little bit of a social side to you! That's not to say you can't be a developer as an introvert either. As a fellow shy-guy I can confirm that it's possible. But if you can manage to put yourself out there to meet and talk to people every once in a while, and if you can collaborate well with your team, you'll find a lot of success in this career.

Wrapping it up

This post ended up a lot longer than I originally intended, and if you've stuck around until now thank you! My goal with this long-winded list is to prove that anyone can start a career in software development if they really want to. We as a community in the tech world need to put a stop to the gatekeeping and bring down the intimidation factor so that more people can discover what a great career this can be. If you're considering jumping in, give it a shot. And if you have any other things stopping you from getting started that I haven't covered here, give me a shout. I'd be happy to give you some insight from the inside... and most likely end up telling you to try it anyway!