This is the React code-along covering the first 7 topics for the _nology course. Each topic has its branch, as you look into each subject you will be building this mini project.
Each branch focuses on its topic, with a lesson plan, component tree, challenge, and solution to complete.
The plan, component-tree, challenge, and solution markdown files are in the notes folder on each branch.
Each plan is more prescriptive than the previous project's this is for a couple of reasons.
- To keep the project consistent throughout.
- To give the Coach an idea of what you will cover without having done the branch before.
- To allow the Student a plan/snippets of the lesson if they fall behind or run into bugs.
The notes folder contains everything to complete the topic.
The plan is the lesson, it contains steps, snippets, components, and styles you will need to create to complete the branch. If the code snippets are large they are in drop-down lists. Feel free to copy and paste them as they are normally style files.
If you go to the md file on GitHub it gives a copy icon on the code snippet.
The component-tree is a visual representation of the project. It has a component tree for the start of the branch and what it will look like when you are done. With a list of the components.
The challenge has a brief for the students to complete. The first couple of branches have broken the brief down into steps.
The solution has broken the challenge brief down and completed each little step.
The project has been built with these conventions.
- SCSS for styling
- BEM for naming
- Components consist of a .jsx and .scss file. There is no index.js in the component folder. When the components are imported you will have to give a path to the .jsx file, not just the folder.
Clone the repo and install the dependencies.
git clone https://github.com/nology-tech/react-code-along.git
cd react-code-along
npm installTo start the live server run.
npm startTo change branch.
git checkout name-of-branchThe branches available are below.
The project was wire framed using Figma. The design file is here.
Each branch and the component trees were planned on Mural. If you are interested have a look here.
Both the data file gists are here.
They are both responses from the AudioDB API.