Interview build carrier, work screw, new company interview technical officer requirements will react technology stack.

Q: Did you use React? A: No, only Vue. Q: Can you get started in a week? A: Yes (look assured)…

Nan Murong, Bei Qiao Feng, 18 hands of the dragon, time is changing, take it first. Tossing and turning, I began to learn React. However, the company project does not use React for now… Orz, but in order to improve the actual combat experience, or in spare time to create a actFM, the following is the project introduction.

preface

For most front-end development engineers, private projects are more about improving their practical experience, so what kind of projects to develop and how to improve development efficiency? I also often wonder why others always make unexpected projects while I don’t have any ideas. I think it must be the wrong way for you to approach information. Here are some suggestions.

  • Use Google search
  • Focus on the popular technology stack on the front end
  • Get involved in front-end communities (nuggets, Zhihu, Sifu, etc.), follow open source projects, and follow the blogs of active developers
  • Fork project, learn the source code of other projects

If you don’t have a project in mind, think of something you’d like to do. For example, if you like listening to music, be a private FM. Two yuan lovers, do an APP of aggregation pantomime; Love Kindle, make a Kindle ebook search site, etc..

For efficiency improvement, as many enterprises are shifting from the traditional development mode to the front end separation mode, the workload for the front end is higher than the traditional development mode. Of course, when we were developing our own private projects, we had to do both the front-end work and write our own interface services, which meant that the development cycle was correspondingly longer. I think it needs to be considered according to the project and personal situation. If you have your own cloud host and have no experience in developing Restful interfaces, you can improve the actual combat experience of both front and back end by yourself. If you do not have your own host and the small size of the project is not expected to have a large number of requests, you can use back-end cloud services. For example, this project is based on Leancloud data storage service.

The project address

Github.com/alex1504/Pe…

Project screenshots

preview

Visit fM.Huzerui.com/, or scan the QR code for a preview (best on mobile)

Test account

  • Username: petalFM
  • Password: petalFM

Technology stack

  • Framework: the react
  • State management: redux
  • Pack: Webpack, Babel
  • Language: ES2015, Less
  • Library:
  • React Router V4
  • Material-UI
  • Code check: ESLint
  • Icon support: Iconfont

Project Directory Description

. | -- -- config directory | - database / / / / webpack configuration database backup directory | | - media / / readme describe resources - SRC / / source directory | | | - components / / public components | - pages / / page components | | - Login / / landing page | | - Guide / / label custom page | | - Index / / homepage | | - Search / / Search page | | - Admin / / Background data entry page (only administrators visible) | | - way / / users are not interested in songs page | | - the router / / route definition | | - services / / back-end services directory | | -- avinit. Js / / LeancloudSDK initialization | | -- config. Js / / database related configuration | | -- songServices. Js / / songs related services | | -- userServices. Js / / user related services | | - Index. Js / / the backend database service entrance | | - store / / state management | | - index. The js / / loading various store module | | - types / / define the type of trigger state change | | - reducers / / State generator | | | - Utils / / tools function | -- index. Js / / program entry documents. | - gitignore / / Git submission to ignore rules | | - LICENSE / / authorization agreement -- README. / / md Project description | -- package. Json / / configure project related information.Copy the code

Local run or secondary development

Because the WEB security domain name is enabled on the back-end cloud, the local clone project cannot run directly. The solution is as follows:

Pre-work:

  • Step1 run commands to clone the project to the local PCgit clone https://github.com/alex1504/PetalFM.git
  • Step2: install dependenciesnpm install
  • Step3: register an account in leancloud.cn/ and create a leancloud application in the background
  • Step4: in the background of leancloud application, import the database under the root directory database, and create your administrator account in the _User table (user name and password should be 4-8 digits, letters or _).
  • Step5: modify/src/services/config.jsThe configuration is as follows:
export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';
Copy the code

Only the administrator can see the Admin entry and enter the song through the search interface and set the category of the song.

Development:

  • Step6: performnpm run devRun the project
  • Step7: performnpm run buildPackage projects,/dist/The folder is the packaged project file

Deployment:

  • Step9: During development, webpack-dev-server will be local/api/Request forward tohttp://music.163.com/api(To add other forwarding mechanisms, modify the proxy configuration in package.json for complete configurationhttp-proxy), please use the Nginx or NodeJS server for interface forwarding when deployed to the server. Otherwise, the search and input services do not take effect.

conclusion

You will encounter many problems during the development of a project, and solving them will give you more experience. Earlier, IN order to learn the development of small programs, I made a small program APP named pocket Guitar. This is also a development idea driven by personal interest. Start learning program documentation with small, APP interface reference for other small programs, interface shape and found no data source, and initial data entry by nodejs wrote a creeper, enable the grab keep updating regularly, and encapsulates the interface service, even to do a simple background page input data, to sum up, this is an interesting experience.

Like this project can be star or fork, thanks for your support.