|
1 | 1 | # React-UI-Components
|
2 | 2 |
|
3 |
| -- This repository is designed to be your first exposure into the world of ReactJS. You will be given 2 days to complete the 2 assignments in this repository. Day 1 is all about implementing a Social Card in ReactJS. On Day 2 you'll be implementing a Calculator. We've given you the file structure and have gone ahead and added all the files you'll need to be set up for success for each project. |
| 3 | +- This repository is designed to be your first exposure into the world of ReactJS. There are 2 projects to complete in this repository. Project 1 is all about implementing a Social Card in ReactJS. On Project 2 you'll be implementing a Calculator. We've given you the file structure and have gone ahead and added all the files you'll need to be set up for success for each project. |
4 | 4 |
|
5 | 5 | ## Initializing the application.
|
6 | 6 |
|
7 | 7 | - This project was put together using `create-react-app` (CRA). **You will not need to install CRA in order to make this project work**
|
8 | 8 | - Each project has it's own `package.json` file in it, we'll chat more about this later. So it's already set up for you to install some dependencies that are needed for you to be able to work within the React Ecosystem.
|
9 |
| -- To start the `Social Card` project, you'll need to cd into `Day-1-Social-Card` and then into `social-card` and run `yarn install` to retrieve all the dependencies. |
| 9 | +- To start the `Social Card` project, you'll need to cd into `Project-1-Social-Card` and then into `social-card` and run `yarn install` to retrieve all the dependencies. |
10 | 10 | - Inside of `../../social-card` you'll then need to run `yarn start` to open up a React Development Server that can take your `.js` files as components and bundle them up to work in your new environment.
|
11 | 11 | - **You'll repeat this last two steps for the calculator project, but you'll need to make sure that you're inside of `../../calculator` directory to make this work.**
|
12 | 12 |
|
13 | 13 | ## Instructions
|
14 | 14 |
|
15 |
| -- Over the next two days you'll be working on two different projects in this repo. |
16 |
| - - The first day you'll work on the project found in `Day-I-Social-Card`. |
17 |
| - - The second day you'll work on the project found in `Day-II-Calculator`. |
| 15 | + |
| 16 | +- For the first project you'll work on the project found in `Project-I-Social-Card`. |
| 17 | +- For the second project you'll work on the project found in `Project-II-Calculator`. |
18 | 18 | - Use the design files to build out your User Interfaces.
|
19 | 19 | - All components can be built out using the provided html files found in their respective directories.
|
20 | 20 | - Each file has been set up to work within a `react.js` environment. Pay attention to the notes found within each project.
|
|
23 | 23 | ## _Project I - Social Card_
|
24 | 24 |
|
25 | 25 | - We're going to break down this assignment in terms of how you should be starting to think in react. Remember that everything is a component.
|
26 |
| -- All the files you'll need for this project are found in `Day-I-Social-Card/social-card/src/components`. You can find all the component files you should need in their respective directory. i.e. inside of the `HeaderComponents` directory you should see a few `.js` files and a `.css` file. |
| 26 | +- All the files you'll need for this project are found in `Project-I-Social-Card/social-card/src/components`. You can find all the component files you should need in their respective directory. i.e. inside of the `HeaderComponents` directory you should see a few `.js` files and a `.css` file. |
27 | 27 | - Feel free to add any files for any extra components you may feel the need to build.
|
28 | 28 | - Any of the styles you write in your respective `.css` file should be available for your the components where the `.css` file is being imported.
|
29 | 29 | - We have drawn boxes around possible areas that could be components.
|
|
53 | 53 | - Create a `<Footer/>` component that pulls in the icons and displays them properly.
|
54 | 54 | - Build out the functionality so that a user can click on the icons and have them react to events.
|
55 | 55 | - Ensure that your product is as pixel perfect as possible using any tools that you were introduced to in previous weeks.
|
56 |
| -- Look up the `moment.js` library and figure out how to format your `time-stamp` in your header to be today's date. |
| 56 | +- Look up the `moment.js` library and figure out how to format your `time-stamp` in your header to be todays date. |
57 | 57 |
|
58 | 58 | ## _Project II - React Calculator_
|
59 | 59 |
|
60 | 60 | - For this project you're not going to be given any tips on how to break down the image file into components. Now that you've had some practice with the social card, this should be something you can start doing on your own. Just think about the image, and what potentially looks like a component.
|
61 | 61 | - For the MVP the calculator just needs to be displayed properly. Functionality will be a part of the stretch requirement.
|
62 |
| -- All the files you'll need for this project are found in `Day-II-Calculator/calculator/src/components`. You can find all the component files you should need in their respective directory. i.e. inside of the `ButtonComponents` directory you should see a couple `.js` files and a `.css` file. |
| 62 | +- All the files you'll need for this project are found in `Project-II-Calculator/calculator/src/components`. You can find all the component files you should need in their respective directory. i.e. inside of the `ButtonComponents` directory you should see a couple `.js` files and a `.css` file. |
63 | 63 | - Feel free to add any files for any extra components you may feel the need to build.
|
64 | 64 | - Here is what your calculator should look like:
|
65 | 65 |
|
|
81 | 81 | - Create an `<ActionButton />` component that will be used for the `zero` character and the `clear` button.
|
82 | 82 | - Create a `<CalculatorDisplay />` component that will be used as the `calculator display`
|
83 | 83 |
|
84 |
| -#### Day 2 Stretch Problems |
| 84 | +#### Project 2 Stretch Problems |
85 | 85 |
|
86 | 86 | - Re-factor your `App.js` file to be a classical component that can hold state on it's constructor. (There is some documentation in training kit on how this works).
|
87 | 87 | - On your state object be sure to include a property for the `total` that can be passed down to your `<CalculatorDisplay />` component.
|
|
0 commit comments