9 DAYS DOCUMENTATION: PROGRESS REPORT ON 100 DAYS OF CODE BY LUX ACADEMY
Day 1: INTRODUCTION TO GIT AND GITHUB
What is github? A file or code sharing service.
Github enables teamwork especially people in different locations working on the same project.
The difference between Git and Github
Github: central repository for remote repository while git is a tool which allows users to create a local repository.
How to start a github repository
On the github main dashboard, click on new, go to the page that allows creation of a new repository.
Creating branches and performing operations
Branching enables better changing the code without affecting the main code first until you see the changes made can be incorporated in the final code.
To create a branch, click on the dropdown Branch: master. Note that the branch only appears when the repository has content or files.
New branch created contains files similar to the main branch and changes can be made on the files in the new branch.
Github GUI commands:
Commit command- saves changes on a file.
Pull command — tells the changes done in a file. It compares and asks whether the files can be merged.
Merge command — merges the changes committed into the master branch.
Cloning and forking github repository
Cloning: creating a copy of a repository.
Git command: git clone <name of the repository>
Forking: Create a duplicate repository to your account from a public repository.
Changes in the original repository will be reflected back to the forked repository.
Changes in a forked repository will not be present in the original repository unless a pull request is made.
Steps to fork a repository:
Go to the page where the public repository you want to fork is located:
Explore => public repository => fork
Git
Tool used to manage projects. Git bash is used in Linux CLI and git shell is used Windows CLI.
Operations and commands in git
· git init — creates an empty repository or re-initializes an existing one. Creates a .git directory.
· git status — lists all the modified files which are ready to be added to the local repository that is untracked files.
· git add <directory>/ <file> — updates the index using the current content found in the working tree and then prepares the content in the staging area for the next commit.
· git add -A — adds all untracked files to the index.
· git commit — it copies the changes made in the repository. A text editor is prompted for you to write a commit message.
· git commit -m <message>
· git commit -a — commit all changes.
· git pull — fetches changes from a remote repository to a local repository.
· git pull origin master — copy files from the master branch of remote repository to your local repository.
· git push — used to transfer commits from your local repository to your remote repository.
· git push origin master — used to reflect files in the master branch of my central repository.
· git merge <branch-name> — add the branch to the current working branch.
These are some of the common commands used in git.
Day 2: INTRODUCTION TO DOCKER AND CONTAINERIZATION
What is docker? A containerization platform that packages your applications and all its dependencies together in the form of a docker container.
Docker container ensures your application works seamlessly in any container. Container is a standardized unit that can be created on the fly to deploy a particular application or environment.
Docker engine — the application installed on the host machine.
It acts like a client-server application with;
· a daemon process (server)
· CLI client
· REST API which is used for communication between client and server.
What is docker image? The building blocks of a docker container. It is used to let people create and share software through Docker images.
How to create a docker image:
run the build command to the docker daemon from the CLI client.
Daemon builds an image based on our inputs and save it in the registry or pull an image from the Docker Hub.
Docker image commands:
docker images — lists all docker images
docker rmi <image-id>, docker image rm <image-id> — remove docker image
docker build -t <dockerhub-username> / <customer_docker_image_name>.
What is docker container? A ready application created from Docker images. They are running instances of images and hold the entire package needed to run the application.
It is the utility software of the technology.
How to build a container: issue a run command to create a container.
Docker container commands:
docker ps, docker container ls -a — lists all docker containers.
docker container prune — remove all stopped docker containers.
docker stop <container_id>, docker rm <container_id> — stop and remove docker container respectively.
Docker run –name <custom_container_name> -p <new_port>:<defined port> -d <dockerhub_username>/<custom_docker_image_name> — create docker container.
What is docker registry? Where the docker images are stored. The registry can be the user’s local repository or a public repository like a Docker hub to allow multiple users to collaborate in building an application.
Docker architecture: it consists of the following:
Docker client which is used to trigger docker commands.
Docker host runs the Docker daemon which is responsible for the docker image and docker container.
Docker registry is used to store docker images.
Day 3: INTRODUCTION TO WEB DEVELOPMENT
From the article, I have understood the fundamentals of any website starts with mastery of HTML and CSS which are mostly used for creating traditional websites and mostly static websites. With the evolving technology, JavaScript became an integral part of creating front-end websites that are dynamic in nature.
Front-end web development is mainly done using HTML, CSS and JavaScript. HTML is used to structure the pages of a website; CSS is used for styling and JavaScript is used to make the website dynamic.
From the article, I would say that web applications take the client-server architecture. This is a concept that I have learnt from the article about HTTP methods that require communication between the browser which is the client and the server either a web server or an application server which has the files and other resources of the website.
The modern websites are created with great frameworks that have enabled a lot of front-end web applications that perform some operations that would have otherwise be done by the back-end applications.
Modern websites use client-side rendering where the client codes the format of the object to be rendered after a request is made making it more intelligible hence making front end applications more powerful. In some front-end applications, the authentication of users can also be implemented without needing to retrieve data from the database.
Front-end web applications are therefore more complex and greatly crucial in the technological world today.
Day 4: MATERIAL DESIGN FOR REACT
Great styling is an integral part of any website. React.js uses Material-UI library to style most of its components like buttons, form data, card among others.
Installing material-UI: run command- npm install @material-ui/core
Usage: import the component you want to import and incorporate it on the code by wrapping where you want to use it in the component’s tag. Example:
Day 5: UNDERSTANDING BEGINNERS IN AND OUTS OF REACT.JS
Props and state — these are variables that hold information thar influences the output of render.
Props (short form for properties) — variables passed to the parent component. (similar to function parameters).
State — variables directly initialized and managed by the component. They are similar to variables declared within the function).
JSX — Syntax extension to JavaScript. It is the use of HTML elements together with JS code to render the logic.
Conditional rendering is the creation of components that encapsulate behaviors you need then one can render only some of them depending on the state of your application.
It works like the conditions in JS like if and conditional operators to create elements representing the current state and let react update the UI to match them.
Styling components are incorporated using bootstrap, material-UI as well as CSS files that can be imported to the component.
Other popular libraries can also be installed to achieve a particular style like react-flip-move.
Lifecycle methods are used within the three lifecycles of a React application which are mounting (birth of component), updating (growth of component) and finally unmounting (death of a component).
Common react life cycle events include:
render () method — handles the rendering of a component to the UI.
It happens during mounting and updating of your component.
It is the only required method within a class component in React.
componentDidMount () method — It is called as soon as the component is mounted and ready.
It is used to initiate API calls.
setState() method is used to update state and cause another rendering before the browser updates the UI.
componentDidUpdate() method — invoked as soon as updating happens. It uses the setState() method that needs to be wrapped in a condition to check for state or prop changes from pevious state.
componentWillUnmount() method — it is called just before the component is unmounted and destroyed.
Fetching data from an API requires the use of HTTP methods as well as APIs like the fetch () method to get data using the GET HTTP method.
Handling events in React is similar to handling events on DOM elements. React events use camelCase and uses JSX to pass a function the event listener.
To set up an environment in React, we use npx create-react-app <app-name>.
cd <app-name>
npm start.
Now one can start creating a React application.
Day 6: AXIOS AND FETCH () API
Fetch API
Fetch () API is a promised-based JavaScript API for making HTTP requests in the browser.
It uses promises to provide more powerful and flexible feature set to fetch resources from the server.
The API uses the fetch () method with URL which is the path to the resource one wants to fetch as its argument.
Other methods used with fetch () method include:
then () method — returns a promise when it is fulfilled.
catch () method — intercepts errors if the request fails for any reason.
json () method — returns a response which is a stream object.
text () method — returns an XML response.
blob () method — returns a blob response.
Fetch API allows the use of HTTP methods that is GET, POST, PUT, DELETE, HEAD and OPTIONS.
Fetch also uses the reqres API to send data back with an ID and created timestamp attached.
Axios
it is a popular promise-based HTTP client that sports an easy-to-use API and can be used in both the browser and Node.js.
It is edgier than fetch () and HTTP errors 4XX and 5XX are rejected unlike in fetch API where these errors are not rejected.
How to install axios: npm i axios.
Axios uses transforms and interceptors’ functions to request data and give response from the servers.
Transforms — transforms the outgoing and incoming data to and from json.
Interceptors — functions that can be attached to fire when a request is made or when a response is received.
Day 7: MAP IN REACT
This is a map () function that takes the place of the for loop in react.js.
The function is used to iterate through an array in react and incorporates JSX.
Within this function the HTML elements can be given the key attribute to provide a unique identity for each HTML element being rendered.
UUID library can be used to generate unique IDs for rendered objects.
Day 8: APIs and HTTP methods
Most web applications used the REST API protocol to communicate with each other. Data is sent as JSON to the API.
The API returns a JSON payload which can be static or dynamic data.
A state is created and used to hold data pending to be rendered.
Output of the API request is stored in the state. componentDidMount () method is executed immediately a component is mounted and makes the API request in that method and calls the API and gives the output of the API call.
HTTP requests in React uses popular libraries like fetch, axios, superagent where the fetch API is inbuilt while the axios and superagent are to be installed within the application.
React Context API
This API solves prop drilling which is the process of getting data from one component to another by passing it through multiple layers of intermediary React components.
Using this API, components will receive props indirectly.
Create a central store for the data and the store is then inserted into any component within the application directly.
Day 9: REACT AND NETLIFY
First before deploying any react applications, run the command:
npm run build — creates a build folder that can be deployed.
npm install netlify -cli -g
netlify deploy.
The next step is to choose a new site for the project or choose an existing site.
Choose a site name: this is optional.
Select the netlify account you want to deploy the app to.
Specify the build directory which contains the assets or deployment and then press enter.
The site will be created.
To take the site live: netlify deploy –prod
Alternative:
Login to a your netlify account and drag and drop the build folder to the online netlify app and the app will get deployed to a live URL.
