evenstensberg / evenstensberg/getting-started-with-open-source

Issue 2: Add Modern Development Tools

Open
#10 0 comments 0 reactions 0 assignees View on GitHub
enhancement good first issue help wanted
Dominant language
JavaScript
Stars
10
Forks
6
PR merge metrics
No merged PRs in 30d

Description

## Congrats!

Hi everyone, congratulations on finishing #2 . If you haven't done it, don't worry. You can browse back, and finish it at your own phase or look at #3 on how to finish the first task.

By now we have done a very simple thing, that is, creating a file that a user will see when he or she visits a page. This turns out hard when building more complex websites, so in modern times we have made this more efficient.

When doing Front End Development, one does normally not use things like `index.html` and write code directly into the html file. We have tools that help us out, which will inject scripts that will add functionality to our site.

This is great, because instead of writing code that might be unreadable once the file is large, we can use tools that allow us to split the logic into different files and have a tool inject the files into the `index.html` file we want.

---

## Task 2

This task is fairly more complicated and will require you to read up by Googling yourself. The task will introduce you to modern front-end development workflows and how to create a modern front-end application yourself. Don't worry, there are various of tools out there that makes this easier for us, such as [Create React App](https://facebook.github.io/create-react-app/)

Instead of using this, I want you to get your hands dirty, the best thing there is to learn new things. The task is as follows:

**Create a new modern project that will use React, webpack and create a "Hello World" component in React that will render to your index.html page**

If you are insecure about how to start, there are links at the bottom of this issue that could help you out. If you don't get the answers there, feel free to reach out to me at any medium and I'll happily help you out!

I suggest the following approach:

1. Run `npm init` to create a `package.json` file (Don't know what npm is? https://www.npmjs.com/get-npm , you should download node.js and get it included)
2. Install React and webpack as dependencies
3. Make the directory `src` and put a file named `index.js` inside the file.
4. Add React logic in `index.js` and Render to the dom node `root`
5. In `index.html`, add a `div` tag with an id `root`
6. Have fun!

I will release next task next sunday, you will have a lot of time experimenting yourself. Send me questions when you are stuck so you can move forward quick. If you have any questions about anything related to this task, reach out, this is a big task when coming from nothing and I'm aware that you might be confused!

## Resources

- https://reactjs.org/docs/hello-world.html
- https://docs.npmjs.com/creating-a-package-json-file#creating-a-new-packagejson-file
- https://www.npmjs.com/package/react
- https://www.npmjs.com/package/react-dom
- https://www.npmjs.com/package/webpack
- https://www.npmjs.com/package/webpack-cli
- https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.