Forem: Victor Awotidebe

Embarking on Your Journey to Frontend Mastery: A Roadmap of Resources

Victor Awotidebe — Fri, 25 Aug 2023 12:51:56 +0000

Embarking on Your Journey to Frontend Mastery: A Roadmap of Resources

Hello there, aspiring frontend developer! If you're eager to embark on an exciting journey into the world of frontend development, you've come to the right place. This resource compilation is your compass, guiding you from the very basics of computer programming to mastering the intricacies of popular frontend frameworks. Let's dive in and set you on the path to success.

1. Laying the Foundation: Introduction to Computer Programming

To build a strong foothold in the realm of frontend development, begin with a solid understanding of computer programming. This foundational knowledge forms the basis for comprehending how computers operate and introduces you to essential programming language concepts. Kickstart your learning with this informative YouTube video: Introduction to Computer Programming.

Delve even deeper into the world of computing with these enlightening videos:

2. Grasping Backend and Frontend Development

Transition seamlessly into the realm of backend and frontend development with these insightful videos:

3. Navigating Core Technologies: HTML, CSS, and More

Mastering HTML and CSS is pivotal for any frontend developer. Begin your journey with these resources:

Elevate your skills by enrolling in the Responsive Web Design Course, where you'll not only refine your HTML and CSS proficiency but also earn a coveted certificate in responsive design. To achieve a well-rounded expertise, delve into this comprehensive video guide: Mastering Responsive Design.

4. Learning Essential Tools: VS Code, Git, and GitHub

Navigate the essential tools of a frontend developer's trade:

As you continue your journey, solidify your skills with a thorough revisit of the video: Practice for Mastery.

5. Mastering JavaScript: The Foundation of Frontend

JavaScript lies at the heart of frontend engineering. To minimize future challenges, ensure a solid grasp of JavaScript. Here's a recommended approach:

Combine the Learn JavaScript - Full Course for Beginners video on FreeCodeCamp with their interactive JavaScript course.

After conquering JavaScript and securing your certificate, take the next leap by embracing TypeScript, a powerful extension of JavaScript. Start your TypeScript journey with this comprehensive playlist: Essential TypeScript Tutorials. For comprehensive documentation, turn to the TypeScript Handbook.

6. Exploring Frameworks and Libraries

As you progress, it's time to delve into frontend frameworks and libraries. When choosing, consider their adoption rates and align with the needs of your team and industry. Here's your guide to navigating these waters:

React: Launching Your Dynamic Website Journey

React is a fantastic starting point, offering rapid job placement and a smoother transition to mobile development. To master React, follow this roadmap:

Vue.js: A Strong Contender

Alternatively, explore Vue.js, a robust choice embraced by many firms. Familiarize yourself with Vue.js through this enlightening tutorial: Introduction to Vue.js. FreeCodeCamp offers a comprehensive Front-End Development Libraries Course to further hone your skills.

7. Elevating Design with CSS Frameworks

Enhance your design prowess by delving into CSS frameworks. Explore these resources for popular frameworks:

8. Embracing Next.js: A Powerful React Extension

Advance your React journey with Next.js, a powerful framework that amplifies its capabilities:

9. Understanding Core Design Theories

To truly thrive as a frontend developer, grasp the essential theories that shape web design:

Note: The resources cited are the intellectual property of their respective creators. Should any resource become inaccessible or creators wish for removal, rest assured it will be promptly addressed.

With this comprehensive roadmap in hand, you're poised to conquer the world of frontend development. Embrace continuous learning and adaptability to flourish in this dynamic field. Wishing you all the success as you navigate the exciting path ahead!

Setup React Using webpack4, Babel 7 and ES lint — Airbnb styling

Victor Awotidebe — Mon, 30 Sep 2019 11:26:54 +0000

In this article, I will walk you through how to set up react using "Webpack4" and "babel 7". Also, we'll be linting our project with Es lint using Airbnb as our style guide. Before we kick off, let me mention that using the "create-react-app" simplify all of these and prevents lots of hassle. However, a setup with Webpack from scratch helps understand codes better, personally, I enjoy coding so long as understand it. I know getting a code to work is much excitement, however, understanding every single line of code in your code base is premium. With that said, let's get cracking.

Our prerequisites include;

A machine with node installed, you can see install the latest node version at NodeJs.org
Basic JavaScript and NODE/NPM knowledge

Setup Babel

Babel is a npm library used to compile our code from ECMAScript 6 (ES6) to some native version of JavaScript. ES6 comes with modern ways of writing JavaScript codes, which bring lots of benefits and generally makes writing JavaScript more painless. Running JavaScript in the console/browser with the latest ECMAScript might lead to compatibility issues, so we compile using Babel, see more at Babel docs

To set up babel we need to install;

@babel/cli - is a babel tool that allows us to use babel from the command line
@babel/core - is a babel tool which contains the core babel modules
@babel/preset-env - is a babel plugin to set up transformation environment
@babel/preset-es2015 - is a babel plugin to set up transformation environment to ES2015
@babel/preset-react - is a babel plugin to set up transformation environment for react
babel-loader - is a babel plugin to compile using webpack

To install them;
Create a folder you can give it any name you like, and run this in the terminal

mkdir react-webpack && cd react-webpack
npm init --y
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-es2015 @babel/preset-react babel-loader -D

i is a shortcut for install and D flag would save the modules as devdependencies

Configure Babel

Let's configure babel so it can compile our code. In the root folder create a file named ".babelrc"

touch .babelrc

In ".babelrc" add the following code;

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

Like we mentioned earlier "preset" allow us to set the environment for transforming our code, they are set of rules by which babel compiles our code. That will be all for babel.

Setup Webpack

Webpack is used to compile JavaScript modules, it's a popular React app bundler but have other uses.
To set up Webpack, we need;

webpack, webpack-cli, and webpack-dev-server - Webpack bundles our JavaScript file, webpack-cli includes the command-line utilities and webpack-dev-server provides hot reloading during development.
HTML-webpack-plugin - It simplifies the creation of HTML files to serve your webpack bundles

Run:

npm i webpack webpack-cli webpack-dev-server
npm i html-webpack-plugin -D

Add Style-loaders for CSS

To compile our CSS files we'll need style-loader and CSS loader

npm i style-loader css-loader -D

Configure Webpack

In the project root folder, create a file called "webpack.config.js" and add the following code;

Let's create our entry file and it's folder:

mkdir dist && cd dist
touch app_bin.js

Create the template HTML file in the root folder:

touch index.html

Add the following code to the HTML file:

We require path and HtmlWebpackplugin at the beginning. Path is a built-in Nodejs module, essentially used to resolve modules path and Htmlwebpackplugin is the module we installed earlier.

We are exporting an object which describes our configuration;

entry - which specifies the entry point for our application
output - an object which includes the path to our bundle folder and a filename which specifies our output file where our project is bundled and mapped to its dependencies
devServer - which specifies our server port number and inline property which means that a script will be inserted in your bundle to take care of live reloading.
module - includes rules - an array of instructions on how webpack will bundle our application. It includes test - which indicates the regex matching the acceptable file extensions
exclude - specifies folders which webpack should ignore, loader - specifies the module to load our app
query - specifies the preset for our app

The second object applies to our styling

plugins - here we initiate the HTML plugin and set our template to our index.html file at root folder.

Add scripts to in package.json

"start": "webpack-dev-server — mode development — open — hot",
"build": "webpack — mode production",

The start script is used to start our app, here we are using the development server mode to run our server.

Create “src” folder and add index.js file to the folder

mkdir src && cd src
touch index.js

In index.js add the following code

We import react and react-dom and our app from ./compenents/App and render it on line 5.
Lets create our components folder and our App.js file

mkdir components && cd components
touch App.js

In components/App.js add:

We import react and add a functional react component.
Run npm start on the command line in the project root, it should output some messages which you can read while it compiles. The app should launch in the browser at the port number specified in "webpack.config.js"

Setup Eslint with Airbnb style guide

Linting helps us to ensure we adhere by certain standards while writing codes
To setup linter with eslint and airbnb
Run npx install-peerdeps - dev eslint-config-airbnb
Then configure eslint

In project, root create .eslintrc file

touch .eslintrc

Add the following code:

In the code above we added the following properties
extends- our style guide which is Airbnb
env - specifies our environments
rules - we added extension name so it doesn't display an error when we include jsx in our js files

We have come to the end of this guide, I hope you like it. If you would like to learn react, check out the following resources:
Learn React on Scrimba with Bob Ziroll
Check out NetNinja YouTube channel, he has an awesome tutorial on React and Redux
To learn more or if you run into errors check out their official documentation at:
Webpack — https://webpack.js.org/concepts/
Babel — https://babeljs.io/docs/en/
Eslint — https://eslint.org/docs/user-guide/getting-started
Airbnb — https://github.com/airbnb/javascript
If you like it, give the post a like or comment below for issues. You can follow me on Twitter as well @devDebelistic