React example app

This project was created with Create React App.

To try it, execute the following (you'll need git and node) on the command line:

$ git clone https://github.com/fmaylinch/youtube-react.git
$ cd youtube-react
$ npm install
$ npm start

The app should automatically open in the browser on http://localhost:3000. For the search to work you will need to get a Youtube API key (see step10 below for instructions) and put that key in the file youtube-api-key.json.

To stop the application press Ctrl+C from the command line. To start again you just need to execute npm start.

You may checkout tags to see the project in each step. For example git checkout step01 to see the app in its first step. List all tags (steps) with git tag -n. See more information about the development steps below.

I recommend you to create your own application while learning.

Development steps

step01: Project created with create-react-app.

step02: Remove some code that create-react-app created to start with an even simpler example that doesn't use JSX.

step03: Use of JSX to simplify code.

step04: Use one component (VideoItem) from another (App).

step05: Pass properties (props) to VideoItem.

step06: Configure ESLint. You may want to install linter-eslint.

step07: Display a list of VideoItem (from hardcoded array) using the key property.

step08: Load list of videos from sample JSON file.

step09: Create VideoList component (refactor).

step10: Search videos from Youtube API using axios (hardcoded query term). The App component is turned into a class so it can have state, which is updated when the videos are loaded.

To get a Youtube API key go to Google APIs and look for Youtube (here's a direct link to it). Enable that API; you will be asked to create a project before, if you don't have one. Then generate an API key in credentials. Click on Create credentials, then on Help me choose, select Youtube API, to be called from Web browser (Javascript), accessing public data. Once you have the API key you may explore the Youtube API endpoints , in particular the search (fill part with snippet and q with your query).

step11: Add an <input> whose value is linked to the state (searchTerm) via the onChange event and a <button> that onClick searches the videos using the searchTerm.

step12: Refactor: create component SearchForm and notify App (lift state up) through a callback so it can refresh VideoList .

step13: Improve SearchForm (more flexible, send with ENTER key).

step14: Create a MenuBar to organise the layout. SearchForm now sends callback to MenuBar and MenuBar propagates it to App .

If you want to go deeper check this article about component communication strategies in React. Popular state management frameworks: Redux (if you really need it) and Mobx.

step15: Add style via CSS files, using some flexbox features.

I highly recommend learning flexbox (video tutorial and little game) and CSS Grid (little game). See the intro note here.

step16: Type checking using propTypes in VideoItem.

step17: Type checking using Flow instead of propTypes. See adding Flow (fix for VS Code) and Flow docs about React.

See this article about Flow and TypeScript.

step18: Use React Router to display VideoList when searching and VideoDetail when clicking one video in the list.

You need to install react-router-dom.

You may want to check this React Router v4 Tutorial. About navigating programmatically, I used the Route approach from that answer. About Flow types, I just could find this type definition file, although it's a bit hard to read.

step19: Use if/else conditional rendering for displaying a "loading..." message while loading the videos in VideoList.

step20: Load video data from VideoDetail so url is bookmarkable.

step21: Use refs to get HTMLFormElement in SearchFormRef (alternative version to SearchForm). In this case, it's useful if a form has many fields and we don't need to synchronise them with state.

step22: Add tests.

If you want to use Flow in tests you may install flow-typed (yarn add flow-typed) and then install the appropriate jest type definitions. To do so, I found out the jest version with yarn list | grep " jest@", which in my case was [email protected] and then installed them with node_modules/.bin/flow-typed install [email protected].

step23: Add component tests. It is recommended to use Enzyme so execute yarn add enzyme react-test-renderer jest-enzyme enzyme-adapter-react-16. I found the need for the last package here. You also need to create a src/setupTests.js with the code indicated there.

Getting started with create-react-app

If you want to create a project from scratch:

1. Install node from nodejs.org or using nvm.
2. Install Create React App: npm install --global create-react-app.
3. You may use yarn to install local node packages: npm install --global yarn. Then you could do yarn add PACKAGE instead of npm install --save PACKAGE.
4. Execute create-react-app PROJECT_NAME. Then you can enter cd PROJECT_NAME and execute npm start or yarn start to launch the app.
5. You can stop the app pressing Ctrl+C.
6. Pick your favourite code editor and learn more.

Code editors

Some popular code editors and IDEs:

• Atom
• Sublime Text
• Brackets has live editing
• VS Code
• Eclipse
• IntelliJ IDEA is very powerful, but free version doesn't include js support

Atom is quite popular among frontend developers, but VS Code is gaining popularity.

Here's a list of useful Atom plugins I installed:

• language-babel - js/jsx enhancements
• linter-eslint - js linting
• emmet (enable in JSX) - html shortcuts
• js-hyperclick. - navigate through components
• flow-ide - Flow integration

Plugins for VS Code I installed:

• sublime-babel - js/jsx enhancements
• ESLint - js linting
• vscode-flow-ide - Flow integration
• git history (log)

Learn more

Tutorials and more

Besides following the steps in this project, you may learn more here:

• https://reactjs.org/tutorial/tutorial.html
• https://egghead.io/courses/start-using-react-to-build-web-applications
• http://learn.humanjavascript.com/react-ampersand
• http://www.react.express
• https://reactjs.co
• https://medium.freecodecamp.org/reactjs-concepts-c83f9b53eac2
• https://daveceddia.com/create-react-app-express-backend/
• https://wdrl.info/ - newsletter about web development

Tools

At any point, you may quickly deploy your React app with Surge.

Check the complementary tools for React. For example, the React dev tools, which you can use to:

• See your page structure like in Elements but more React-friendly.
• Select an element and in the Console refer to it as $r.
• Inspect an element on the page (goes to Elements) and then go to React tab to locate the component.

Notes

This file was edited using classeur and bear.